എംബെഡ് ചെയ്യാവുന്ന വോയ്‌സ് വിജറ്റ്

കുറച്ച് വരി കോഡ് ഉപയോഗിച്ച് ഏത് വെബ്സൈറ്റിലേക്കും ഒരു വോയ്‌സ് AI ഏജന്റിനെ ചേർക്കുക

ThunderPhone എംബെഡ്ഡുചെയ്യാവുന്ന വോയ്‌സ് വിജറ്റ് നിങ്ങളുടെ വെബ്സൈറ്റ് സന്ദർശകർക്ക് ബ്രൗസറിൽ നിന്ന് നേരിട്ട് ഒരു AI ഏജന്റിനോട് സംസാരിക്കാൻ അനുവദിക്കുന്നു. ഫോൺ കോൾ ആവശ്യമില്ല -- ഉപയോക്താക്കൾ ഒരു ബട്ടൺ ക്ലിക്ക് ചെയ്ത് ThunderPhone നൽകുന്ന തത്സമയ വോയ്‌സ് സംഭാഷണം ആരംഭിക്കുന്നു.

ഇഷ്ടാനുസൃതമാക്കാവുന്ന ആക്സന്റ് നിറങ്ങളും സ്ഥാനനിർണയവും സഹിതം, ലൈറ്റ്, ഡാർക്ക് തീമുകൾക്ക് അനുയോജ്യമായി മാറുന്ന ഒരു ഗ്ലാസ്മോർഫിക് ബാറായാണ് വിജറ്റ് റെൻഡർ ചെയ്യുന്നത്. ഇത് @thunderphone/widget npm പാക്കേജായി വിതരണം ചെയ്യപ്പെടുന്നു, കൂടാതെ ബണ്ട്ലർ ഇല്ലാത്ത പരിതസ്ഥിതികൾക്കായി CDN വഴിയും ലഭ്യമാണ്.

മുൻവ്യവസ്ഥകൾ#

വിജറ്റ് എംബെഡ് ചെയ്യുന്നതിന് മുമ്പ്, ThunderPhone ഡാഷ്ബോർഡിൽ ഈ മൂന്ന് ഘട്ടങ്ങൾ പൂർത്തിയാക്കുക:

1. ഒരു വെബ് വിജറ്റ് സൃഷ്ടിക്കുക

   ഡാഷ്ബോർഡിലെ വെബ് വിജറ്റുകൾ എന്നതിലേക്ക് പോയി ഒരു വിജറ്റ് സൃഷ്ടിക്കുക. നിങ്ങൾ പ്രദർശിപ്പിക്കാൻ ആഗ്രഹിക്കുന്ന ഏജന്റിനെ തിരഞ്ഞെടുക്കുക. ഓരോ വിജറ്റിനും അതിന്റേതായ പ്രസിദ്ധീകരിക്കാവുന്ന കീ (pk_live_...) ഉണ്ട്; ഇത് ക്ലയന്റ്-സൈഡ് കോഡിൽ ഉൾപ്പെടുത്തുന്നത് സുരക്ഷിതമാണ്. കീ ഉപയോഗിച്ച് ഏജന്റിനെ നിർണയിക്കുന്നു.

2. അനുവദനീയ ഡൊമെയ്‌നുകൾ ക്രമീകരിക്കുക

   അതേ വിജറ്റിൽ, അത് എംബെഡ് ചെയ്യുന്ന ഡൊമെയ്‌നുകൾ ചേർക്കുക. വൈൽഡ്കാർഡുകൾ പിന്തുണയ്ക്കുന്നു (ഉദാഹരണത്തിന്, *.example.com). ആരെങ്കിലും നിങ്ങളുടെ കീ മറ്റൊരു സൈറ്റിലേക്ക് പകർത്തുമ്പോൾ വിജറ്റ് പ്രവർത്തിക്കുന്നത് ഈ പട്ടിക തടയും; ബ്രൗസറിന് പുറത്തുള്ള ഒരു സ്ക്രിപ്റ്റിന് ഏത് Origin ഹെഡറും അയയ്ക്കാനാകുന്നതിനാൽ ഇത് പ്രാമാണീകരണമല്ല. പ്രൊഡക്ഷനിൽ localhost സ്വയമേവ അനുവദനീയമല്ല: പ്രൊഡക്ഷൻ API-ക്കെതിരെ പ്രാദേശികമായി പരിശോധിക്കാൻ ഇത് പട്ടികയിൽ ചേർക്കുക.

3. ബ്രൗസർ ഓവർറൈഡുകൾ തിരഞ്ഞെടുക്കുക

   നിങ്ങളുടെ പേജ് language, voice, അല്ലെങ്കിൽ context സജ്ജീകരിക്കുന്നുവെങ്കിൽ, ബ്രൗസർ ഓവർറൈഡുകൾ എന്നതിൽ ഓരോന്നും പ്രവർത്തനക്ഷമമാക്കുക. പുതിയ വിജറ്റുകൾ ഒന്നും സ്വീകരിക്കില്ല; പ്രവർത്തനരഹിതമായ ഒരു ക്രമീകരണം ഉൾക്കൊള്ളുന്ന സെഷൻ അഭ്യർത്ഥന 400 override_not_allowed ഉപയോഗിച്ച് പരാജയപ്പെടും. ബ്രൗസർ ഓവർറൈഡുകൾ കാണുക.

ദ്രുത ആരംഭം#

പാക്കേജ് ഇൻസ്റ്റാൾ ചെയ്യുക:

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 ഏജന്റുമായി അവരെ ബന്ധിപ്പിക്കുന്ന ഗ്ലാസ്മോർഫിക് കോൾ ബാർ നിങ്ങളുടെ ഉപയോക്താക്കൾ കാണും.

ഇഷ്ടാനുസൃതമാക്കൽ#

വിജറ്റിന് നാല് രൂപഭാവ പ്രോപ്-കൾ ഉണ്ട്:

<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
/>

<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
  theme="dark"
  primaryColor="#8b5cf6"
  title="Ask our AI"
/>

രൂപഭാവത്തേക്കാൾ സെഷൻ ഇഷ്ടാനുസൃതമാക്കുന്നത് മൂന്ന് അധിക props ആണ് -- കോൾ ആരംഭിക്കുമ്പോൾ ഇവയെല്ലാം സെഷൻ അഭ്യർത്ഥനയിലേക്ക് കൈമാറപ്പെടും. ബ്രൗസർ ഓവർറൈഡുകൾ പ്രകാരം widget-ന്റെ publishable key ഇത് അനുവദിക്കുമ്പോൾ മാത്രമേ ഓരോന്നും പ്രവർത്തിക്കൂ; അല്ലാത്തപക്ഷം സെഷൻ അഭ്യർത്ഥന 400 override_not_allowed ഉപയോഗിച്ച് പരാജയപ്പെടും:

പൂർണ്ണ പ്രോപ് പട്ടികയ്ക്കായി React കോംപോണന്റ് റഫറൻസ് കാണുക.

പൂർണ്ണമായും ഇഷ്ടാനുസൃതമായ UI-ക്കായി, നിങ്ങളുടെ സ്വന്തം ഇന്റർഫേസ് നിർമിക്കുമ്പോൾ വോയ്‌സ് സെഷൻ നിയന്ത്രിക്കാൻ ഹെഡ്‌ലെസ് hook ഉപയോഗിക്കുക. ഓഡിയോ-പ്രതികരണ ദൃശ്യവത്കരണങ്ങൾ നിർമിക്കുന്നതിനായി hook തത്സമയ ഓഡിയോ നിലകൾ ലഭ്യമാക്കുന്നു.

ഓരോ widget സംഭാഷണവും ഒരു കോളാണ്. ഇത് നിങ്ങളുടെ ഓർഗനൈസേഷന്റെ ഒരേസമയം നടത്താവുന്ന കോളുകളുടെ പരിധിയിലേക്ക് കണക്കാക്കപ്പെടുന്നു (സ്ഥിരസ്ഥിതിയായി പുരോഗതിയിലുള്ള 20 കോളുകൾ, ഫോണിലും മറ്റ് കോളുകളിലും പങ്കിടുന്നത്) കൂടാതെ 25 സജീവ സെഷനുകളുടെ widget പരിധിയിലേക്കും (അല്ലെങ്കിൽ അതിലും കൂടുതലാണെങ്കിൽ, നിങ്ങളുടെ ഒരേസമയം നടത്താവുന്ന കോളുകളുടെ പരിധി). ഏതെങ്കിലും പരിധിയിലെത്തിയാൽ, ഒരു കോൾ അവസാനിക്കുന്നതുവരെ പുതിയ സംഭാഷണം ആരംഭിക്കാനാവില്ല.

ഇന്റഗ്രേഷൻ ഓപ്ഷനുകൾ#

നിങ്ങളുടെ സ്റ്റാക്കിന് അനുയോജ്യമായ ഇന്റഗ്രേഷൻ രീതി തിരഞ്ഞെടുക്കുക:

സ്റ്റൈലിംഗ്#

theme prop നിയന്ത്രിക്കുന്ന ബിൽറ്റ്-ഇൻ ലൈറ്റ്, ഡാർക്ക് തീമുകളും primaryColor prop നിയന്ത്രിക്കുന്ന ആക്സെന്റ് നിറവും വിഡ്ജറ്റിൽ ഉൾപ്പെടുന്നു. കൂടുതൽ ആഴത്തിലുള്ള കസ്റ്റമൈസേഷനായി, CSS കസ്റ്റം പ്രോപ്പർട്ടികളും ക്ലാസുകളും ഓവർറൈഡ് ചെയ്യാം. വിശദാംശങ്ങൾക്ക് സ്റ്റൈലിംഗ് ഗൈഡ് കാണുക.