---
title: "ડેશબોર્ડમાં વેબ વિજેટ બનાવો"
description: "Web Widgets પેજમાંથી તમારી સાઇટ માટે ક્લિક-ટુ-ટોક વિજેટ સેટ અપ કરો — કોઈ API કૉલ જરૂરી નથી."
---

**Web Widgets** પેજ (`/dashboard/web-widgets`) ThunderPhoneના એમ્બેડ કરી શકાય તેવા વૉઇસ વિજેટને કાર્યરત કરતી પબ્લિશેબલ કીઝ બનાવે છે અને મેનેજ કરે છે.
આ ગાઇડનું [API વર્ઝન](/gu/guides/embed-web-widget) cURL દ્વારા જે બધું કરે છે, તે આ પેજ ફોર્મ દ્વારા કરે છે — ઉપરાંત તે તમારા માટે એમ્બેડ કોડ જનરેટ કરે છે.

## વિજેટ બનાવો

<Steps>
  <Step title="નવું વિજેટ ક્લિક કરો અને મોડ પસંદ કરો">
    - **એજન્ટ મોડ** — વિજેટ હંમેશા ડ્રોપડાઉનમાંથી તમે પસંદ કરેલા એક એજન્ટને ચલાવે છે. સૌથી સરળ સેટઅપ.
    - **Webhook મોડ** — દરેક વિજેટ સેશન પર ThunderPhone તમારા webhook URLને કૉલ કરે છે અને તમારું સર્વર તે વિઝિટર માટે એજન્ટ કૉન્ફિગરેશન પરત કરે છે (દર-પેજ રૂટિંગ, લૉગ-ઇન થયેલા વપરાશકર્તાઓ, રોલઆઉટ્સ).
      તમારી સંસ્થાના ડિફૉલ્ટ webhookનો ઉપયોગ કરવા URL ખાલી રાખો; જ્યારે તમે નવું URL દાખલ કરો, ત્યારે તમે તેને સંસ્થાના ડિફૉલ્ટ તરીકે પણ સેટ કરી શકો છો.
  </Step>
  <Step title="મંજૂર ડોમેન્સની યાદી બનાવો">
    પબ્લિશેબલ કીઝ ઓરિજિન-લૉક્ડ હોય છે: ઓછામાં ઓછું એક ડોમેન જરૂરી છે,
    અને વિજેટ ફક્ત તમે સૂચિબદ્ધ કરેલા હોસ્ટનામ્સ પર જ કાર્ય કરે છે. `*.example.com` જેવા સબડોમેન વાઇલ્ડકાર્ડ્સ મંજૂર છે (તે સબડોમેન્સ સાથે મેળ ખાય છે,
    બેર ડોમેન સાથે નહીં); `*` જેવા બેર વાઇલ્ડકાર્ડ્સ નકારવામાં આવે છે.
    `localhost` અને `127.0.0.1` હંમેશા મંજૂર હોય છે, જેથી સ્થાનિક ડેવલપમેન્ટ
    તેમને સૂચિબદ્ધ કર્યા વિના કાર્ય કરે.
  </Step>
  <Step title="તેને નામ આપો, સક્રિય કરો, બનાવો">
    **વિજેટ સક્રિય કરો** ટૉગલ કી સેશન્સ સ્વીકારે છે કે નહીં તે નિયંત્રિત કરે છે — તમે વિજેટને નિષ્ક્રિય સ્થિતિમાં બનાવી શકો છો અને લોન્ચ સમયે તેને સક્રિય કરી શકો છો.
  </Step>
</Steps>

## એમ્બેડ કોડ મેળવો

બનાવ્યા પછી તરત જ (અથવા દરેક પંક્તિના **એમ્બેડ** બટન દ્વારા), એક એમ્બેડ
ડાયલૉગ તમારી પબ્લિશેબલ કી પહેલેથી ભરેલા, પેસ્ટ કરવા માટે તૈયાર કોડ જનરેટ
કરે છે:

- **React** — બંડલર એપ્સ માટે `<ThunderPhoneWidget />` સ્નિપેટ.
- **સ્ક્રિપ્ટ ટૅગ** — કોઈપણ સાઇટ માટે CDN `<script>` + સ્ટાઇલશીટ જોડી.

ડાયલૉગ મૂળભૂત દેખાવના વિકલ્પો — શીર્ષક, પ્રાથમિક
રંગ, ખૂણાની સ્થિતિ અને લાઇટ/ડાર્ક થીમ —નું પૂર્વાવલોકન પણ કરે છે અને તમારી પસંદગીઓને
સ્નિપેટમાં સામેલ કરે છે. સંપૂર્ણ prop સંદર્ભ, સ્ટાઇલિંગ હુક્સ અને
હેડલેસ વિકલ્પ માટે [વિજેટ SDK ડૉક્સ](/gu/widget/overview) જુઓ.

<Note>
  પબ્લિશેબલ કીઝ (`pk_live_…`) ડિઝાઇન મુજબ જાહેર છે — ફ્રન્ટ-એન્ડ કોડમાં
  મોકલવા માટે સુરક્ષિત છે. તેની પંક્તિમાં રહેલા કૉપી બટનથી કોઈપણ સમયે એક કૉપી કરો.
</Note>

## યાદીમાંથી વિજેટ્સ મેનેજ કરો

દરેક પંક્તિમાં જ સંપાદન થાય છે:

- **મોડ / એજન્ટ** — ઇનલાઇન સિલેક્ટ્સ દ્વારા એજન્ટ અને webhook મોડ વચ્ચે બદલો, અથવા
  એજન્ટને અન્ય એજન્ટ તરફ બદલો.
- **ડોમેન્સ** — ચિપ્સ તરીકે મંજૂર ડોમેન્સ ઉમેરો અથવા દૂર કરો.
- **સક્રિય/નિષ્ક્રિય** — દરેક વિજેટ માટે એક સ્વિચ; નિષ્ક્રિય વિજેટ્સ તરત જ
  સેશન્સ સ્વીકારવાનું બંધ કરે છે.
- **સંસ્થામાં ટ્રાન્સફર કરો** — તમે જે બીજી સંસ્થાના સભ્ય છો તેમાં વિજેટની
  કૉપી કરો અથવા તેને ખસેડો (ખસેડવાથી તે અહીંથી દૂર થાય છે).
- **કાઢી નાખો** — પબ્લિશેબલ કી રદ કરે છે; વિજેટ બધા ડોમેન્સ પર તરત જ કાર્ય કરવાનું બંધ કરે છે. આને પૂર્વવત્ કરી શકાતું નથી.

વિજેટ સેશન્સ [કૉલ ઇતિહાસ](/gu/guides/review-calls)માં ફોન કૉલ્સ જેવા જ
ટ્રાન્સક્રિપ્ટ, રેકોર્ડિંગ અને ગ્રેડિંગ સાથે દેખાય છે.

## આગળના પગલાં

<CardGroup cols={2}>
  <Card title="વિજેટ SDK સંદર્ભ" icon="window-maximize" href="/gu/widget/overview">
    React કોમ્પોનેન્ટ, હેડલેસ હુક અને CDN સ્ક્રિપ્ટની વિગતો.
  </Card>
  <Card title="Webhook-મોડ રૂટિંગ" icon="bolt" href="/gu/guides/dynamic-call-config">
    તમારા સર્વર પરથી દરેક વિઝિટર માટે એજન્ટ કૉન્ફિગ પરત કરો.
  </Card>
</CardGroup>