목차

• 사전 요구 사항
• APP ID, APP Key, 및 도메인 가져오기
• 1. 프로젝트에 Freshchat SDK 추가하기
• 1.1. iOS 설정
• 1.2. Android 설정
• 2. SDK 초기화
• 2.1 초기화 구성 옵션
• 3. 사용자 정보
• 3.1 사용자 정보 업데이트
• 3.2 사용자 속성(메타 데이터) 업데이트
• 3.3 사용자 데이터 재설정
• 3.4 사용자 복원
• 3.5 Freshchat 사용자 ID 가져오기
• 4. 지원 솔루션 시작
• 4.1 대화
• 4.1.1 대화 주제 필터링
• 4.1.2 읽지 않은 메시지 수
• 4.2 FAQ
• 4.2.1 FAQ 옵션
• 4.2.2 태그로 FAQ 카테고리 필터링
• 4.2.3 태그로 FAQ 기사 필터링
• 4.2.4 FAQ의 "문의하기" 클릭 시 표시되는 메시지 주제 필터링
• 5. 메시지 전송 API
• 6. 푸시 알림
• 6.1.1 서버 측 통합
• 6.1.2 클라이언트 측 통합
• 6.2 알림 사용자 정의 (Android 전용)
• 6.3 푸시 알림 체크리스트
• 7. 기타 참고 사항

사전 요구 사항

RN v0.60 이상은 Freshchat SDK v2.0.0부터 지원됩니다.

APP ID, APP Key, 및 도메인 가져오기

귀하의 Freshchat 계정은 고유한 APP ID 및 APP Key와 연결되어 있으며, 이를 사용하여 모바일 SDK를 Freshchat과 통합할 수 있습니다. 계정 소유자/관리자로 Freshchat 계정에 로그인한 후, 관리자 > 모바일 SDK로 이동합니다. 여기서 APP ID, APP Key 및 도메인을 찾을 수 있습니다.

1. 프로젝트에 Freshchat SDK 추가하기

Freshchat 노드 패키지 이름은 'react-native-freshchat-sdk'입니다. 리액트 네이티브 프로젝트의 Package.json 파일의 dependencies 아래에 ”react-native-freshchat-sdk”: “{{latest-version}}”을 추가합니다.

최신 SDK 버전은 다음 링크를 참조하십시오: https://www.npmjs.com/package/react-native-freshchat-sdk

1.1. iOS 설정

React 종속성 (RN < 0.60 & Freshchat SDK 2.0.0+)

# React Native 요구 사항
pod 'React', :path => '../node_modules/react-native', :subspecs => 
[
'Core',
'CxxBridge', # RN >= 0.47에 포함
'DevSupport', # RN >= 0.43에 In-App Devmenu 활성화
'RCTText',
'RCTNetwork',
'RCTWebSocket', 
# 디버깅 필요
'RCTAnimation', 
# FlatList 및 네이티브 UI 스레드에서 실행되는 애니메이션 필요
# 프로젝트에서 사용하려는 다른 subspecs 추가
]
# RN >= 0.42.0을 사용하는 경우 Yoga 명시적으로 포함
pod 'yoga', :path => '../node_modules/react-
native/ReactCommon/yoga'
pod 'DoubleConversion', :podspec => '../node_modules/react-
native/third-party-podspecs/DoubleConversion.podspec'
pod 'glog', :podspec => '../node_modules/react-native/third-party-
podspecs/glog.podspec'
pod 'Folly', :podspec => '../node_modules/react-native/third-party-
podspecs/Folly.podspec'

기존 Freshchat 통합을 Freshchat SDK 2.0.0+로 마이그레이션

다음 명령어를 사용하여 리액트 프로젝트에서 React 네이티브 Freshchat SDK 연결을 해제합니다.
react-native unlink react-native-freshchat-sdk

iOS 프로젝트 내 Podfile에서 다음 줄을 제거합니다.
pod 'FreshchatSDK', :path=> '../node_modules/react-native-freshchat-sdk/ios/FreshchatSDK.podspec'

위의 표를 참조하여 요구 사항에 따라 단계를 선택합니다.

1.2. Android 설정

프로젝트 레벨 build.gradle 파일에 maven { url "https://jitpack.io" }를 추가합니다.

allprojects
{
    repositories
    {
        .....
        maven { url "https://jitpack.io" }
    }
}

RN 버전 < 0.60을 사용하는 경우, 아래 명령어를 실행하십시오.
react-native link react-native-freshchat-sdk

2. SDK 초기화

다른 Freshchat SDK 기능을 호출하거나 사용하기 전에 Freshchat.init()을 앱 ID와 앱 키로 호출합니다.

앱의 런처/지원 화면에서 init()을 호출하는 것을 강력히 권장합니다. Freshchat SDK는 init() 중에 구성 요소의 존재 여부를 확인하며, 구성 요소가 누락되었거나 매니페스트 항목이 누락된 경우 경고를 표시합니다.

다음 코드 스니펫에서 YOUR-APP-ID와 YOUR-APP-KEY를 실제 앱 ID와 앱 키로 바꿉니다.

import { Freshchat, FreshchatConfig } from 'react-native-freshchat-sdk';
var freshchatConfig = new FreshchatConfig(APP_ID, APP_KEY);
freshchatConfig.domain = "YOUR-DOMAIN";
Freshchat.init(freshchatConfig);

2.1 초기화 구성 옵션

초기화 전에 구성에서 카메라 캡처와 같은 기능을 활성화하거나 비활성화합니다.

var freshchatConfig = new FreshchatConfig(APP_ID, APP_KEY);
freshchatConfig.domain = "YOUR-DOMAIN";
freshchatConfig.teamMemberInfoVisible = true;
freshchatConfig.cameraCaptureEnabled = true;
freshchatConfig.gallerySelectionEnabled = true;
freshchatConfig.responseExpectationEnabled = true;
freshchatConfig.showNotificationBanner = true; //iOS 전용
freshchatConfig.notificationSoundEnabled = true; //iOS 전용
freshchatConfig.themeName = "CustomTheme.plist"; //iOS 전용
freshchatConfig.stringsBundle = "FCCustomLocalizable"; //iOS 전용
Freshchat.init(freshchatConfig);

3. 사용자 정보

3.1 사용자 정보 업데이트

지원 에이전트가 사용자와 메시지를 주고받을 때 사용자에 대한 더 많은 컨텍스트를 제공하기 위해 언제든지 기본 사용자 정보를 보낼 수 있습니다.

import { FreshchatUser } from 'react-native-freshchat-sdk';
var freshchatUser = new FreshchatUser();
freshchatUser.firstName = "John";
freshchatUser.lastName = "Doe";
freshchatUser.email = "johndoe@dead.man";
freshchatUser.phoneCountryCode = "+91";
freshchatUser.phone = "1234234123";
Freshchat.setUser(freshchatUser, (error) => {
    // 에러 처리
});