---
title: "Ενσωματώστε το γραφικό στοιχείο ιστού"
description: "Προσθέστε έναν φωνητικό πράκτορα στον ιστότοπο μάρκετινγκ ή υποστήριξής σας με ένα μόνο script tag — οι επισκέπτες μιλούν μαζί του απευθείας από το πρόγραμμα περιήγησης, χωρίς να απαιτείται αριθμός τηλεφώνου."
---

Το διαδικτυακό γραφικό στοιχείο προσφέρει στους επισκέπτες του ιστότοπού σας μια συνομιλία με κλικ για ομιλία
με έναν AI πράκτορα, χρησιμοποιώντας το μικρόφωνο του προγράμματος περιήγησης. Είναι ένα ξεχωριστό
JavaScript / React SDK με τη δική του [αναφορά SDK](/el/widget/overview)
— αυτός ο οδηγός εστιάζει στη ρύθμιση στην πλευρά του ThunderPhone που χρειάζεται το γραφικό στοιχείο.

<Note>
  Μπορείτε να κάνετε όλα αυτά χωρίς cURL: η σελίδα του πίνακα ελέγχου **Διαδικτυακά γραφικά στοιχεία**
  (`/dashboard/web-widgets`) δημιουργεί το γραφικό στοιχείο, ορίζει τη λειτουργία
  και τον πράκτορά του, διαχειρίζεται τα επιτρεπόμενα πεδία και σας παρέχει το απόσπασμα ενσωμάτωσης.
</Note>

## Προαπαιτούμενα

<Steps>
  <Step title="Δημιουργήστε έναν πράκτορα">
    Ο πράκτορας του οποίου η προτροπή και η φωνή θα εκτελούν τη συνεδρία του γραφικού στοιχείου. Ορίστε
    `widget_enabled: true` (η προεπιλογή).
  </Step>
  <Step title="Επιλέξτε τη λειτουργία δρομολόγησης">
    - `mode="agent"` — ένας στατικός πράκτορας ανά κλειδί. Η απλούστερη επιλογή.
    - `mode="webhook"` — ο διακομιστής σας επιλέγει τον πράκτορα ανά επισκέπτη μέσω ενός
      [webhook `web.incoming`](/el/webhooks/call-incoming). Χρησιμοποιήστε το για
      συνδεδεμένους χρήστες, δοκιμές A/B ή δρομολόγηση ανά σελίδα.
  </Step>
  <Step title="Καταγράψτε τα επιτρεπόμενα πεδία">
    Τα δημοσιεύσιμα κλειδιά είναι δεσμευμένα στην προέλευση. Πρέπει να δηλώσετε κάθε όνομα κεντρικού υπολογιστή
    που θα ενσωματώνει το γραφικό στοιχείο. Τα `localhost` / `127.0.0.1` επιτρέπονται πάντα
    κατά την τοπική ανάπτυξη.
  </Step>
</Steps>

## Δημιουργήστε ένα δημοσιεύσιμο κλειδί

<CodeGroup>
```bash Static agent
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"]
  }'
```

```bash Dynamic via webhook
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"]
  }'
```
</CodeGroup>

Η απόκριση περιλαμβάνει ένα `key` που ξεκινά με `pk_live_...`. Τα **δημοσιεύσιμα
κλειδιά είναι δημόσια από σχεδίαση** — μπορείτε με ασφάλεια να τα συμπεριλάβετε στο πακέτο του προσκηνίου σας.
Δείτε την [αναφορά δημοσιεύσιμων κλειδιών](/api-reference/publishable-keys) για
όλα τα πεδία.

<Warning>
  Το `allowed_domains` πρέπει να περιέχει τουλάχιστον μία καταχώριση. Το `*.example.com`
  αντιστοιχεί σε υποπεδία (π.χ. `api.example.com`) αλλά **όχι** στο γυμνό
  πεδίο. Γυμνοί χαρακτήρες υποκατάστασης όπως `*` ή `*.*` απορρίπτονται.
</Warning>

## Προσθέστε το γραφικό στοιχείο στον ιστότοπό σας

Τρεις επιλογές ενσωμάτωσης καλύπτονται στην
[τεκμηρίωση SDK του γραφικού στοιχείου](/el/widget/overview):

<CardGroup cols={3}>
  <Card title="Στοιχείο React" icon="react" href="/el/widget/react">
    `<ThunderPhoneWidget publishableKey="pk_live_..." />`.
  </Card>
  <Card title="Άγκιστρο χωρίς διεπαφή" icon="circle-nodes" href="/el/widget/headless-hook">
    `useThunderPhone()` για προσαρμοσμένες διεπαφές χρήστη.
  </Card>
  <Card title="Ετικέτα script CDN" icon="code" href="/el/widget/cdn-script-tag">
    `ThunderPhone.mount({...})` για ιστότοπους χωρίς πακεταριστή.
  </Card>
</CardGroup>

Και οι τρεις δέχονται το ίδιο `publishableKey` και αποδίδουν το κουμπί
μικροφώνου μαζί με το στοιχείο ήχου κατά την κλήση.

Το `context` του γραφικού στοιχείου περικόπτεται στους 12.000 χαρακτήρες (περίπου 3.400
διακριτικά τυπικού αγγλικού κειμένου) και υπολογίζεται στην
[επιβάρυνση μεγέθους προτροπής](/el/guides/billing-and-topups).

## Webhook λειτουργίας γραφικού στοιχείου

Όταν `mode="webhook"`, το ThunderPhone καλεί το `webhook_url` σας σε κάθε
έναρξη συνεδρίας με ένα ωφέλιμο φορτίο `web.incoming`. Επιστρέψτε τη ρύθμιση
πράκτορα που θέλετε να εκτελέσετε για τον συγκεκριμένο επισκέπτη — ακολουθεί το ίδιο
[σχήμα απόκρισης](/el/webhooks/call-incoming) με τις τηλεφωνικές
κλήσεις:

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

Μπορείτε να συνδυάσετε περιβάλλον από τη δική σας συνεδρία (ποιος πελάτης περιηγείται,
σε ποια σελίδα βρίσκεται) στην προτροπή και να αλλάζετε πράκτορες ανά ανάπτυξη.

## Παρακολούθηση των συνεδριών

Οι συνεδρίες του widget εμφανίζονται στο
[`GET /v1/calls`](/api-reference/calls#list-calls) με
`direction="widget"` — με την ίδια απομαγνητοφώνηση, εγγραφή, αξιολόγηση και
χρέωση όπως οι τηλεφωνικές κλήσεις. Φιλτράρετε κατά `direction` για να δημιουργήσετε έναν πίνακα ελέγχου μόνο για το widget.

---

## Επόμενα βήματα

<CardGroup cols={2}>
  <Card title="Αναφορά SDK widget" icon="window-maximize" href="/el/widget/overview">
    Λεπτομέρειες ενσωμάτωσης React / hook / CDN.
  </Card>
  <Card title="Δυναμική διαμόρφωση ανά κλήση" icon="bolt" href="/el/guides/dynamic-call-config">
    Υλοποιήστε τη ροή `mode="webhook"` από άκρο σε άκρο.
  </Card>
  <Card title="Αναφορά δημοσιεύσιμων κλειδιών" icon="key" href="/api-reference/publishable-keys">
    Κάθε πεδίο στον πόρο κλειδιού.
  </Card>
  <Card title="API συνεδριών μικροφώνου" icon="microphone" href="/api-reference/mic-sessions">
    Παραλείψτε το widget· χρησιμοποιήστε απευθείας το LiveKit για προσαρμοσμένα UI.
  </Card>
</CardGroup>