---
title: "டாஷ்போர்டில் ஒரு வலை விட்ஜெட்டை உருவாக்கவும்"
description: "Web Widgets பக்கத்திலிருந்து உங்கள் தளத்திற்கான கிளிக் செய்து பேசும் விட்ஜெட்டை அமைக்கவும் — API அழைப்புகள் தேவையில்லை."
---

**Web Widgets** பக்கம் (`/dashboard/web-widgets`) ThunderPhone-இன் உட்பொதிக்கக்கூடிய குரல் விட்ஜெட்டை இயக்கும்
வெளியிடக்கூடிய விசைகளை உருவாக்கி நிர்வகிக்கிறது.
இந்த [வழிகாட்டியின் API பதிப்பு](/ta/guides/embed-web-widget)
cURL மூலம் செய்வதையெல்லாம் இந்தப் பக்கம் ஒரு படிவத்தின் மூலம் செய்கிறது — மேலும் உங்களுக்காக உட்பொதிப்புக்
குறியீட்டையும் உருவாக்குகிறது.

## ஒரு விட்ஜெட்டை உருவாக்குங்கள்

<Steps>
  <Step title="புதிய விட்ஜெட்டைக் கிளிக் செய்து ஒரு பயன்முறையைத் தேர்ந்தெடுக்கவும்">
    - **ஏஜென்ட் பயன்முறை** — கீழ்தோன்றும் பட்டியலில் நீங்கள் தேர்ந்தெடுக்கும் ஒரு ஏஜென்ட்டை
      விட்ஜெட் எப்போதும் இயக்கும். மிக எளிய அமைப்பு.
    - **Webhook பயன்முறை** — ஒவ்வொரு விட்ஜெட் அமர்விலும், ThunderPhone
      உங்கள் webhook URL-ஐ அழைக்கும்; அந்த வருகையாளருக்கான ஏஜென்ட் உள்ளமைவை
      உங்கள் சர்வர் வழங்கும் (ஒவ்வொரு பக்கத்திற்குமான வழிமாற்றம், உள்நுழைந்த பயனர்கள், வெளியீட்டு நிலைகள்).
      உங்கள் நிறுவனத்தின் இயல்புநிலை webhook-ஐப் பயன்படுத்த URL-ஐ காலியாக விடுங்கள்;
      புதிய URL ஒன்றை உள்ளிடும்போது அதை நிறுவனத்தின் இயல்புநிலையாகவும் அமைக்கலாம்.
  </Step>
  <Step title="அனுமதிக்கப்பட்ட டொமைன்களைப் பட்டியலிடுங்கள்">
    வெளியிடக்கூடிய விசைகள் origin-பூட்டப்பட்டவை: குறைந்தது ஒரு டொமைன் அவசியம்,
    மேலும் நீங்கள் பட்டியலிடும் ஹோஸ்ட்பெயர்களில் மட்டுமே விட்ஜெட் செயல்படும். `*.example.com` போன்ற
    துணைடொமைன் வைல்ட்கார்டுகள் அனுமதிக்கப்படுகின்றன (அவை துணைடொமைன்களுடன் பொருந்தும்,
    அடிப்படை டொமைனுடன் அல்ல); `*` போன்ற அடிப்படை வைல்ட்கார்டுகள் நிராகரிக்கப்படும்.
    `localhost` மற்றும் `127.0.0.1` எப்போதும் அனுமதிக்கப்படுகின்றன; எனவே அவற்றைப் பட்டியலிடாமலேயே
    உள்ளூர் மேம்பாடு செயல்படும்.
  </Step>
  <Step title="பெயரிடுங்கள், இயக்குங்கள், உருவாக்குங்கள்">
    **விட்ஜெட்டை இயக்கு** மாற்றி, விசை
    அமர்வுகளை ஏற்குமா என்பதைக் கட்டுப்படுத்துகிறது — முடக்கப்பட்ட நிலையில் ஒரு விட்ஜெட்டை உருவாக்கி, வெளியீட்டின்போது அதை இயக்கலாம்.
  </Step>
</Steps>

## உட்பொதிப்புக் குறியீட்டைப் பெறுங்கள்

உருவாக்கிய உடனேயே (அல்லது ஒவ்வொரு வரியிலுள்ள **உட்பொதி** பொத்தான் மூலம்), ஒரு உட்பொதிப்பு
உரையாடல் உங்கள் வெளியிடக்கூடிய விசை நிரப்பப்பட்ட, நேரடியாக ஒட்டத் தயாரான குறியீட்டை
உருவாக்கும்:

- **React** — பண்ட்லர் செயலிகளுக்கான `<ThunderPhoneWidget />` துணுக்குக்குறியீடு.
- **ஸ்கிரிப்ட் குறிச்சொல்** — எந்தத் தளத்திற்குமான CDN `<script>` + ஸ்டைல்ஷீட் இணை.

உரையாடல் அடிப்படை தோற்ற விருப்பங்களையும் — தலைப்பு, முதன்மை
நிறம், மூலை நிலை, மற்றும் ஒளி/இருண்ட தீம் — முன்னோட்டமிடும்; உங்கள் தேர்வுகளை
துணுக்குக்குறியீட்டில் சேர்க்கும். முழுமையான prop குறிப்புகள், ஸ்டைலிங் ஹுக்குகள், மற்றும்
ஹெட்லெஸ் விருப்பத்திற்கு, [விட்ஜெட் SDK ஆவணங்களை](/ta/widget/overview) பார்க்கவும்.

<Note>
  வெளியிடக்கூடிய விசைகள் (`pk_live_…`) வடிவமைப்பிலேயே பொதுவானவை — முன்பக்கக் குறியீட்டில்
  சேர்ப்பது பாதுகாப்பானது. அதன் வரியிலுள்ள நகலெடு பொத்தான் மூலம் எப்போதும் ஒன்றை நகலெடுக்கலாம்.
</Note>

## பட்டியலிலிருந்து விட்ஜெட்களை நிர்வகிக்கவும்

ஒவ்வொரு வரியும் அந்த இடத்திலேயே திருத்தப்படும்:

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

விட்ஜெட் அமர்வுகள், தொலைபேசி அழைப்புகளைப் போலவே அதே
உரைபதிவு, பதிவு மற்றும் மதிப்பீட்டுடன் [அழைப்பு வரலாற்றில்](/ta/guides/review-calls) தோன்றும்.

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

<CardGroup cols={2}>
  <Card title="விட்ஜெட் SDK குறிப்பு" icon="window-maximize" href="/ta/widget/overview">
    React கூறு, ஹெட்லெஸ் ஹுக் மற்றும் CDN ஸ்கிரிப்ட் விவரங்கள்.
  </Card>
  <Card title="Webhook பயன்முறை வழிமாற்றம்" icon="bolt" href="/ta/guides/dynamic-call-config">
    உங்கள் சர்வரிலிருந்து ஒவ்வொரு வருகையாளருக்குமான ஏஜென்ட் உள்ளமைவை வழங்குங்கள்.
  </Card>
</CardGroup>