வலை விட்ஜெட்டை உட்பொதிக்கவும்

ஒரே script tag மூலம் உங்கள் மார்க்கெட்டிங் அல்லது ஆதரவு தளத்தில் ஒரு குரல் ஏஜென்ட்டைச் சேர்க்கவும் — பார்வையாளர்கள் தொலைபேசி எண் தேவையின்றி உலாவியிலிருந்தே அதனுடன் நேரடியாகப் பேசலாம்.

வெப் விட்ஜெட், உலாவியின் மைக்ரோஃபோனைப் பயன்படுத்தி, உங்கள் தளப் பார்வையாளர்களுக்கு AI ஏஜென்டுடன் கிளிக் செய்து பேசும் உரையாடலை வழங்குகிறது. இது தனித்த SDK குறிப்பு கொண்ட தனி JavaScript / React SDK ஆகும் — இந்த வழிகாட்டி, விட்ஜெட்டுக்குத் தேவையான ThunderPhone-பக்க அமைப்பில் கவனம் செலுத்துகிறது.

முன்தேவைகள்#

1. ஒரு ஏஜென்டை உருவாக்குங்கள்

   prompt மற்றும் குரல் விட்ஜெட் அமர்வை இயக்கும் ஏஜென்ட். widget_enabled: true (இயல்புநிலை) என அமைக்கவும்.

2. ரூட்டிங் பயன்முறையைத் தீர்மானியுங்கள்
   • mode="agent" — ஒவ்வொரு விசைக்கும் ஒரு நிலையான ஏஜென்ட். மிகவும் எளிமையானது.
   • mode="webhook" — ஒவ்வொரு பார்வையாளருக்கும் உங்கள் சர்வர் ஏஜென்டைத் தேர்ந்தெடுக்கும்; இதற்கு web.incoming வெப்ஹூக் பயன்படுத்தப்படும். உள்நுழைந்த பயனர்கள், A/B சோதனைகள் அல்லது ஒவ்வொரு பக்கத்திற்குமான ரூட்டிங்கிற்கு இதைப் பயன்படுத்துங்கள்.
3. அனுமதிக்கப்பட்ட டொமைன்களைப் பட்டியலிடுங்கள்

   வெளியிடக்கூடிய விசைகள் origin-க்கு பூட்டப்பட்டவை. விட்ஜெட்டை உட்பொதிக்கும் ஒவ்வொரு ஹோஸ்ட்பெயரையும் நீங்கள் குறிப்பிட வேண்டும். உள்ளூர் மேம்பாட்டின்போது localhost / 127.0.0.1 எப்போதும் அனுமதிக்கப்படும்.

வெளியிடக்கூடிய விசையை உருவாக்குங்கள்#

curl -X POST https://api.thunderphone.com/v1/publishable-key \
  -H "Authorization: Bearer sk_live_YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "name":            "Marketing site (prod)",
    "mode":            "agent",
    "agent_id":        12,
    "allowed_domains": ["example.com", "*.example.com"]
  }'

curl -X POST https://api.thunderphone.com/v1/publishable-key \
  -H "Authorization: Bearer sk_live_YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "name":            "Support (dynamic)",
    "mode":            "webhook",
    "webhook_url":     "https://example.com/thunderphone/widget-hook",
    "allowed_domains": ["support.example.com"]
  }'

பதிலில் pk_live_... என்று தொடங்கும் key இருக்கும். வெளியிடக்கூடிய விசைகள் வடிவமைப்பிலேயே பொதுவானவை — உங்கள் முன்பக்க பண்டிலில் சேர்ப்பது பாதுகாப்பானது. அனைத்து புலங்களுக்கும் வெளியிடக்கூடிய விசைகள் குறிப்பு பார்க்கவும்.

உங்கள் தளத்தில் விட்ஜெட்டைச் சேர்க்கவும்#

மூன்று ஒருங்கிணைப்பு விருப்பங்கள் விட்ஜெட் SDK ஆவணங்களில் உள்ளன:

மூன்றும் ஒரே publishableKey-ஐ ஏற்று, மைக் பொத்தானையும் அழைப்பின்போதைய ஆடியோ கூறையும் ரெண்டர் செய்கின்றன.

விட்ஜெட் context 12,000 எழுத்துகளாக (வழக்கமான ஆங்கில உரையின் தோராயமாக 3,400 டோக்கன்கள்) துண்டிக்கப்படும்; மேலும் இது prompt-அளவு கூடுதல் கட்டணத்தில் கணக்கிடப்படும்.

விட்ஜெட்-பயன்முறை வெப்ஹூக்குகள்#

mode="webhook" ஆக இருக்கும்போது, ஒவ்வொரு அமர்வு தொடக்கத்திலும் ThunderPhone உங்கள் webhook_url-ஐ web.incoming பேலோடுடன் அழைக்கும். அந்தப் பார்வையாளருக்காக இயக்க விரும்பும் ஏஜென்ட் உள்ளமைவைத் திருப்பியனுப்புங்கள் — இது தொலைபேசி அழைப்புகளைப் போலவே அதே பதில் ஸ்கீமாவைப் பின்பற்றுகிறது:

{
  "prompt":  "You are a VIP concierge for Jane Doe.",
  "voice":   "john",
  "product": "storm-base",
  "tools":   [ /* per-customer tools */ ]
}

உங்கள் சொந்த அமர்விலிருந்து சூழலை (எந்த வாடிக்கையாளர் உலாவுகிறார், அவர்கள் எந்தப் பக்கத்தில் உள்ளனர்) prompt-இல் சேர்க்கலாம்; மேலும் ஒவ்வொரு வெளியீட்டு கட்டத்திற்கும் ஏஜென்ட்களை மாற்றலாம்.

அமர்வுகளைக் கண்காணிக்கவும்#

விட்ஜெட் அமர்வுகள் GET /v1/calls இல் direction="widget" உடன் தோன்றும் — தொலைபேசி அழைப்புகளைப் போலவே உரையாடல் பதிவு, பதிவு செய்தல், மதிப்பீடு மற்றும் கட்டண விவரங்களுடன். விட்ஜெட்டுக்கான டாஷ்போர்டை உருவாக்க direction மூலம் வடிகட்டவும்.

அடுத்த படிகள்#