உட்பொதிக்கக்கூடிய குரல் விட்ஜெட்

சில வரி குறியீட்டுடன் எந்த வலைத்தளத்திலும் ஒரு குரல் AI ஏஜென்ட்டைச் சேர்க்கவும்

ThunderPhone உட்பொதிக்கக்கூடிய குரல் விட்ஜெட், உங்கள் வலைத்தள பார்வையாளர்கள் உலாவியிலிருந்தே நேரடியாக ஒரு AI ஏஜென்ட்டுடன் பேச அனுமதிக்கிறது. தொலைபேசி அழைப்பு தேவையில்லை -- பயனர்கள் ஒரு பொத்தானைக் கிளிக் செய்து, ThunderPhone வழங்கும் நிகழ்நேர குரல் உரையாடலைத் தொடங்குவார்கள்.

இந்த விட்ஜெட், தனிப்பயனாக்கக்கூடிய வலியுறுத்தல் வண்ணங்கள் மற்றும் நிலைப்பாட்டுடன், ஒளி மற்றும் இருண்ட தீம்களுக்கு ஏற்ப மாறும் கண்ணாடி தோற்றப் பட்டையாகக் காட்டப்படும். இது @thunderphone/widget npm தொகுப்பாக விநியோகிக்கப்படுகிறது; பண்ட்லர் இல்லாத சூழல்களுக்காக CDN மூலமும் கிடைக்கிறது.

முன்தேவைகள்#

விட்ஜெட்டை உட்பொதிப்பதற்கு முன், ThunderPhone டாஷ்போர்டில் இந்த மூன்று படிகளை முடிக்கவும்:

1. வெப் விட்ஜெட்டை உருவாக்கவும்

   டாஷ்போர்டில் உள்ள வெப் விட்ஜெட்டுகள் பகுதிக்குச் சென்று ஒரு விட்ஜெட்டை உருவாக்கவும். நீங்கள் வெளிப்படுத்த விரும்பும் ஏஜென்ட்டைத் தேர்ந்தெடுக்கவும். ஒவ்வொரு விட்ஜெட்டுக்கும் தனித்தனி வெளியிடத்தக்க விசை (pk_live_...) உள்ளது; இதை கிளையன்ட்-பக்கக் குறியீட்டில் சேர்ப்பது பாதுகாப்பானது. ஏஜென்ட் இந்த விசையிலிருந்து தீர்மானிக்கப்படுகிறது.

2. அனுமதிக்கப்பட்ட டொமைன்களை உள்ளமைக்கவும்

   அதே விட்ஜெட்டில், அது உட்பொதிக்கப்படும் டொமைன்களைச் சேர்க்கவும். வைல்ட்கார்ட்கள் ஆதரிக்கப்படுகின்றன (எ.கா., *.example.com). யாராவது உங்கள் விசையை வேறு தளத்தில் நகலெடுத்தாலும் விட்ஜெட் செயல்படுவதை இந்தப் பட்டியல் தடுக்கிறது; உலாவிக்கு வெளியே உள்ள ஒரு ஸ்கிரிப்ட் எந்த Origin தலைப்பையும் அனுப்ப முடியும் என்பதால், இது அங்கீகாரம் அல்ல. தயாரிப்பு சூழலில் localhost தானாக அனுமதிக்கப்படாது: தயாரிப்பு API-க்கு எதிராக உள்ளூரில் சோதிக்க அதை பட்டியலில் சேர்க்கவும்.

3. உலாவி மேலெழுதல்களைத் தேர்ந்தெடுக்கவும்

   உங்கள் பக்கம் language, voice, அல்லது context அமைத்தால், ஒவ்வொன்றையும் உலாவி மேலெழுதல்கள் என்பதன் கீழ் இயக்கவும். புதிய விட்ஜெட்டுகள் எதையும் ஏற்காது; முடக்கப்பட்ட அமைப்பைக் கொண்ட அமர்வு கோரிக்கை 400 override_not_allowed உடன் தோல்வியடையும். உலாவி மேலெழுதல்கள் என்பதைப் பார்க்கவும்.

விரைவான தொடக்கம்#

தொகுப்பை நிறுவவும்:

npm install @thunderphone/widget

உங்கள் செயலியில் விட்ஜெட்டைச் சேர்க்கவும்:

import { ThunderPhoneWidget } from '@thunderphone/widget'
import '@thunderphone/widget/style.css'
 
function App() {
  return (
    <ThunderPhoneWidget
      publishableKey="pk_live_your_publishable_key"
      theme="dark"
      primaryColor="#8b5cf6"
    />
  )
}

அவ்வளவுதான். உங்கள் பயனர்கள், ஒரே கிளிக்கில் உங்கள் AI ஏஜென்ட்டுடன் இணைக்கும் கண்ணாடி தோற்ற அழைப்புப் பட்டையைக் காண்பார்கள்.

தனிப்பயனாக்கம்#

விட்ஜெட்டில் தோற்றத்திற்கான நான்கு props உள்ளன:

<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
/>

<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
  theme="dark"
  primaryColor="#8b5cf6"
  title="Ask our AI"
/>

மேலும் மூன்று prop-கள் தோற்றத்தை அல்லாமல் செஷனைத் தனிப்பயனாக்குகின்றன -- அழைப்பு தொடங்கும்போது அனைத்தும் செஷன் கோரிக்கைக்கு அனுப்பப்படும். விட்ஜெட்டின் வெளியிடக்கூடிய விசை உலாவி மேலெழுதல்கள் கீழ் அனுமதித்தால் மட்டுமே ஒவ்வொன்றும் செயல்படும்; இல்லையெனில் செஷன் கோரிக்கை 400 override_not_allowed உடன் தோல்வியடையும்:

முழுமையான props அட்டவணைக்கு React கூறு குறிப்பைக் காணவும்.

முழுமையாகத் தனிப்பயனாக்கப்பட்ட UIக்கு, உங்கள் சொந்த இடைமுகத்தை உருவாக்கும் போது குரல் அமர்வை நிர்வகிக்க headless hook ஐப் பயன்படுத்தவும். ஆடியோ-எதிர்வினை காட்சிப்படுத்தல்களை உருவாக்க, இந்த hook நிகழ்நேர ஆடியோ நிலைகளை வெளிப்படுத்துகிறது.

ஒவ்வொரு விட்ஜெட் உரையாடலும் ஒரு அழைப்பு ஆகும். இது உங்கள் நிறுவனத்தின் ஒரேநேர அழைப்பு வரம்பில் கணக்கிடப்படும் (இயல்பாக நடைபெற்று கொண்டிருக்கும் 20 அழைப்புகள்; தொலைபேசி மற்றும் பிற அழைப்புகளுடன் பகிரப்படும்) மற்றும் 25 செயலில் உள்ள செஷன்களுக்கான விட்ஜெட் வரம்பிலும் கணக்கிடப்படும் (அல்லது உங்கள் ஒரேநேர அழைப்பு வரம்பு அதிகமாக இருந்தால் அது). எந்த வரம்பை அடைந்தாலும், ஒரு அழைப்பு முடியும் வரை புதிய உரையாடலைத் தொடங்க முடியாது.

ஒருங்கிணைப்பு விருப்பங்கள்#

உங்கள் ஸ்டாக்கிற்கு பொருந்தும் ஒருங்கிணைப்பு முறையைத் தேர்ந்தெடுக்கவும்:

ஸ்டைலிங்#

இந்த விட்ஜெட்டில் theme prop மூலம் கட்டுப்படுத்தப்படும் உள்ளமைக்கப்பட்ட லைட் மற்றும் டார்க் தீம்களும், primaryColor prop மூலம் கட்டுப்படுத்தப்படும் accent நிறமும் உள்ளன. மேலும் ஆழமான தனிப்பயனாக்கத்திற்கு, CSS தனிப்பயன் பண்புகளையும் கிளாஸ்களையும் மேலெழுதலாம். விவரங்களுக்கு ஸ்டைலிங் வழிகாட்டியை பார்க்கவும்.