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>

ഡാഷ്ബോർഡിന്റെ എംബെഡ് സ്നിപ്പറ്റ് ജനറേറ്റർ സൃഷ്ടിക്കുന്നത് latest URL-കളാണ്. അവ 5 മിനിറ്റ് കാഷ് ചെയ്യപ്പെടുകയും പുതിയ സ്റ്റേബിൾ റിലീസുകൾ സ്വയമേവ ഉൾപ്പെടുത്തുകയും ചെയ്യുന്നു. പിൻ ചെയ്ത /widget/vX.Y.Z/ പാതകൾ മാറ്റമില്ലാത്തതും ദീർഘകാലത്തേക്ക് കാഷ് ചെയ്യപ്പെടുന്നതുമാണ് -- നിങ്ങൾ പിൻ ചെയ്യുകയാണെങ്കിൽ, വികസിപ്പിക്കുന്ന @thunderphone/widget npm റിലീസുമായി പതിപ്പ് പൊരുത്തപ്പെടുത്തുക.

അടിസ്ഥാന ഉപയോഗം

<!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 ഉപയോഗിക്കുന്നുണ്ടോ? ഘടക സംയോജനം കൂടുതൽ ലളിതമാണ്.