Open in
ఎంబెడ్ చేయగల వాయిస్ విడ్జెట్
కొన్ని కోడ్ లైన్లతో ఏ వెబ్సైట్కైనా వాయిస్ AI ఏజెంట్ను జోడించండి
ThunderPhone ఎంబెడబుల్ వాయిస్ విడ్జెట్ మీ వెబ్సైట్ సందర్శకులు బ్రౌజర్ నుంచే నేరుగా AI ఏజెంట్తో మాట్లాడేలా చేస్తుంది. ఫోన్ కాల్ అవసరం లేదు -- వినియోగదారులు ఒక బటన్ను క్లిక్ చేసి ThunderPhone ఆధారిత రియల్టైమ్ వాయిస్ సంభాషణను ప్రారంభిస్తారు.
విడ్జెట్ లైట్ మరియు డార్క్ థీమ్లకు అనుగుణంగా మారే గ్లాస్మార్ఫిక్ బార్గా రెండర్ అవుతుంది; ఇందులో అనుకూలీకరించదగిన యాక్సెంట్ రంగులు మరియు స్థాన నిర్ధారణ ఉంటాయి. ఇది @thunderphone/widget npm ప్యాకేజీగా పంపిణీ చేయబడుతుంది మరియు బండ్లర్ లేని పరిసరాల కోసం CDN ద్వారా కూడా అందుబాటులో ఉంటుంది.
ముందస్తు అవసరాలు
విడ్జెట్ను ఎంబెడ్ చేయడానికి ముందు, ThunderPhone డ్యాష్బోర్డ్లో ఈ మూడు దశలను పూర్తి చేయండి:
- ప్రచురించదగిన API కీని సృష్టించండి
డ్యాష్బోర్డ్ సెట్టింగ్లలోని డెవలపర్లు విభాగానికి వెళ్లి ప్రచురించదగిన కీని సృష్టించండి. ప్రచురించదగిన కీలు
pk_live_తో ప్రారంభమవుతాయి మరియు క్లయింట్-సైడ్ కోడ్లో చేర్చడం సురక్షితం. - అనుమతించబడిన డొమైన్లను కాన్ఫిగర్ చేయండి
అదే డెవలపర్లు సెట్టింగ్లలో, విడ్జెట్ను ఎంబెడ్ చేసే డొమైన్లను జోడించండి. డెవలప్మెంట్ కోసం
localhostఎల్లప్పుడూ అనుమతించబడుతుంది. వైల్డ్కార్డ్లకు మద్దతు ఉంది (ఉదాహరణకు,*.example.com). - వెబ్ విడ్జెట్ను సృష్టించండి
డ్యాష్బోర్డ్లోని వెబ్ విడ్జెట్లు విభాగానికి వెళ్లి ఒక విడ్జెట్ను సృష్టించండి. మీరు అందుబాటులో ఉంచాలనుకునే ఏజెంట్ను మరియు ఉపయోగించాల్సిన ప్రచురించదగిన కీని ఎంచుకోండి. మీ ప్రచురించదగిన కీ కాన్ఫిగరేషన్ నుంచి ఏజెంట్ స్వయంచాలకంగా నిర్ణయించబడుతుంది.
త్వరిత ప్రారంభం
ప్యాకేజీని ఇన్స్టాల్ చేయండి:
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 ఏజెంట్కు కనెక్ట్ చేసే గ్లాస్మార్ఫిక్ కాల్ బార్ను చూస్తారు.
అనుకూలీకరణ
విడ్జెట్లో నాలుగు రూప ప్రాప్స్ ఉన్నాయి:
| ప్రాప్ | డిఫాల్ట్ | వివరణ |
|---|---|---|
theme | 'light' | తెలుపు గ్లాస్ కోసం 'light', డార్క్ గ్లాస్ కోసం 'dark' |
primaryColor | '#000000' (లైట్) / '#ffffff' (డార్క్) | ప్రారంభ బటన్, వేవ్ఫార్మ్ మరియు కనెక్ట్ అవుతున్న సూచిక కోసం యాక్సెంట్ రంగు |
title | 'Voice assistant' | విడ్జెట్లో ప్రదర్శించబడే టెక్స్ట్ |
position | 'bottom-right' | వ్యూపోర్ట్ మూల: 'bottom-right', 'bottom-left', 'top-right', 'top-left' |
<ThunderPhoneWidget
publishableKey="pk_live_your_publishable_key"
/><ThunderPhoneWidget
publishableKey="pk_live_your_publishable_key"
theme="dark"
primaryColor="#8b5cf6"
title="Ask our AI"
/>మరో మూడు ప్రాప్స్ రూపానికి బదులుగా సెషన్ను అనుకూలీకరిస్తాయి -- కాల్ ప్రారంభమైనప్పుడు అవన్నీ సెషన్ అభ్యర్థనకు ఫార్వర్డ్ చేయబడతాయి:
| ప్రాప్ | వివరణ |
|---|---|
language | ప్రతి సెషన్కు భాష ఓవర్రైడ్ -- en, es, లేదా fr-FR వంటి కోడ్ లేదా లోకేల్ |
voice | ప్రతి సెషన్కు వాయిస్ ఓవర్రైడ్ -- maria వంటి వాయిస్ పేరు |
context | ఏజెంట్కు పంపబడే వాస్తవ పేజీ లేదా సైట్ సందర్భం (సర్వర్-సైడ్లో 12,000 అక్షరాలకు కుదించబడుతుంది) |
పూర్తి ప్రాప్స్ పట్టిక కోసం React కాంపొనెంట్ రిఫరెన్స్ను చూడండి.
పూర్తిగా అనుకూల UI కోసం, మీరు మీ స్వంత ఇంటర్ఫేస్ను రూపొందిస్తుండగా వాయిస్ సెషన్ను నిర్వహించడానికి హెడ్లెస్ హుక్ను ఉపయోగించండి. ఆడియో-ప్రతిస్పందన విజువలైజేషన్లను రూపొందించడానికి హుక్ రియల్టైమ్ ఆడియో స్థాయిలను అందిస్తుంది.
ఇంటిగ్రేషన్ ఎంపికలు
మీ స్టాక్కు సరిపోయే ఇంటిగ్రేషన్ విధానాన్ని ఎంచుకోండి:
అంతర్నిర్మిత కాల్ నియంత్రణలు మరియు స్థితి ప్రదర్శనతో ముందే రూపొందించిన UI కాంపొనెంట్. ఇంపోర్ట్ చేయండి, propsను పంపండి, పూర్తయింది.
UIపై పూర్తి నియంత్రణ. మీరు మీ స్వంత ఇంటర్ఫేస్ను రూపొందిస్తుండగా useThunderPhone హుక్ వాయిస్ సెషన్ను నిర్వహిస్తుంది.
బండ్లర్ అవసరం లేదు. స్టాటిక్ సైట్లు, WordPress మరియు ఇతర React కాని పరిసరాల కోసం స్క్రిప్ట్ ట్యాగ్ ద్వారా విడ్జెట్ను లోడ్ చేయండి.
స్టైలింగ్
విడ్జెట్లో theme prop ద్వారా నియంత్రించబడే అంతర్నిర్మిత లైట్ మరియు డార్క్ థీమ్లు, అలాగే primaryColor prop ద్వారా నియంత్రించబడే యాక్సెంట్ రంగు ఉంటాయి. మరింత లోతైన అనుకూలీకరణ కోసం, మీరు CSS కస్టమ్ ప్రాపర్టీలు మరియు క్లాసులను ఓవర్రైడ్ చేయవచ్చు. వివరాల కోసం స్టైలింగ్ గైడ్ చూడండి.