એમ્બેડ કરી શકાય તેવું વૉઇસ વિજેટ

થોડા કોડ લાઇન્સ સાથે કોઈપણ વેબસાઇટમાં વૉઇસ 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"
/>

વધારાના ત્રણ prop દેખાવને બદલે સેશનને કસ્ટમાઇઝ કરે છે -- કૉલ શરૂ થાય ત્યારે બધા સેશન રિક્વેસ્ટને ફોરવર્ડ થાય છે. દરેક ફક્ત ત્યારે જ કાર્ય કરે છે જ્યારે વિજેટની publishable key હેઠળ બ્રાઉઝર ઓવરરાઇડ્સમાં તેની પરવાનગી હોય; અન્યથા સેશન રિક્વેસ્ટ 400 override_not_allowed સાથે નિષ્ફળ જાય છે:

પૂર્ણ પ્રોપ્સ ટેબલ માટે React કમ્પોનન્ટ રેફરન્સ જુઓ.

સંપૂર્ણપણે કસ્ટમ UI માટે, તમે પોતાનું ઇન્ટરફેસ બનાવતાં હો ત્યારે વૉઇસ સત્ર મેનેજ કરવા હેડલેસ હૂકનો ઉપયોગ કરો. હૂક ઑડિયો-રિએક્ટિવ વિઝ્યુઅલાઇઝેશન બનાવવા માટે રીઅલ-ટાઇમ ઑડિયો લેવલ્સ એક્સપોઝ કરે છે.

દરેક વિજેટ વાતચીત એક કૉલ છે. તે તમારી સંસ્થાની સમવર્તી કૉલ મર્યાદામાં ગણાય છે (ડિફૉલ્ટ રૂપે ચાલુ સ્થિતિમાં 20 કૉલ્સ, જે ફોન અને અન્ય કૉલ્સ સાથે શેર થાય છે) અને 25 સક્રિય સેશનની વિજેટ મર્યાદામાં પણ ગણાય છે (અથવા તમારી સમવર્તી કૉલ મર્યાદા, જો તે વધુ હોય). કોઈપણ મર્યાદા પર, કૉલ સમાપ્ત ન થાય ત્યાં સુધી નવી વાતચીત શરૂ થઈ શકતી નથી.

એકીકરણ વિકલ્પો#

તમારા સ્ટેકને અનુરૂપ એકીકરણ પદ્ધતિ પસંદ કરો:

સ્ટાઇલિંગ#

વિજેટ theme prop દ્વારા નિયંત્રિત બિલ્ટ-ઇન લાઇટ અને ડાર્ક થીમ્સ સાથે આવે છે, તેમજ primaryColor prop દ્વારા નિયંત્રિત એક્સેન્ટ કલર સાથે આવે છે. વધુ ઊંડા કસ્ટમાઇઝેશન માટે, તમે CSS કસ્ટમ પ્રોપર્ટીઝ અને ક્લાસિસ ઓવરરાઇડ કરી શકો છો. વિગતો માટે સ્ટાઇલિંગ માર્ગદર્શિકા જુઓ.