Keyda Business
South KoreaEnglish 로그인 무료로 시작하기
Keyda Business 문서설치

React Native, Flutter 및 Ionic

세 가지 방식 모두 동일한 호스팅 채팅 페이지를 사용하므로, 학습시킨 내용은 모든 채널의 고객에게 즉시 적용됩니다.

React Native

npm install @keyda/bot-react-native react-native-webview
cd ios && pod install

react-native-webview는 피어 의존성(peer dependency)이며, 번들로 포함되지 않습니다. React Native에는 내장 웹 뷰가 없으며, 이를 별도로 포함하면 앱에 이미 존재하는 버전과 충돌할 수 있습니다.

import { KeydaBot } from '@keyda/bot-react-native';

<KeydaBot
  clientId="kb_live_your_key_here"
  visible={showChat}
  onClose={() => setShowChat(false)}
/>

설치 후 앱을 다시 빌드하세요. react-native-webview에는 네이티브 코드가 포함되어 있어 JS 새로고침만으로는 부족합니다.

Flutter

flutter pub add keyda_bot
// Once, at app start
KeydaBot.init('kb_live_your_key_here');

// From your Help button
KeydaBot.show(context);

또한 KeydaBot.dismiss() 및 KeydaBot.isShowing도 포함됩니다.

Ionic 및 Capacitor

대부분의 Ionic 앱은 웹사이트 스니펫을 사용하는 것이 좋습니다. Ionic 앱은 이미 웹 뷰이므로 웹사이트와 동일하게 일반 스크립트 태그가 작동하며, 래퍼보다 코드가 적게 듭니다:

<script src="https://keyda.in/business/widget.js"
        data-key="kb_live_your_key_here" async></script>

index.html에 입력하면 완료됩니다.

채팅을 내 레이아웃 내부의 버블 형태가 아닌 별도의 전체 화면 인터페이스로 사용하려는 경우에만 @keyda/bot-capacitor를 설치하세요.

npm install @keyda/bot-capacitor
npx cap sync

Cordova 및 기타 하이브리드 앱

Ionic과 같은 원리입니다. 웹 뷰 방식이므로 스크립트 태그가 그대로 작동합니다. 별도의 패키지는 없습니다.

모두가 공유하는 것

  • 단일 채팅 UI를 사용하여 대시보드에서 변경하면 앱을 새로 배포할 필요 없이 어디서나 즉시 반영됩니다.
  • 링크는 채팅창 외부에서 열리며, 대화창을 대체하지 않습니다.
  • 분석 도구, 기기 식별자, 각 플랫폼의 웹 뷰 외에 타사 종속성 없음
  • 온라인 전용 — 채팅은 호스팅된 페이지입니다

모든 패키지의 소스 코드는 github.com/KeydaAI/keyda-business-sdks에서 공개되어 있습니다.

Next: Training your bot →