CDN / Ετικέτα Script

Η έκδοση CDN περιλαμβάνει εσωτερικά το React, ώστε να μπορείτε να χρησιμοποιείτε το widget σε στατικούς ιστότοπους, WordPress, Webflow ή οποιαδήποτε σελίδα όπου μπορείτε να προσθέσετε HTML. Δεν απαιτούνται npm, bundler ή framework.

URL CDN

<link rel="stylesheet" href="https://cdn.thunderphone.com/widget/latest/style.css" />
<script src="https://cdn.thunderphone.com/widget/latest/widget.js"></script>

<!-- Each stable release also publishes an immutable /widget/vX.Y.Z/ path
     matching the @thunderphone/widget npm version (v1.1.2 at the time of
     writing). If you pin, you own updating the URL for new releases. -->
<link rel="stylesheet" href="https://cdn.thunderphone.com/widget/v1.1.2/style.css" />
<script src="https://cdn.thunderphone.com/widget/v1.1.2/widget.js"></script>

Βασική χρήση

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.thunderphone.com/widget/latest/style.css" />
</head>
<body>

  <div id="thunderphone"></div>

  <script src="https://cdn.thunderphone.com/widget/latest/widget.js"></script>
  <script>
    ThunderPhone.mount({
      element: '#thunderphone',
      publishableKey: 'pk_live_your_publishable_key',
    })
  </script>

</body>
</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 με μεθόδους εκκαθάρισης:

<script>
  var widget = ThunderPhone.mount({
    element: '#thunderphone',
    publishableKey: 'pk_live_your_publishable_key',
  })

  // Later, when you want to remove the widget:
  widget.unmount()

  // Or equivalently:
  widget.destroy()
</script>

Τα unmount() και destroy() κάνουν το ίδιο — αποσυνδέουν κάθε ενεργή φωνητική συνεδρία και αφαιρούν το widget από το DOM. Χρησιμοποιήστε όποιο ταιριάζει καλύτερα στον κώδικά σας.

Παραδείγματα

Σκούρο θέμα με προσαρμοσμένο χρώμα

<div id="thunderphone"></div>

<link rel="stylesheet" href="https://cdn.thunderphone.com/widget/latest/style.css" />
<script src="https://cdn.thunderphone.com/widget/latest/widget.js"></script>
<script>
  ThunderPhone.mount({
    element: '#thunderphone',
    publishableKey: 'pk_live_your_publishable_key',
    theme: 'dark',
    primaryColor: '#8b5cf6',
    title: 'Talk to our AI',
  })
</script>

Προσαρμοσμένη θέση

<div id="thunderphone"></div>

<script src="https://cdn.thunderphone.com/widget/latest/widget.js"></script>
<script>
  ThunderPhone.mount({
    element: '#thunderphone',
    publishableKey: 'pk_live_your_publishable_key',
    position: 'bottom-left',
  })
</script>

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

<div id="thunderphone"></div>

<link rel="stylesheet" href="https://cdn.thunderphone.com/widget/latest/style.css" />
<script src="https://cdn.thunderphone.com/widget/latest/widget.js"></script>
<script>
  ThunderPhone.mount({
    element: '#thunderphone',
    publishableKey: 'pk_live_your_publishable_key',
    onConnect: function () {
      console.log('Call started')
    },
    onDisconnect: function () {
      console.log('Call ended')
    },
    onError: function (error) {
      console.error('Widget error:', error.error, error.message)
    },
  })
</script>

Με ήχο κλήσης

<div id="thunderphone"></div>

<link rel="stylesheet" href="https://cdn.thunderphone.com/widget/latest/style.css" />
<script src="https://cdn.thunderphone.com/widget/latest/widget.js"></script>
<script>
  ThunderPhone.mount({
    element: '#thunderphone',
    publishableKey: 'pk_live_your_publishable_key',
    ringtone: true, // or a custom URL: 'https://example.com/ringtone.mp3'
  })
</script>

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

<div id="thunderphone"></div>

<script src="https://cdn.thunderphone.com/widget/latest/widget.js"></script>
<script>
  var container = document.getElementById('thunderphone')

  ThunderPhone.mount({
    element: container,
    publishableKey: 'pk_live_your_publishable_key',
  })
</script>

Ενσωμάτωση WordPress / CMS

Προσθέστε το παρακάτω σε ένα προσαρμοσμένο μπλοκ HTML ή στο υποσέλιδο του θέματός σας:

<link rel="stylesheet" href="https://cdn.thunderphone.com/widget/latest/style.css" />
<script src="https://cdn.thunderphone.com/widget/latest/widget.js"></script>

<div id="thunderphone-widget"></div>
<script>
  ThunderPhone.mount({
    element: '#thunderphone-widget',
    publishableKey: 'pk_live_your_publishable_key',
  })
</script>

Αντιμετώπιση προβλημάτων

Το widget δεν εμφανίζεται

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

Το ThunderPhone δεν είναι ορισμένο

Το script δεν έχει φορτωθεί ακόμη. Βεβαιωθείτε ότι το tag <script> για το widget.js εμφανίζεται πριν από την κλήση mount ή περικλείστε την κλήση mount σε έναν ακροατή DOMContentLoaded.

Σφάλμα μη επιτρεπόμενου domain

Προσθέστε το domain σας στη λίστα επιτρεπόμενων domain στις ρυθμίσεις Προγραμματιστές στο app.thunderphone.com. Να θυμάστε ότι το localhost επιτρέπεται πάντα.

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

Στυλ

Προσαρμόστε την εμφάνιση του widget με προσαρμοσμένες ιδιότητες CSS.

Στοιχείο React

Χρησιμοποιείτε React; Η ενσωμάτωση του στοιχείου είναι απλούστερη.