தொடங்குங்கள்

உட்பொதிக்கக்கூடிய குரல் விட்ஜெட்

ThunderPhone உட்பொதிக்கக்கூடிய குரல் விட்ஜெட், உங்கள் வலைத்தள பார்வையாளர்கள் உலாவியிலிருந்தே நேரடியாக ஒரு AI ஏஜென்ட்டுடன் பேச அனுமதிக்கிறது. தொலைபேசி அழைப்பு தேவையில்லை -- பயனர்கள் ஒரு பொத்தானைக் கிளிக் செய்து, ThunderPhone வழங்கும் நிகழ்நேர குரல் உரையாடலைத் தொடங்குவார்கள்.

இந்த விட்ஜெட், தனிப்பயனாக்கக்கூடிய வலியுறுத்தல் வண்ணங்கள் மற்றும் நிலைப்பாட்டுடன், ஒளி மற்றும் இருண்ட தீம்களுக்கு ஏற்ப மாறும் கண்ணாடி தோற்றப் பட்டையாகக் காட்டப்படும். இது @thunderphone/widget npm தொகுப்பாக விநியோகிக்கப்படுகிறது; பண்ட்லர் இல்லாத சூழல்களுக்காக CDN மூலமும் கிடைக்கிறது.

ThunderPhone widget in light and dark themes with various accent colors

முன்தேவைகள்

விட்ஜெட்டை உட்பொதிப்பதற்கு முன், 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 ஏஜென்ட்டுடன் இணைக்கும் கண்ணாடி தோற்ற அழைப்புப் பட்டையைக் காண்பார்கள்.

தனிப்பயனாக்கம்

விட்ஜெட்டில் தோற்றத்திற்கான நான்கு props உள்ளன:

Propஇயல்புநிலைவிளக்கம்
theme'light'வெள்ளைக் கண்ணாடிக்கு 'light', இருண்ட கண்ணாடிக்கு 'dark'
primaryColor'#000000' (ஒளி) / '#ffffff' (இருண்ட)தொடக்கப் பொத்தான், அலைவடிவம் மற்றும் இணைப்பு குறிகாட்டிக்கான வலியுறுத்தல் வண்ணம்
title'Voice assistant'விட்ஜெட்டில் காட்டப்படும் உரை
position'bottom-right'வியூபோர்ட் மூலை: 'bottom-right', 'bottom-left', 'top-right', 'top-left'
<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
/>

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

மேலும் மூன்று props தோற்றத்தை விட அமர்வைத் தனிப்பயனாக்குகின்றன -- அழைப்பு தொடங்கும்போது அனைத்தும் அமர்வுக் கோரிக்கைக்கு அனுப்பப்படும்:

Propவிளக்கம்
languageஒவ்வொரு அமர்விற்குமான மொழி மேலெழுதுதல் -- en, es, அல்லது fr-FR போன்ற குறியீடு அல்லது லொக்கேல்
voiceஒவ்வொரு அமர்விற்குமான குரல் மேலெழுதுதல் -- maria போன்ற குரல் பெயர்
contextஏஜென்ட்டுக்கு அனுப்பப்படும் உண்மை அடிப்படையிலான பக்கம் அல்லது தளச் சூழல் (சர்வர்-பக்கத்தில் 12,000 எழுத்துகளாகக் குறைக்கப்படும்)

முழுமையான props அட்டவணைக்கு React கூறு குறிப்பைக் காணவும்.

முழுமையாகத் தனிப்பயனாக்கப்பட்ட UIக்கு, உங்கள் சொந்த இடைமுகத்தை உருவாக்கும் போது குரல் அமர்வை நிர்வகிக்க headless hook ஐப் பயன்படுத்தவும். ஆடியோ-எதிர்வினை காட்சிப்படுத்தல்களை உருவாக்க, இந்த hook நிகழ்நேர ஆடியோ நிலைகளை வெளிப்படுத்துகிறது.

ஒருங்கிணைப்பு விருப்பங்கள்

உங்கள் ஸ்டாக்கிற்கு பொருந்தும் ஒருங்கிணைப்பு முறையைத் தேர்ந்தெடுக்கவும்:

React கூறு

உள்ளமைக்கப்பட்ட அழைப்பு கட்டுப்பாடுகள் மற்றும் நிலைக் காட்சியுடன் முன்கட்டமைக்கப்பட்ட UI கூறு. இறக்குமதி செய்து, props-ஐ அனுப்பினால் முடிந்தது.

Headless ஹுக்

UI மீது முழுக் கட்டுப்பாடு. நீங்கள் உங்கள் சொந்த இடைமுகத்தை உருவாக்கும் போது useThunderPhone ஹுக் குரல் அமர்வை நிர்வகிக்கும்.

CDN / ஸ்கிரிப்ட் டேக்

bundler தேவையில்லை. நிலையான தளங்கள், WordPress மற்றும் பிற React அல்லாத சூழல்களுக்கு ஸ்கிரிப்ட் டேக் மூலம் விட்ஜெட்டை ஏற்றவும்.

ஸ்டைலிங்

இந்த விட்ஜெட்டில் theme prop மூலம் கட்டுப்படுத்தப்படும் உள்ளமைக்கப்பட்ட லைட் மற்றும் டார்க் தீம்களும், primaryColor prop மூலம் கட்டுப்படுத்தப்படும் accent நிறமும் உள்ளன. மேலும் ஆழமான தனிப்பயனாக்கத்திற்கு, CSS தனிப்பயன் பண்புகளையும் கிளாஸ்களையும் மேலெழுதலாம். விவரங்களுக்கு ஸ்டைலிங் வழிகாட்டியை பார்க்கவும்.