--- title: "CDN / Ετικέτα Script" description: "Προσθέστε το φωνητικό widget του ThunderPhone σε οποιονδήποτε ιστότοπο χωρίς bundler" --- Η έκδοση CDN περιλαμβάνει εσωτερικά το React, ώστε να μπορείτε να χρησιμοποιείτε το widget σε στατικούς ιστότοπους, WordPress, Webflow ή οποιαδήποτε σελίδα όπου μπορείτε να προσθέσετε HTML. Δεν απαιτούνται npm, bundler ή framework. ## URL CDN ```html Latest (recommended) ``` ```html Pinned version ``` Τα URL `latest` είναι αυτά που παράγει η γεννήτρια αποσπάσματος ενσωμάτωσης του πίνακα ελέγχου. Αποθηκεύονται στην προσωρινή μνήμη για 5 λεπτά και λαμβάνουν αυτόματα νέες σταθερές εκδόσεις. Οι σταθεροποιημένες διαδρομές `/widget/vX.Y.Z/` είναι αμετάβλητες και αποθηκεύονται μακροπρόθεσμα στην προσωρινή μνήμη -- αν σταθεροποιήσετε μια έκδοση, αντιστοιχίστε την έκδοση με την έκδοση npm `@thunderphone/widget` για την οποία αναπτύσσετε. --- ## Βασική χρήση ```html

``` Το widget προσαρτάται στο στοιχείο στόχου και αποδίδεται ως **γραμμή σταθερής θέσης σε μια γωνία του παραθύρου προβολής** (προεπιλογή `bottom-right`, ελέγχεται από την επιλογή `position`). Το στοιχείο προσάρτησης είναι μόνο η ρίζα React -- η θέση του στη σελίδα δεν επηρεάζει το σημείο εμφάνισης του widget. --- ## Επιλογές προσάρτησης Το `ThunderPhone.mount()` δέχεται τις ίδιες επιλογές με το στοιχείο React, καθώς και την ιδιότητα `element`: | Επιλογή | Τύπος | Απαιτείται | Προεπιλογή | Περιγραφή | |--------|------|----------|---------|-------------| | `element` | `string \| HTMLElement` | Ναι | -- | Επιλογέας CSS (π.χ. `'#thunderphone'`) ή αναφορά σε στοιχείο DOM. | | `publishableKey` | `string` | Ναι | -- | Δημοσιεύσιμο κλειδί API (`pk_live_...`). Ο πράκτορας καθορίζεται αυτόματα από τη διαμόρφωση widget του κλειδιού. | | `theme` | `'light' \| 'dark'` | Όχι | `'light'` | Χρωματικό σχήμα. | | `primaryColor` | `string` | Όχι | `'#000000'` (ανοιχτό) / `'#ffffff'` (σκούρο) | Συμβολοσειρά χρώματος CSS που χρησιμοποιείται ως χρώμα έμφασης. | | `title` | `string` | Όχι | `'Voice assistant'` | Κείμενο που εμφανίζεται στη γραμμή του widget. | | `position` | `'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left'` | Όχι | `'bottom-right'` | Σταθερή θέση στο παράθυρο προβολής. | | `apiBase` | `string` | Όχι | `'https://api.thunderphone.com/v1'` | Παράκαμψη βασικού URL API. | | `language` | `string` | Όχι | -- | Παράκαμψη γλώσσας ανά συνεδρία -- κωδικός γλώσσας ή τοπικές ρυθμίσεις, όπως `en`, `es` ή `fr-FR`. Όταν δεν ορίζεται, εφαρμόζεται η διαμορφωμένη γλώσσα του πράκτορα. | | `voice` | `string` | Όχι | -- | Παράκαμψη φωνής ανά συνεδρία -- όνομα φωνής, όπως `maria`. Όταν δεν ορίζεται, εφαρμόζεται η διαμορφωμένη φωνή του πράκτορα. | | `context` | `string` | Όχι | -- | Πραγματικό περιεχόμενο σελίδας ή ιστότοπου ανά συνεδρία που μεταβιβάζεται στον πράκτορα. Περικόπτεται από την πλευρά του διακομιστή σε 12.000 χαρακτήρες. | | `onConnect` | `() => void` | Όχι | -- | Καλείται όταν συνδέεται η φωνητική συνεδρία. | | `onDisconnect` | `() => void` | Όχι | -- | Καλείται όταν λήγει η συνεδρία. | | `onError` | `(error) => void` | Όχι | -- | Καλείται σε σφάλματα. Το σφάλμα διαθέτει τα πεδία `error` (κωδικός) και `message`. | | `ringtone` | `boolean \| string` | Όχι | `false` | Αναπαραγωγή ήχου κλήσης κατά τη σύνδεση. `true` για τον προεπιλεγμένο ήχο κλήσης ή συμβολοσειρά URL για προσαρμοσμένο ήχο. | --- ## Εκκαθάριση Το `ThunderPhone.mount()` επιστρέφει μια παρουσία του widget με μεθόδους εκκαθάρισης: ```html ``` Τα `unmount()` και `destroy()` κάνουν το ίδιο — αποσυνδέουν κάθε ενεργή φωνητική συνεδρία και αφαιρούν το widget από το DOM. Χρησιμοποιήστε όποιο ταιριάζει καλύτερα στον κώδικά σας. Να εκκαθαρίζετε πάντα το widget κατά την πλοήγηση εκτός εφαρμογών μίας σελίδας ή όταν αφαιρείται το στοιχείο που το περιέχει. Αυτό διασφαλίζει ότι οι ενεργές φωνητικές συνεδρίες αποσυνδέονται σωστά. --- ## Παραδείγματα ### Σκούρο θέμα με προσαρμοσμένο χρώμα ```html

``` ### Προσαρμοσμένη θέση ```html

``` ### Με επανακλήσεις συμβάντων ```html

``` ### Με ήχο κλήσης ```html

``` ### Χρήση αναφοράς στοιχείου DOM ```html

``` ### Ενσωμάτωση WordPress / CMS Προσθέστε το παρακάτω σε ένα προσαρμοσμένο μπλοκ HTML ή στο υποσέλιδο του θέματός σας: ```html ``` Το `

` μπορεί να τοποθετηθεί οπουδήποτε — είναι μόνο το σημείο προσάρτησης. Το ίδιο το widget αποδίδεται ως σταθερό επικάλυμμα σε μια γωνία του παραθύρου προβολής (που ορίζεται από την επιλογή `position`) και δεν ακολουθεί τη ροή του περιβάλλοντος περιεχομένου. --- ## Αντιμετώπιση προβλημάτων Βεβαιωθείτε ότι έχουν φορτωθεί και τα αρχεία CSS και JS. Ελέγξτε την κονσόλα του προγράμματος περιήγησης για σφάλματα δικτύου. Επιβεβαιώστε ότι το στοιχείο-στόχος υπάρχει στο DOM πριν καλέσετε το `ThunderPhone.mount()`. Το script δεν έχει φορτωθεί ακόμη. Βεβαιωθείτε ότι το tag `