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

ThunderPhoneનું એમ્બેડ કરી શકાય તેવું વૉઇસ વિજેટ તમારી વેબસાઇટના મુલાકાતીઓને બ્રાઉઝરથી સીધા AI એજન્ટ સાથે વાત કરવાની સુવિધા આપે છે. ફોન કૉલની જરૂર નથી -- વપરાશકર્તાઓ બટન પર ક્લિક કરે છે અને ThunderPhone દ્વારા સંચાલિત રીઅલ-ટાઇમ વૉઇસ વાતચીત શરૂ કરે છે.

વિજેટ ગ્લાસમોર્ફિક બાર તરીકે રેન્ડર થાય છે, જે કસ્ટમાઇઝ કરી શકાય તેવા એક્સન્ટ રંગો અને સ્થાન સાથે લાઇટ તથા ડાર્ક થીમને અનુકૂળ થાય છે. તે @thunderphone/widget npm પૅકેજ તરીકે વિતરિત થાય છે અને નૉન-બંડલર એન્વાયરમેન્ટ માટે CDN મારફતે પણ ઉપલબ્ધ છે.

પૂર્વજરૂરીયાતો

વિજેટ એમ્બેડ કરતા પહેલાં, ThunderPhone ડેશબોર્ડમાં આ ત્રણ પગલાં પૂર્ણ કરો:

1. પ્રકાશિત કરી શકાય તેવી API કી બનાવો

   ડેશબોર્ડ સેટિંગ્સમાં ડેવલપર્સ પર જાઓ અને પ્રકાશિત કરી શકાય તેવી કી બનાવો. પ્રકાશિત કરી શકાય તેવી કીઓ pk_live_થી શરૂ થાય છે અને ક્લાયન્ટ-સાઇડ કોડમાં સામેલ કરવા માટે સુરક્ષિત છે.

2. મંજૂર ડોમેન્સ ગોઠવો

   એ જ ડેવલપર્સ સેટિંગ્સમાં, જ્યાં વિજેટ એમ્બેડ કરવામાં આવશે તે ડોમેન્સ ઉમેરો. ડેવલપમેન્ટ માટે localhost હંમેશા મંજૂર છે. વાઇલ્ડકાર્ડ્સ સપોર્ટેડ છે (દા.ત., *.example.com).

3. વેબ વિજેટ બનાવો

   ડેશબોર્ડમાં વેબ વિજેટ્સ પર જાઓ અને વિજેટ બનાવો. તમે એક્સપોઝ કરવા માંગો છો તે એજન્ટ અને ઉપયોગ કરવાની પ્રકાશિત કરી શકાય તેવી કી પસંદ કરો. એજન્ટ તમારી પ્રકાશિત કરી શકાય તેવી કી કન્ફિગરેશનમાંથી આપમેળે નક્કી થાય છે.

ઝડપી શરૂઆત

પૅકેજ ઇન્સ્ટોલ કરો:

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"
/>

વધુ ત્રણ પ્રોપ્સ દેખાવને બદલે સત્રને કસ્ટમાઇઝ કરે છે -- કૉલ શરૂ થાય ત્યારે બધા સત્ર વિનંતી પર ફૉર્વર્ડ કરવામાં આવે છે:

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

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

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

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

સ્ટાઇલિંગ

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