# Website Widget

Το widget βάζει τον agent σας στον δικό σας ιστότοπο, ως φυσαλίδα συνομιλίας και φωνής. Οι επισκέπτες γράφουν ή μιλούν στον ίδιο agent που απαντά στο τηλέφωνό σας, με τις ίδιες οδηγίες, γνώσεις, εργαλεία και ροές. Παίρνετε επίσης έναν **σύνδεσμο δοκιμής**: μια σελίδα όπου οποιοσδήποτε μιλά με τον agent, πριν μπει το widget στον ιστότοπο.

Όλα γίνονται από την εφαρμογή ή από το Claude και το ChatGPT, χωρίς να ανοίξετε την εφαρμογή.

  <ShotPlaceholder
    src="/assets/agent-configuration/website-widget.png"
    name="website-widget"
    alt="Agent, Channels, Website Widget με Embed & share και Live preview"
    capture="Agent → Channels → Website Widget, widget ενεργό, κάρτα Embed & share ορατή."
  />

## Πρώτη ρύθμιση

1. **Ενεργοποιήστε το widget**

   Ανοίξτε τον agent → **Channels** → **Website Widget** και ενεργοποιήστε τον διακόπτη. Όσο είναι ανενεργό, ο σύνδεσμος δοκιμής γράφει *This assistant isn't available right now* και το widget δεν φορτώνει στον ιστότοπο.

2. **Δοκιμάστε τον σύνδεσμο**

   **Embed & share** → **Shareable page link** → **Open**. Ο σύνδεσμος είναι `https://app.voicelogica.ai/w/<agent id>`. Ρωτήστε τον agent ό,τι ρωτούν συνήθως οι πελάτες. Τον ίδιο σύνδεσμο μπορείτε να τον στείλετε σε πελάτες με email, SMS ή Viber.

3. **Βάλτε το στον ιστότοπο**

   **Embed & share** → **Add to your website** → **Copy**. Ο κώδικας είναι δύο γραμμές:

   ```html
   <voice-logica-agent agent-id="<agent id>"></voice-logica-agent>
   <script src="https://api.voicelogica.ai/widget/embed.js" async type="text/javascript"></script>
   ```

   Επικολλήστε τον πριν το `</body>` σε όλες τις σελίδες. Σε WordPress, με ένα plugin για header και footer, στο πεδίο του footer. Σε Wix, Shopify ή Joomla, στη ρύθμιση για custom code ή footer scripts.

4. **Κλειδώστε το στο domain σας**

   **Allowed domains**: προσθέστε το hostname του ιστότοπου, π.χ. `example.com`. Αφήστε ενεργό το **Also allow www. variant** αν ο ιστότοπος απαντά και στο `www.`. Με κενή λίστα, οποιοσδήποτε ιστότοπος μπορεί να βάλει τον agent σας και να χρησιμοποιεί τις συνομιλίες του πακέτου σας.

   Ο σύνδεσμος δοκιμής λειτουργεί πάντα, ό,τι κι αν γράφει η λίστα.

5. **Ταιριάξτε την εμφάνιση**

   Στο **Appearance** ορίζετε μέγεθος, γωνία της οθόνης, χρώματα και εικόνα. Το **Live preview** δείχνει το αποτέλεσμα πριν την αποθήκευση.

6. **Επιβεβαιώστε**

   Ανοίξτε τον ιστότοπο σε ιδιωτικό παράθυρο, ανοίξτε τη φυσαλίδα και κάντε μια πραγματική ερώτηση. Η συνομιλία εμφανίζεται στις **Calls** με το κείμενο και τα αποτελέσματά της.

## Σύνδεσμοι στις απαντήσεις του agent

Για λόγους ασφάλειας, ένας σύνδεσμος σε απάντηση είναι ενεργός μόνο αν ο τομέας του υπάρχει στη λίστα **Τομείς ενεργών συνδέσμων** (**Website Widget** → **Interface**). Οποιοσδήποτε άλλος σύνδεσμος εμφανίζεται διαγραμμένος και δεν πατιέται. Με κενή λίστα, που είναι η προεπιλογή, κανένας σύνδεσμος δεν είναι ενεργός.

- Προσθέστε κάθε τομέα στον οποίο μπορεί να παραπέμπει ο agent, π.χ. `example.com` και `hihello.com`. Η αντιστοίχιση είναι ακριβής: το `example.com` δεν καλύπτει το `shop.example.com`, οπότε προσθέστε και αυτό.
- Το **Επιτρέψτε επίσης το www. για αυτούς τους τομείς** (ενεργό από προεπιλογή) κάνει το `example.com` να καλύπτει και το `www.example.com`.
- Το **Να επιτρέπονται και σύνδεσμοι http://** αφορά μόνο ιστότοπους χωρίς https. Δεν ενεργοποιεί κανέναν σύνδεσμο από μόνο του: ο τομέας πρέπει να είναι στη λίστα.

Από το Claude: `update_agent_settings`, section `widget`, `{ "interface": { "markdownAllowedDomains": ["example.com", "hihello.com"] } }`.

## Από το Claude ή το ChatGPT

Με [συνδεδεμένο το Voice Logica](https://docs.voicelogica.ai/el/integrations/claude-chatgpt/), ζητήστε απλά: *«Ενεργοποίησε το chat στον ιστότοπο για τον agent μου και δώσε μου τον κώδικα.»*

- Το `update_agent_settings` με section `widget` και `{ "enabled": true }` το ενεργοποιεί. Αν δεν δώσετε domains, κλειδώνει στον ιστότοπο του προφίλ της εταιρείας. Η απάντηση περιέχει τον **σύνδεσμο δοκιμής** και τον **κώδικα ενσωμάτωσης**.
- Το `get_agent_settings` με section `widget` επιστρέφει τον ίδιο σύνδεσμο και κώδικα, και τις τρέχουσες ρυθμίσεις.
- Το `test_in_browser` επιστρέφει τον σύνδεσμο δοκιμής και τον κώδικα, και ενεργοποιεί το widget αν ήταν ανενεργό.

Domains, χρώματα, θέση και πεδία πριν τη συνομιλία αλλάζουν με τον ίδιο τρόπο, π.χ. `{ "allowedDomains": ["example.com"] }` ή `{ "styling": { "placement": "bottom-left" } }`.

## Ταυτοποίηση επισκεπτών

Το **Caller verification** ζητά email ή κινητό πριν ξεκινήσει η συνομιλία και μπορεί να το επιβεβαιώσει με κωδικό (ο κωδικός SMS λειτουργεί για ελληνικά και κυπριακά κινητά). Ενεργοποιήστε το **Actions need a verified visitor** όταν ο agent δημιουργεί παραγγελίες, ραντεβού ή αιτήματα: όσοι δεν επιβεβαιώθηκαν μπορούν μόνο να κάνουν ερωτήσεις.

Οι τιμές φτάνουν στον agent ως μεταβλητές, οπότε ένας υφιστάμενος πελάτης αναγνωρίζεται όπως και στο τηλέφωνο.

## Τηλέφωνο και συνομιλία στον ίδιο Βοηθό

Ο ίδιος Βοηθός μπορεί να απαντά στο τηλέφωνο και στη συνομιλία της ιστοσελίδας με διαφορετικούς κανόνες σε κάθε περίπτωση. Ο Βοηθός ήδη γνωρίζει πότε η συνομιλία είναι γραπτή: εκεί δεν λαμβάνει τους κανόνες αναγνώρισης ομιλίας και προφορικού ύφους. Για δικούς σας κανόνες, χρησιμοποιήστε τη μεταβλητή **`{{serviceType}}`** στο prompt:

| Συνομιλία | `{{serviceType}}` |
|---|---|
| Γραπτή συνομιλία στην ιστοσελίδα, WhatsApp, Viber, Messenger, Instagram | `message` |
| Φωνή στην ιστοσελίδα (ομιλία μέσα από τη φυσαλίδα) | `websocket` |
| Τηλεφωνική κλήση | κενή |

Γράψτε τον κανόνα με απλά λόγια, για παράδειγμα:

> Ο τύπος συνομιλίας είναι "`{{serviceType}}`". Αν είναι "message", ο πελάτης γράφει: μη ζητάς να συλλαβίσει ή να επαναλάβει email, όνομα ή αριθμό που έχει ήδη γράψει, και στείλε συνδέσμους και στοιχεία μέσα στη συνομιλία αντί για SMS. Διαφορετικά ο πελάτης μιλά: επιβεβαίωσε το email διαβάζοντάς το, ή πρότεινε να του σταλεί SMS ώστε να το γράψει.

Στο WhatsApp, στο Viber, στο Messenger και στο Instagram κάθε σύνδεση έχει επίσης δικές της **οδηγίες καναλιού**, τις οποίες ο Βοηθός διαβάζει μόνο σε εκείνο το κανάλι.

## Συνέχεια από άνθρωπο

Όταν ο επισκέπτης ζητήσει άνθρωπο, ο agent μπορεί να δώσει την ίδια συνομιλία σε συνεργάτη. Χρειάζεται **Transfer** στον agent και **Provide chat support** στον συνεργάτη. Δείτε το [Live Support](https://docs.voicelogica.ai/telephony/live-support/).

## Χρέωση

Ένα **chat session** καλύπτει έναν επισκέπτη για 24 ώρες, ανεξάρτητα από τον αριθμό των μηνυμάτων, μαζί με τη μεταφορά σε συνεργάτη. Όταν τελειώσουν, οι νέες συνομιλίες απορρίπτονται μέχρι να αγοράσετε πακέτο chat sessions. Δείτε [Πώς λειτουργούν οι χρεώσεις](https://docs.voicelogica.ai/el/getting-started/how-charges-work/).

**Ο σύνδεσμος δοκιμής λέει ότι ο βοηθός δεν είναι διαθέσιμος**
Το widget είναι ανενεργό. Ενεργοποιήστε το στο **Website Widget** ή ζητήστε από το Claude να το ενεργοποιήσει.

**Η φυσαλίδα δεν εμφανίζεται στον ιστότοπο**
Ελέγξτε ότι το hostname του ιστότοπου είναι στα **Allowed domains** (ή ότι η λίστα είναι κενή), ότι ο κώδικας υπάρχει στη σελίδα που βλέπετε, και ότι κάποιο cache plugin δεν σερβίρει παλιό αντίγραφο της σελίδας.

**Μπορώ να βάλω τον ίδιο agent σε δύο ιστότοπους;**
Ναι. Προσθέστε και τα δύο hostnames στα **Allowed domains** και βάλτε τον ίδιο κώδικα και στους δύο.

**Μπορεί η συνομιλία να εμφανίσει φόρμα όταν ο επισκέπτης ζητά άνθρωπο και δεν υπάρχει διαθέσιμος συνεργάτης;**
Δεν υπάρχει φόρμα μέσα στη συνομιλία. Όταν ο επισκέπτης ζητά άνθρωπο, το [Live Support](https://docs.voicelogica.ai/telephony/live-support/) προσφέρει τη συνομιλία σε συνεργάτη που είναι συνδεδεμένος. Αν κανείς δεν την αναλάβει, το AI το λέει και καταγράφει το μήνυμα στην ίδια συνομιλία: ρωτά το όνομα, ένα email ή τηλέφωνο και το θέμα, μία ερώτηση κάθε φορά. Δεν χρειάζεται νέα συνεδρία ούτε φόρμα πριν από τη συνομιλία.

Για να φτάνει κάθε τέτοιο μήνυμα στην ομάδα σας ως εργασία, ενεργοποιήστε το **Auto-create tasks** στα [Call results](https://docs.voicelogica.ai/el/agent-configuration/call-results/). Η εργασία περιέχει τα στοιχεία που έδωσε ο επισκέπτης.

**Ένας σύνδεσμος στη συνομιλία εμφανίζεται διαγραμμένος και δεν πατιέται**
Ο τομέας του δεν είναι στους **Τομείς ενεργών συνδέσμων**. Προσθέστε τον εκεί, π.χ. `hihello.com`, και αποθηκεύστε. Η ενεργοποίηση του **Να επιτρέπονται και σύνδεσμοι http://** από μόνη της δεν αρκεί. Δείτε [Σύνδεσμοι στις απαντήσεις του agent](#σύνδεσμοι-στις-απαντήσεις-του-agent).