---
title: "Ενσωματώσιμο γραφικό στοιχείο φωνής"
description: "Προσθέστε έναν φωνητικό AI πράκτορα σε οποιονδήποτε ιστότοπο με λίγες γραμμές κώδικα"
---

Το ενσωματώσιμο φωνητικό γραφικό στοιχείο του ThunderPhone επιτρέπει στους επισκέπτες του ιστότοπού σας να μιλούν με έναν AI πράκτορα απευθείας από το πρόγραμμα περιήγησης. Δεν απαιτείται τηλεφωνική κλήση -- οι χρήστες κάνουν κλικ σε ένα κουμπί και ξεκινούν μια φωνητική συνομιλία σε πραγματικό χρόνο με την υποστήριξη του ThunderPhone.

Το γραφικό στοιχείο εμφανίζεται ως γυάλινη μπάρα που προσαρμόζεται σε φωτεινά και σκούρα θέματα, με προσαρμόσιμα χρώματα έμφασης και θέση. Διανέμεται ως πακέτο npm `@thunderphone/widget` και είναι επίσης διαθέσιμο μέσω CDN για περιβάλλοντα χωρίς bundler.

<Frame>
  <img src="/images/widget-showcase.png" alt="Γραφικό στοιχείο ThunderPhone σε φωτεινά και σκούρα θέματα με διάφορα χρώματα έμφασης" />
</Frame>

## Προϋποθέσεις

Πριν ενσωματώσετε το γραφικό στοιχείο, ολοκληρώστε αυτά τα τρία βήματα στο [Πίνακας ελέγχου ThunderPhone](https://app.thunderphone.com):

<Steps>
<Step title="Δημιουργήστε ένα δημοσιεύσιμο κλειδί API">
  Μεταβείτε στους **Προγραμματιστές** στις ρυθμίσεις του πίνακα ελέγχου και δημιουργήστε ένα δημοσιεύσιμο κλειδί. Τα δημοσιεύσιμα κλειδιά ξεκινούν με `pk_live_` και είναι ασφαλές να συμπεριλαμβάνονται σε κώδικα πλευράς πελάτη.
</Step>

<Step title="Ρυθμίστε τους επιτρεπόμενους τομείς">
  Στις ίδιες ρυθμίσεις Προγραμματιστών, προσθέστε τους τομείς όπου θα ενσωματωθεί το γραφικό στοιχείο. Το `localhost` επιτρέπεται πάντα για ανάπτυξη. Υποστηρίζονται χαρακτήρες μπαλαντέρ (π.χ., `*.example.com`).
</Step>

<Step title="Δημιουργήστε ένα γραφικό στοιχείο ιστού">
  Μεταβείτε στα **Γραφικά στοιχεία ιστού** στον πίνακα ελέγχου και δημιουργήστε ένα γραφικό στοιχείο. Επιλέξτε τον πράκτορα που θέλετε να διαθέσετε και το δημοσιεύσιμο κλειδί που θα χρησιμοποιήσετε. Ο πράκτορας επιλύεται αυτόματα από τη διαμόρφωση του δημοσιεύσιμου κλειδιού σας.
</Step>
</Steps>

<Warning>
  Τα δημοσιεύσιμα κλειδιά (`pk_live_...`) **δεν** είναι το ίδιο με τα μυστικά διακριτικά API σας. Τα δημοσιεύσιμα κλειδιά έχουν σχεδιαστεί για χρήση πλευράς πελάτη και περιορίζονται σε συνεδρίες γραφικού στοιχείου στους επιτρεπόμενους τομείς σας. Μην χρησιμοποιείτε ποτέ το μυστικό διακριτικό API σας σε κώδικα πλευράς πελάτη.
</Warning>

---

## Γρήγορη έναρξη

Εγκαταστήστε το πακέτο:

```bash
npm install @thunderphone/widget
```

Προσθέστε το γραφικό στοιχείο στην εφαρμογή σας:

```tsx
import { ThunderPhoneWidget } from '@thunderphone/widget'
import '@thunderphone/widget/style.css'

function App() {
  return (
    <ThunderPhoneWidget
      publishableKey="pk_live_your_publishable_key"
      theme="dark"
      primaryColor="#8b5cf6"
    />
  )
}
```

Αυτό ήταν. Οι χρήστες σας θα βλέπουν μια γυάλινη μπάρα κλήσης που τους συνδέει με τον AI πράκτορά σας με ένα μόνο κλικ.

---

## Προσαρμογή

Το γραφικό στοιχείο διαθέτει τέσσερα props εμφάνισης:

| Prop | Προεπιλογή | Περιγραφή |
|------|---------|-------------|
| `theme` | `'light'` | `'light'` για λευκό γυαλί, `'dark'` για σκούρο γυαλί |
| `primaryColor` | `'#000000'` (φωτεινό) / `'#ffffff'` (σκούρο) | Χρώμα έμφασης για το κουμπί έναρξης, την κυματομορφή και την ένδειξη σύνδεσης |
| `title` | `'Voice assistant'` | Κείμενο που εμφανίζεται στο γραφικό στοιχείο |
| `position` | `'bottom-right'` | Γωνία παραθύρου προβολής: `'bottom-right'`, `'bottom-left'`, `'top-right'`, `'top-left'` |

<CodeGroup>
```tsx Light theme (default)
<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
/>
```

```tsx Dark theme with custom color
<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
  theme="dark"
  primaryColor="#8b5cf6"
  title="Ask our AI"
/>
```
</CodeGroup>

Τρία ακόμη props προσαρμόζουν τη συνεδρία και όχι την εμφάνιση -- όλα προωθούνται στο αίτημα συνεδρίας όταν ξεκινά μια κλήση:

| Prop | Περιγραφή |
|------|-------------|
| `language` | Παράκαμψη γλώσσας ανά συνεδρία -- ένας κωδικός ή τοπική ρύθμιση, όπως `en`, `es` ή `fr-FR` |
| `voice` | Παράκαμψη φωνής ανά συνεδρία -- ένα όνομα φωνής, όπως `maria` |
| `context` | Πραγματολογικό περιεχόμενο σελίδας ή ιστότοπου που μεταβιβάζεται στον πράκτορα (περικόπτεται στην πλευρά διακομιστή σε 12.000 χαρακτήρες) |

Δείτε την [αναφορά στοιχείου React](/el/widget/react) για τον πλήρη πίνακα props.

Για ένα πλήρως προσαρμοσμένο περιβάλλον χρήστη, χρησιμοποιήστε το [headless hook](/el/widget/headless-hook) για να διαχειριστείτε τη φωνητική συνεδρία ενώ δημιουργείτε τη δική σας διεπαφή. Το hook παρέχει επίπεδα ήχου σε πραγματικό χρόνο για τη δημιουργία οπτικοποιήσεων που αντιδρούν στον ήχο.

---

## Επιλογές ενσωμάτωσης

Επιλέξτε τη μέθοδο ενσωμάτωσης που ταιριάζει στη στοίβα σας:

<CardGroup cols={3}>
  <Card title="Στοιχείο React" icon="react" href="/el/widget/react">
    Έτοιμο στοιχείο UI με ενσωματωμένα στοιχεία ελέγχου κλήσης και εμφάνιση κατάστασης. Εισαγάγετε, περάστε props, έτοιμο.
  </Card>
  <Card title="Headless Hook" icon="code" href="/el/widget/headless-hook">
    Πλήρης έλεγχος του UI. Το hook `useThunderPhone` διαχειρίζεται τη φωνητική συνεδρία ενώ δημιουργείτε τη δική σας διεπαφή.
  </Card>
  <Card title="CDN / Ετικέτα script" icon="globe" href="/el/widget/cdn-script-tag">
    Δεν απαιτείται bundler. Φορτώστε το widget μέσω ετικέτας script για στατικούς ιστότοπους, WordPress και άλλα περιβάλλοντα εκτός React.
  </Card>
</CardGroup>

---

## Στυλ

Το widget διαθέτει ενσωματωμένα ανοιχτά και σκούρα θέματα που ελέγχονται από το prop `theme`, καθώς και χρώμα έμφασης που ελέγχεται από το prop `primaryColor`. Για πιο εκτεταμένη προσαρμογή, μπορείτε να παρακάμψετε προσαρμοσμένες ιδιότητες και κλάσεις CSS. Δείτε τον [οδηγό στυλ](/el/widget/styling) για λεπτομέρειες.

<Note>
  Χρειάζεστε βοήθεια; Επικοινωνήστε μαζί μας στο [support@thunderphone.com](mailto:support@thunderphone.com)
</Note>