Open in

CDN / സ്ക്രിപ്റ്റ് ടാഗ്

ബണ്ട്ലർ ഇല്ലാതെ ഏത് വെബ്‌സൈറ്റിലും ThunderPhone വോയ്‌സ് വിജറ്റ് ചേർക്കുക

CDN ബിൽഡിൽ React ആന്തരികമായി ബണ്ടിൽ ചെയ്തിരിക്കുന്നു, അതിനാൽ സ്റ്റാറ്റിക് സൈറ്റുകൾ, WordPress, Webflow, അല്ലെങ്കിൽ HTML ചേർക്കാനാകുന്ന ഏത് പേജിലും നിങ്ങൾക്ക് വിഡ്ജറ്റ് ഉപയോഗിക്കാം. npm, ബണ്ട്ലർ, ഫ്രെയിംവർക്ക് എന്നിവ ആവശ്യമില്ല.

CDN URL-കൾ

Latest (recommended)

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

Pinned version

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