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

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

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

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

1. ஏஜென்ட்டை உருவாக்கவும்

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

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

   widget-ஐ உட்பொதிக்கும் ஒவ்வொரு hostname-ஐயும் குறிப்பிடவும். ஒவ்வொரு அமர்வு கோரிக்கையுடனும் உலாவிகள் பக்கத்தின் origin-ஐ அனுப்பும்; எனவே யாராவது உங்கள் key-ஐ வேறொரு தளத்தில் நகலெடுத்தால் அது செயல்படுவதை இந்தப் பட்டியல் தடுக்கிறது. இது அங்கீகாரம் அல்ல: உலாவிக்கு வெளியே உள்ள script எதுவும் எந்த Origin header-ஐயும் அனுப்பலாம். உற்பத்திச் சூழலில் localhost தானாக அனுமதிக்கப்படாது; உற்பத்தி API-க்கு எதிராக உள்ளூரில் சோதிக்க, பட்டியலில் localhost-ஐச் சேர்க்கவும்.

4. உலாவி மேலெழுதல்களைத் தேர்ந்தெடுக்கவும்

   உங்கள் பக்கம் அனுப்பக்கூடிய அமர்வு அமைப்புகளைத் தீர்மானிக்கவும். புதிய key-கள் எதையும் ஏற்காது; உலாவி மேலெழுதல்கள் என்பதைப் பார்க்கவும்.

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

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"],
    "allowed_overrides": ["context"]
  }'

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-ஐ ஏற்று, மைக் பொத்தானையும் அழைப்பின்போதைய ஆடியோ கூறையும் ரெண்டர் செய்கின்றன.

உலாவி மேலெழுதல்கள்#

விட்ஜெட் பக்கத்திலிருந்து ஒவ்வொரு அமர்வுக்கும் நான்கு அமைப்புகளை அனுப்ப முடியும்:

உங்கள் வெளியிடக்கூடிய விசை பொதுவானது; எனவே அதை வைத்திருக்கும் யாரும், உங்கள் டொமைனைப் போலியாகக் காட்டும் ஸ்கிரிப்டிலிருந்தும் உட்பட, இந்த அமைப்புகளை அனுப்ப முடியும். ஒவ்வொன்றையும் நீங்கள் விசையில் அனுமதிக்கும் வரை அது முடக்கப்பட்டிருக்கும்: டாஷ்போர்டில் விட்ஜெட்டை உருவாக்கும்போது அல்லது திருத்தும்போது உலாவி மேலெழுதல்கள் என்பதன் கீழ் அதைத் தேர்வுசெய்யவும் அல்லது allowed_overrides என்பதை வெளியிடக்கூடிய விசைகள் API மூலம் அமைக்கவும். உங்கள் பக்கம் உண்மையில் அனுப்புவதை மட்டும் அனுமதிக்கவும்.

விசை அனுமதிக்காத அமைப்பைக் கொண்ட அமர்வு கோரிக்கை 400 உடன் தோல்வியடைந்து, அந்த அமைப்பின் பெயரைக் குறிப்பிடும்:

{
  "error": "override_not_allowed",
  "fields": ["voice"],
  "message": "This publishable key does not allow the browser to set `voice`. ..."
}

இந்தச் சரிபார்ப்பு இரு முறைகளிலும் பொருந்தும். webhook முறையில், அனுமதிக்கப்பட்ட அமைப்பு உங்கள் web.incoming webhook-க்கும் அனுப்பிவைக்கப்படும் (context என்பது website_context ஆக வரும்). இந்த அமைப்பு அறிமுகப்படுத்தப்படுவதற்கு முன் உருவாக்கப்பட்ட விசைகள் நான்கையும் அனுமதிக்கும்; எனவே ஏற்கனவே உள்ள உட்பொதிப்புகள் தொடர்ந்து செயல்படும்; நீங்கள் பயன்படுத்தாதவற்றை முடக்கவும்.

விட்ஜெட் 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 மூலம் வடிகட்டவும்.

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