CDN / સ્ક્રિપ્ટ ટૅગ

CDN બિલ્ડ React ને આંતરિક રીતે બંડલ કરે છે, તેથી તમે વિજેટનો ઉપયોગ સ્ટેટિક સાઇટ્સ, WordPress, Webflow અથવા એવી કોઈપણ પેજ પર કરી શકો છો જ્યાં તમે HTML ઉમેરી શકો. npm, બંડલર કે ફ્રેમવર્ક જરૂરી નથી.

CDN URLs

<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 પ્રોપર્ટી:

વિકલ્પ	પ્રકાર	જરૂરી	ડિફૉલ્ટ	વર્ણન
`element`	`string \| HTMLElement`	હા	--	CSS સિલેક્ટર (દા.ત., `'#thunderphone'`) અથવા DOM એલિમેન્ટ રેફરન્સ.
`publishableKey`	`string`	હા	--	પ્રકાશિત કરી શકાય તેવી API કી (`pk_live_...`). કીની વિજેટ ગોઠવણીમાંથી એજન્ટ આપમેળે નક્કી થાય છે.
`theme`	`'light' \| 'dark'`	ના	`'light'`	રંગ યોજના.
`primaryColor`	`string`	ના	`'#000000'` (લાઇટ) / `'#ffffff'` (ડાર્ક)	એક્સેન્ટ રંગ તરીકે ઉપયોગમાં લેવાતી CSS રંગ સ્ટ્રિંગ.
`title`	`string`	ના	`'Voice assistant'`	વિજેટ બારમાં દેખાતો ટેક્સ્ટ.
`position`	`'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left'`	ના	`'bottom-right'`	નિશ્ચિત વ્યૂપોર્ટ સ્થાન.
`apiBase`	`string`	ના	`'https://api.thunderphone.com/v1'`	API બેઝ URL ઓવરરાઇડ.
`language`	`string`	ના	--	પ્રતિ-સેશન ભાષા ઓવરરાઇડ -- `en`, `es` અથવા `fr-FR` જેવા ભાષા કોડ અથવા લોકેલ. સેટ ન હોય ત્યારે એજન્ટની ગોઠવેલી ભાષા લાગુ પડે છે.
`voice`	`string`	ના	--	પ્રતિ-સેશન વૉઇસ ઓવરરાઇડ -- `maria` જેવા વૉઇસ નામ. સેટ ન હોય ત્યારે એજન્ટનો ગોઠવેલો વૉઇસ લાગુ પડે છે.
`context`	`string`	ના	--	એજન્ટને મોકલવામાં આવતો પ્રતિ-સેશન તથ્યાત્મક પેજ અથવા સાઇટ સંદર્ભ. સર્વર-સાઇડ પર 12,000 અક્ષરો સુધી ટૂંકો કરવામાં આવે છે.
`onConnect`	`() => void`	ના	--	વૉઇસ સેશન કનેક્ટ થાય ત્યારે કૉલ થાય છે.
`onDisconnect`	`() => void`	ના	--	સેશન સમાપ્ત થાય ત્યારે કૉલ થાય છે.
`onError`	`(error) => void`	ના	--	ભૂલો પર કૉલ થાય છે. એરરમાં `error` (કોડ) અને `message` ફીલ્ડ હોય છે.
`ringtone`	`boolean \| 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 વાપરી રહ્યા છો? કોમ્પોનેન્ટ ઇન્ટિગ્રેશન વધુ સરળ છે.