ప్రారంభించండి

CDN / స్క్రిప్ట్ ట్యాగ్

CDN బిల్డ్ Reactను అంతర్గతంగా బండిల్ చేస్తుంది, కాబట్టి మీరు స్టాటిక్ సైట్‌లు, WordPress, Webflow లేదా HTML జోడించగల ఏ పేజీలోనైనా విడ్జెట్‌ను ఉపయోగించవచ్చు. npm, బండ్లర్ లేదా ఫ్రేమ్‌వర్క్ అవసరం లేదు.

CDN URLలు

<link rel="stylesheet" href="https://cdn.thunderphone.com/widget/latest/style.css" />
<script src="https://cdn.thunderphone.com/widget/latest/widget.js"></script>

<!-- Each stable release also publishes an immutable /widget/vX.Y.Z/ path
     matching the @thunderphone/widget npm version (v1.1.2 at the time of
     writing). If you pin, you own updating the URL for new releases. -->
<link rel="stylesheet" href="https://cdn.thunderphone.com/widget/v1.1.2/style.css" />
<script src="https://cdn.thunderphone.com/widget/v1.1.2/widget.js"></script>

ప్రాథమిక వినియోగం

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.thunderphone.com/widget/latest/style.css" />
</head>
<body>

  <div id="thunderphone"></div>

  <script src="https://cdn.thunderphone.com/widget/latest/widget.js"></script>
  <script>
    ThunderPhone.mount({
      element: '#thunderphone',
      publishableKey: 'pk_live_your_publishable_key',
    })
  </script>

</body>
</html>

విడ్జెట్ లక్ష్య ఎలిమెంట్‌లో మౌంట్ అవుతుంది మరియు వ్యూపోర్ట్ మూలలో స్థిర-స్థాన బార్‌గా రెండర్ అవుతుంది (డిఫాల్ట్ bottom-right, position ఎంపిక ద్వారా నియంత్రించబడుతుంది). మౌంట్ ఎలిమెంట్ కేవలం React రూట్ మాత్రమే -- పేజీలో దాని స్థానం విడ్జెట్ కనిపించే స్థానాన్ని ప్రభావితం చేయదు.

మౌంట్ ఎంపికలు

ThunderPhone.mount() React కాంపొనెంట్‌కు ఉన్న అదే ఎంపికలను, అలాగే element ప్రాపర్టీని అంగీకరిస్తుంది:

ఎంపికరకంఅవసరండిఫాల్ట్వివరణ
elementstring | HTMLElementఅవును--CSS సెలెక్టర్ (ఉదాహరణకు, '#thunderphone') లేదా DOM ఎలిమెంట్ రిఫరెన్స్.
publishableKeystringఅవును--ప్రచురించదగిన API కీ (pk_live_...). కీ యొక్క విడ్జెట్ కాన్ఫిగరేషన్ నుండి ఏజెంట్ స్వయంచాలకంగా నిర్ణయించబడుతుంది.
theme'light' | 'dark'కాదు'light'రంగు పథకం.
primaryColorstringకాదు'#000000' (లైట్) / '#ffffff' (డార్క్)యాక్సెంట్ రంగుగా ఉపయోగించే CSS రంగు స్ట్రింగ్.
titlestringకాదు'Voice assistant'విడ్జెట్ బార్‌లో ప్రదర్శించబడే టెక్స్ట్.
position'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'కాదు'bottom-right'స్థిర వ్యూపోర్ట్ స్థానం.
apiBasestringకాదు'https://api.thunderphone.com/v1'API బేస్ URL ఓవర్‌రైడ్.
languagestringకాదు--ప్రతి సెషన్‌కు భాష ఓవర్‌రైడ్ -- en, es లేదా fr-FR వంటి భాష కోడ్ లేదా లోకేల్. సెట్ చేయనప్పుడు, ఏజెంట్ కాన్ఫిగర్ చేసిన భాష వర్తిస్తుంది.
voicestringకాదు--ప్రతి సెషన్‌కు వాయిస్ ఓవర్‌రైడ్ -- maria వంటి వాయిస్ పేరు. సెట్ చేయనప్పుడు, ఏజెంట్ కాన్ఫిగర్ చేసిన వాయిస్ వర్తిస్తుంది.
contextstringకాదు--ఏజెంట్‌కు పంపబడే ప్రతి సెషన్‌కు సంబంధించిన వాస్తవిక పేజీ లేదా సైట్ సందర్భం. సర్వర్ వైపు 12,000 అక్షరాలకు కుదించబడుతుంది.
onConnect() => voidకాదు--వాయిస్ సెషన్ కనెక్ట్ అయినప్పుడు కాల్ చేయబడుతుంది.
onDisconnect() => voidకాదు--సెషన్ ముగిసినప్పుడు కాల్ చేయబడుతుంది.
onError(error) => voidకాదు--లోపాలపై కాల్ చేయబడుతుంది. లోపంలో error (కోడ్) మరియు message ఫీల్డ్‌లు ఉంటాయి.
ringtoneboolean | stringకాదుfalseకనెక్ట్ అవుతున్నప్పుడు రింగ్‌టోన్ ప్లే చేయండి. డిఫాల్ట్ రింగ్‌టోన్ కోసం true, లేదా అనుకూల ఆడియో కోసం URL స్ట్రింగ్.

శుభ్రపరచడం

ThunderPhone.mount() శుభ్రపరిచే మెథడ్‌లతో కూడిన విడ్జెట్ ఇన్‌స్టాన్స్‌ను తిరిగి ఇస్తుంది:

<script>
  var widget = ThunderPhone.mount({
    element: '#thunderphone',
    publishableKey: 'pk_live_your_publishable_key',
  })

  // Later, when you want to remove the widget:
  widget.unmount()

  // Or equivalently:
  widget.destroy()
</script>

unmount() మరియు destroy() రెండూ ఒకే పని చేస్తాయి -- అవి సక్రియ వాయిస్ సెషన్‌ను డిస్‌కనెక్ట్ చేసి, DOM నుండి విడ్జెట్‌ను తొలగిస్తాయి. మీ కోడ్‌లో ఏది మెరుగ్గా చదవబడుతుందో దానిని ఉపయోగించండి.

ఉదాహరణలు

అనుకూల రంగుతో డార్క్ థీమ్

<div id="thunderphone"></div>

<link rel="stylesheet" href="https://cdn.thunderphone.com/widget/latest/style.css" />
<script src="https://cdn.thunderphone.com/widget/latest/widget.js"></script>
<script>
  ThunderPhone.mount({
    element: '#thunderphone',
    publishableKey: 'pk_live_your_publishable_key',
    theme: 'dark',
    primaryColor: '#8b5cf6',
    title: 'Talk to our AI',
  })
</script>

అనుకూల స్థానం

<div id="thunderphone"></div>

<script src="https://cdn.thunderphone.com/widget/latest/widget.js"></script>
<script>
  ThunderPhone.mount({
    element: '#thunderphone',
    publishableKey: 'pk_live_your_publishable_key',
    position: 'bottom-left',
  })
</script>

ఈవెంట్ కాల్‌బ్యాక్‌లతో

<div id="thunderphone"></div>

<link rel="stylesheet" href="https://cdn.thunderphone.com/widget/latest/style.css" />
<script src="https://cdn.thunderphone.com/widget/latest/widget.js"></script>
<script>
  ThunderPhone.mount({
    element: '#thunderphone',
    publishableKey: 'pk_live_your_publishable_key',
    onConnect: function () {
      console.log('Call started')
    },
    onDisconnect: function () {
      console.log('Call ended')
    },
    onError: function (error) {
      console.error('Widget error:', error.error, error.message)
    },
  })
</script>

రింగ్‌టోన్‌తో

<div id="thunderphone"></div>

<link rel="stylesheet" href="https://cdn.thunderphone.com/widget/latest/style.css" />
<script src="https://cdn.thunderphone.com/widget/latest/widget.js"></script>
<script>
  ThunderPhone.mount({
    element: '#thunderphone',
    publishableKey: 'pk_live_your_publishable_key',
    ringtone: true, // or a custom URL: 'https://example.com/ringtone.mp3'
  })
</script>

DOM ఎలిమెంట్ రిఫరెన్స్‌ను ఉపయోగించడం

<div id="thunderphone"></div>

<script src="https://cdn.thunderphone.com/widget/latest/widget.js"></script>
<script>
  var container = document.getElementById('thunderphone')

  ThunderPhone.mount({
    element: container,
    publishableKey: 'pk_live_your_publishable_key',
  })
</script>

WordPress / CMS ఇంటిగ్రేషన్

దీన్ని కస్టమ్ HTML బ్లాక్‌కు లేదా మీ థీమ్ ఫుటర్‌కు జోడించండి:

<link rel="stylesheet" href="https://cdn.thunderphone.com/widget/latest/style.css" />
<script src="https://cdn.thunderphone.com/widget/latest/widget.js"></script>

<div id="thunderphone-widget"></div>
<script>
  ThunderPhone.mount({
    element: '#thunderphone-widget',
    publishableKey: 'pk_live_your_publishable_key',
  })
</script>

సమస్య పరిష్కారం

విడ్జెట్ కనిపించడం లేదు

CSS మరియు JS ఫైల్‌లు రెండూ లోడ్ అయ్యాయని నిర్ధారించుకోండి. నెట్‌వర్క్ లోపాల కోసం బ్రౌజర్ కన్సోల్‌ను తనిఖీ చేయండి. ThunderPhone.mount()ను కాల్ చేయడానికి ముందు లక్ష్య ఎలిమెంట్ DOMలో ఉందని ధృవీకరించండి.

ThunderPhone నిర్వచించబడలేదు

స్క్రిప్ట్ ఇంకా లోడ్ కాలేదు. widget.js కోసం ఉన్న <script> ట్యాగ్ మీ మౌంట్ కాల్‌కు ముందు కనిపిస్తోందని నిర్ధారించుకోండి లేదా మౌంట్ కాల్‌ను DOMContentLoaded లిసనర్‌లో చుట్టండి.

డొమైన్ అనుమతించబడలేదు లోపం

app.thunderphone.comలోని డెవలపర్లు సెట్టింగ్‌లలో అనుమతించబడిన డొమైన్‌ల జాబితాకు మీ డొమైన్‌ను జోడించండి. localhost ఎల్లప్పుడూ అనుమతించబడుతుందని గుర్తుంచుకోండి.

తదుపరి దశలు

స్టైలింగ్

CSS కస్టమ్ ప్రాపర్టీలతో విడ్జెట్ రూపాన్ని అనుకూలీకరించండి.

React కాంపొనెంట్

React ఉపయోగిస్తున్నారా? కాంపొనెంట్ ఇంటిగ్రేషన్ మరింత సులభం.