ఎంబెడ్ చేయగల వాయిస్ విడ్జెట్

కొన్ని కోడ్ లైన్లతో ఏ వెబ్‌సైట్‌కైనా వాయిస్ 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 ఏజెంట్‌కు కనెక్ట్ చేసే గ్లాస్‌మార్ఫిక్ కాల్ బార్‌ను చూస్తారు.

అనుకూలీకరణ#

విడ్జెట్‌లో నాలుగు రూప ప్రాప్స్ ఉన్నాయి:

<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
/>

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

మరో మూడు props రూపాన్ని కాకుండా సెషన్‌ను అనుకూలీకరిస్తాయి -- కాల్ ప్రారంభమైనప్పుడు అవన్నీ సెషన్ అభ్యర్థనకు ఫార్వర్డ్ చేయబడతాయి. విడ్జెట్ యొక్క publishable key బ్రౌజర్ ఓవర్‌రైడ్‌లు కింద అనుమతించినప్పుడు మాత్రమే ప్రతి ఒక్కటి పనిచేస్తుంది; లేకపోతే సెషన్ అభ్యర్థన 400 override_not_allowedతో విఫలమవుతుంది:

పూర్తి ప్రాప్స్ పట్టిక కోసం React కాంపొనెంట్ రిఫరెన్స్ను చూడండి.

పూర్తిగా అనుకూల UI కోసం, మీరు మీ స్వంత ఇంటర్‌ఫేస్‌ను రూపొందిస్తుండగా వాయిస్ సెషన్‌ను నిర్వహించడానికి హెడ్‌లెస్ హుక్ను ఉపయోగించండి. ఆడియో-ప్రతిస్పందన విజువలైజేషన్‌లను రూపొందించడానికి హుక్ రియల్‌టైమ్ ఆడియో స్థాయిలను అందిస్తుంది.

ప్రతి విడ్జెట్ సంభాషణ ఒక కాల్. ఇది మీ సంస్థ యొక్క ఏకకాల కాల్ పరిమితిలో లెక్కించబడుతుంది (డిఫాల్ట్‌గా 20 కాల్‌లు ప్రోగ్రెస్‌లో ఉంటాయి, ఫోన్ మరియు ఇతర కాల్‌లతో భాగస్వామ్యం చేయబడతాయి) మరియు విడ్జెట్‌కు 25 సక్రియ సెషన్‌ల పరిమితి ఉంటుంది (లేదా మీ ఏకకాల కాల్ పరిమితి ఎక్కువగా ఉంటే అది). ఏ పరిమితి చేరుకున్నా, ఒక కాల్ ముగిసే వరకు కొత్త సంభాషణ ప్రారంభం కాదు.

ఇంటిగ్రేషన్ ఎంపికలు#

మీ స్టాక్‌కు సరిపోయే ఇంటిగ్రేషన్ విధానాన్ని ఎంచుకోండి:

స్టైలింగ్#

విడ్జెట్‌లో theme prop ద్వారా నియంత్రించబడే అంతర్నిర్మిత లైట్ మరియు డార్క్ థీమ్‌లు, అలాగే primaryColor prop ద్వారా నియంత్రించబడే యాక్సెంట్ రంగు ఉంటాయి. మరింత లోతైన అనుకూలీకరణ కోసం, మీరు CSS కస్టమ్ ప్రాపర్టీలు మరియు క్లాసులను ఓవర్‌రైడ్ చేయవచ్చు. వివరాల కోసం స్టైలింగ్ గైడ్ చూడండి.