목차
- 사전 요구 사항
- APP ID, APP Key, 도메인 받기
- 3. 사용자 정보
- 4. 지원 솔루션 시작
- 5. 메시지 전송 API
- 6. 푸시 알림
- 7. 런타임 앱 로케일 변경 (Android)
- 8. 앱에서 비-Freshchat 링크 가로채기 및 처리
- 9. 기타 참고 사항
사전 요구 사항
Freshchat SDK는 Flutter v1.10.0 이상을 지원합니다.
APP ID, APP Key, 도메인 받기
귀하의 Freshchat 계정은 고유한 APP ID 및 APP Key와 연결되어 있으며, 이는 모바일 SDK를 Freshchat과 통합하는 데 사용됩니다.
계정 소유자/관리자로 Freshchat 계정에 로그인하세요.
관리자 > 모바일 SDK로 이동합니다. 여기에서 APP ID, APP Key 및 도메인을 찾을 수 있습니다.
1. 프로젝트에 Freshchat SDK 추가
Freshchat 플러그인 이름은 ‘freshchat_sdk’입니다.
Flutter 프로젝트의 pubspec.yaml 파일에서 dependencies 아래에 추가합니다
freshchat_sdk: "{{latest-version}}"
최신 SDK 버전은 다음 링크를 참조하세요:
https://pub.dev/packages/freshchat_sdk
1.1. iOS 설정
아래 명령어를 실행하여 SDK를 자동으로 연결합니다
cd ios
pod install1.2. Android 설정
앱이 Android 7.0+을 대상으로 하고 이미지 첨부가 활성화된 경우, FileProvider를 구성해야 합니다.
아래와 같이 AndroidManifest.xml에 제공자를 포함합니다.
AndroidManifest.xml
<provider
android:name="androidx.core.content.FileProvider"
android:authorities="com.example.demoapp.provider"
android:exported="false"
android:grantUriPermissions="true">
<meta-data
android:name="android.support.FILE_PROVIDER_PATHS"
android:resource="@xml/freshchat_file_provider_paths" />
</provider>Strings.xml
<string name="freshchat_file_provider_authority">com.example.demoapp.provider
</string>2. SDK 초기화
Freshchat SDK의 다른 기능을 호출/사용하기 전에 앱 ID, 앱 키 및 도메인과 함께 Freshchat.init()을 호출하세요.
앱의 런처/지원 화면 시작 시 init()을 호출하는 것을 강력히 권장합니다. Freshchat SDK는 init() 중에 구성 요소의 존재 여부를 확인하고 누락된 구성 요소가 감지되면 경고합니다.
다음 코드 스니펫에서 YOUR-APP-ID, YOUR-APP-KEY 및 YOUR-DOMAIN을 실제 앱 ID 및 앱 키로 교체하세요.
Freshchat.init(YOUR-APP-ID, YOUR-APP-KEY,YOUR-DOMAIN);
2.1 초기화를 위한 구성 옵션
특정 구성에 대한 선택적 매개변수를 추가하여 카메라 캡처와 같은 기능을 활성화하거나 비활성화합니다
Freshchat.init(YOUR-APP-ID, YOUR-APP-KEY,YOUR-DOMAIN,
teamMemberInfoVisible:true,
cameraCaptureEnabled:true,
gallerySelectionEnabled:true,
responseExpectationEnabled:true,
showNotificationBanner:true,
notificationSoundEnabled: true);2.2 문자열 로컬라이제이션 (iOS)
2.2.1 Android
안드로이드 로컬라이제이션에 대한 안드로이드 문서를 참조하세요 (섹션 7.2.1) 여기.
2.2.2 iOS
사용자 정의 문자열을 위한 번들을 생성하는 iOS 문서를 참조하세요 (섹션 7.3) 여기. 생성된 번들을 다음과 같이 사용하세요
Freshchat.init(YOUR-APP-ID, YOUR-APP-KEY,YOUR-DOMAIN,stringsBundle: “bundleName”);
2.3 UI 사용자 정의 옵션
2.3.1 Android
안드로이드 테마 문서에 대한 안드로이드 문서를 참조하세요 여기.
2.3.2 iOS
사용자 정의 plist 파일을 생성하는 iOS 문서를 참조하세요 (섹션 8.1) 여기. 생성된 plist 파일을 다음과 같이 사용하세요:
Freshchat.init(YOUR-APP-ID, YOUR-APP-KEY,YOUR-DOMAIN,themeName: “themeFile.plist”);
3. 사용자 정보
3.1 사용자 정보 업데이트
상담원이 사용자와 메시지를 주고받을 때 사용자에 대한 더 많은 컨텍스트를 제공하기 위해 언제든지 기본 사용자 정보를 보낼 수 있습니다.
import 'package:freshchat_sdk/freshchat_user.dart';
FreshchatUser freshchatUser;
freshchatUser.setFirstName("John");
freshchatUser.setLastName("Doe");
freshchatUser.setEmail("johndoe@dead.man");
freshchatUser.setPhone("+91","1234234123");
Freshchat.setUser(freshchatUser);3.2 사용자 속성 업데이트 (메타 데이터)
사용자 및 앱 내 이벤트에 대한 추가 메타데이터를 캡처하고 보낼 수 있으며, 이는 나중에 사용자에게 메시지를 푸시하기 위한 세분화 방법이 됩니다.
var userPropertiesJson =
{
"user_type": "Paid",
"plan": "Gold"
}
Freshchat.setUserProperties(userPropertiesJson);3.3 타임라인에 사용자 이벤트 기록
사용자 이벤트를 추적하면 애플리케이션 내 사용자에 대한 더 많은 통찰력과 컨텍스트를 제공합니다. 사용자 작업, 실패/오류 사례와 같은 이벤트는 이 API를 사용하여 추적할 수 있습니다. 추적된 이벤트는 상담원 측의 이벤트 타임라인에 나열됩니다.
var eventName = "Visited Order Details page";
var eventProperties = {"Order Id": 3223232332,
"Order Date": "24 Jan 2020",
"Order Status ": "In-Transit"};
Freshchat.trackEvent(eventName,
properties: eventProperties);3.4 사용자 데이터 초기화
로그아웃 시 또는 앱 내 사용자 작업에 따라 적절하다고 판단될 때 resetUser API를 호출하여 사용자 데이터를 초기화합니다.
Freshchat.resetUser();
3.5 사용자 복원
기기/세션/플랫폼 간에 채팅 메시지를 유지하려면 모바일 앱이 사용자에 대해 동일한 외부 ID 및 복원 ID 조합을 전달해야 합니다. 이를 통해 사용자는 Android, iOS 및 웹과 같은 지원 플랫폼 중 어느 곳에서나 원활하게 대화를 이어갈 수 있습니다.
외부 ID - 이는 (이상적으로) 사용자 ID 또는 이메일 ID 등과 같은 시스템에서 사용자를 위한 고유 식별자여야 하며 Freshchat.identifyUser() API를 사용하여 설정됩니다. 이는 사용자에 대해 설정된 후 변경할 수 없습니다
복원 ID - 이는 외부 ID가 설정된 경우 현재 사용자에 대해 Freshchat에서 생성되며, user = Freshchat.getUser() 및 user.getRestoreId() API를 사용하여 언제든지 검색할 수 있습니다. 앱은 외부 ID 및 복원 ID의 조합을 저장하고 나중에 Freshchat SDK에 제공하여 동일한 기기 또는 기기 및 플랫폼 간의 세션에서 채팅 대화를 계속할 수 있도록 책임이 있습니다.
외부 ID 설정하기
Freshchat.identifyUser(externalId:"EXTERNAL_ID");
복원 ID 검색하기
FreshchatUser user = Freshchat.getUser(); var restoreId = user.getRestoreId();
외부 ID 및 복원 ID로 사용자 조회 및 복원하기
Freshchat.identifyUser(externalId:"EXTERNAL_ID",restoreId:"RESTORE_ID");
복원 ID 생성 이벤트 수신하기
복원 ID 생성은 비동기 프로세스입니다. 따라서 복원 ID가 생성될 때 알림을 받기 위해 onRestoreIdGenerated에 스트림을 열어야 합니다. 이 스트림은 리스너의 복원 스트림 및 스트림 구독에서 listen 및 cancel에서 각각 수신 및 등록 해제할 수 있습니다.
복원 ID 생성 이벤트 등록하기
var restoreStream = Freshchat.onRestoreIdGenerated;
var restoreStreamSubscription = restoreStream.listen((event)
{
FreshchatUser user = Freshchat.getUser();
var restoreId = user.getRestoreId();
var externalId = user.getExternalId();
});3.6 Freshchat 사용자 ID 받기
getUserAlias API를 사용하여 사용자의 고유 식별자를 얻을 수 있습니다.
var userAlias = await Freshchat.getFreshchatUserId();
4. 지원 솔루션 시작
아래 스니펫을 사용하여 앱의 실행 버튼에서 FAQ 또는 대화 기반 지원 경험을 시작하세요. 실행 버튼 또는 진입점은 화면상의 버튼이나 메뉴 항목일 수 있습니다.
4.1 대화
메뉴 선택 또는 버튼 클릭 이벤트와 같은 특정 UI 이벤트에 응답하여 showConversations() API를 호출하여 대화 흐름을 시작합니다. 앱에 여러 주제가 구성된 경우 사용자는 주제 목록을 보게 됩니다. 메시지가 없는 경우 주제 목록은 대시보드에 지정된 순서대로 표시됩니다. 메시지가 있는 경우 순서는 가장 최근에 사용된 순서대로 정렬됩니다.
Freshchat.showConversations();
4.1.1 주제 필터링
특정 용어로 태그된 주제만 필터링하고 표시하려면 showConversations API의 선택적 매개변수를 사용하세요
예: 앱의 주문 페이지에서 특정 주제만 연결하고 표시하려면 해당 주제에 "order_queries"라는 용어를 태그할 수 있습니다.
Freshchat.showConversations(filteredViewTitle:"Premium Support",tags:["premium"]);
4.1.2 읽지 않은 메시지 수
앱 시작 시 또는 기타 특정 이벤트에서 사용자의 읽지 않은 메시지 수를 얻으려면 getUnreadCountAsync API를 사용하여 수를 표시하세요.
void getUnreadCount async
{
var unreadCount = await Freshchat.getUnreadCountAsync
}앱이 열려 있을 때 읽지 않은 메시지 수의 변경 사항을 수신하도록 선택할 수도 있습니다. 방송을 수신하는 방법은 아래에 설명되어 있습니다.
onMessageCountUpdate에 스트림을 열고 수신하기
var unreadCountStream = Freshchat.onMessageCountUpdate;
unreadCountSubscription = unreadCountStream.listen((event)
{
print("새 메시지 생성됨: " + event.toString());
});4.1.3 태그로 필터링된 대화에서 읽지 않은 메시지 수
특정 태그로 필터링된 특정 대화에서 사용자의 읽지 않은 메시지 수를 얻으려면 getUnreadCountAsync API를 사용하세요.
List<String> tags = ["sampleTag1","sampleTag2"];
void getUnreadCount async
{
var unreadCount = await Freshchat.getUnreadCountAsyncForTags(tags);
}4.2. FAQ
메뉴 선택 또는 버튼 클릭 이벤트와 같은 특정 UI 이벤트에 응답하여 showFAQs() API를 호출하여 FAQ 화면을 시작합니다. 기본적으로 FAQ 카테고리는 하단에 "문의하기" 버튼이 있는 그리드로 표시됩니다. 이를 사용자 정의하려면 FAQ 옵션을 확인하세요.
Freshchat.showFAQ();
4.2.1 FAQ 옵션
FAQ 흐름에 대한 사용자 정의는 showFAQs() API에 전달된 사용자 정의를 위한 선택적 매개변수에 관련 옵션을 지정하여 달성할 수 있습니다.
Freshchat.showFAQ(faqTitle:"Tags", faqTags:["premium"],faqFilterType: FaqFilterType.Article );
faqTitle - 필터가 적용된 결과 목록 페이지에 주어진 제목.
faqTags - 필터가 적용되는 태그의 이름입니다.
faqFilterType - 카테고리/기사. 카테고리 - 기사 및 하위 카테고리의 조합. 기사 - 기사만 포함합니다.
4.2.2 태그로 FAQ 카테고리 필터링
특정 용어로 태그된 FAQ 카테고리만 필터링하고 표시하려면 faqFilterType 매개변수를 enum FaqFilterType.Category 값으로 사용하여 showFAQs() API에 전달합니다.
예: 특정 사용자 유형과 관련된 FAQ 카테고리를 표시하려면 해당 FAQ 카테고리에 "premium"이라는 용어를 태그할 수 있습니다.
Freshchat.showFAQs(faqTags:["premium"],faqFilterType: FaqFilterType.Category );
4.2.3 태그로 FAQ 기사 필터링
특정 용어로 태그된 FAQ만 필터링하고 표시하려면 faqFilterType 매개변수를 enum FaqFilterType.Article 값으로 사용하여 showFAQs() API에 전달합니다.
예: 결제 실패와 관련된 FAQ를 연결하려면 해당 FAQ에 "payment_failure"라는 용어를 태그하고 앱의 결제 페이지에서 연결할 수 있습니다.
Freshchat.showFAQs(faqTags:["payment_failure"],faqFilterType: FaqFilterType.Article);
4.2.4 FAQ에서 "문의하기" 클릭 시 표시되는 주제를 태그로 필터링
FAQ 화면에서 사용자가 "문의하기"를 클릭할 때 특정 용어로 태그된 주제만 필터링하고 표시하려면 contactUsTags 매개변수를 List 형식의 태그 값으로 사용하여 showFAQs() API에 전달합니다.
예: FAQ 쇼의 특정 섹션과 관련된 주제를 표시하려면 해당 주제에 "payment_failure"라는 용어를 태그할 수 있습니다.
Freshchat.showFAQs(faqTitle:"Payments",
faqTags:["payment_failure"],
faqFilterType:FaqFilterType.Article,
showFaqCategoriesAsGrid:true,
showContactUsOnFaqScreens:true,
showContactUsOnFaqNotHelpful:true,
contactUsTags:["payments"]);5. 메시지 전송 API
앱은 sendMessage() API를 사용하여 사용자를 대신하여 메시지를 보낼 수 있습니다.
예: "premium"으로 태그된 주제에 메시지를 보내려면 아래와 같이 API를 호출할 수 있습니다.
이 문서가 도움이 되었나요?