React Native, Flutter และ Ionic

ทั้งสามช่องทางใช้หน้าแชทที่โฮสต์ไว้ที่เดียวกัน ดังนั้นไม่ว่าคุณจะสอนอะไรไป ลูกค้าก็จะได้รับข้อมูลนั้นผ่านทุกช่องทางพร้อมกัน

React Native

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

react-native-webview เป็น peer dependency ไม่ใช่แบบรวมชุด (bundled) เนื่องจาก React Native ไม่มี web view ในตัว การรวม (vendor) เข้าไปจะทำให้เกิดปัญหากับเวอร์ชันที่คุณมีอยู่ในแอปอยู่แล้ว

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 เป็นเว็บวิวอยู่แล้ว แท็กสคริปต์แบบปกติจึงทำงานได้เหมือนบนเว็บไซต์ และใช้โค้ดน้อยกว่าการใช้ Wrapper ใดๆ:

<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 เนื่องจากเป็น web view ดังนั้นการใช้ script tag จึงใช้งานได้ โดยไม่ต้องมีแพ็กเกจแยกต่างหาก

สิ่งที่เหมือนกันทั้งหมด

• UI แชทเดียว เปลี่ยนแปลงในแดชบอร์ดแล้วแสดงผลทุกที่ทันทีโดยไม่ต้องปล่อยอัปเดตแอป
• ลิงก์จะเปิดภายนอกหน้าต่างแชท ไม่มีการแทนที่หน้าต่างบทสนทนา
• ไม่มีการวิเคราะห์ข้อมูล ไม่มีตัวระบุอุปกรณ์ และไม่มีการพึ่งพาบุคคลที่สามนอกเหนือจากเว็บวิวที่แต่ละแพลตฟอร์มต้องการ
• ออนไลน์เท่านั้น — แชทเป็นหน้าเว็บที่โฮสต์ไว้

ซอร์สโค้ดสำหรับทุกแพ็กเกจเป็นแบบสาธารณะที่ github.com/KeydaAI/keyda-business-sdks