Ενσωματώσιμο γραφικό στοιχείο φωνής

Προσθέστε έναν φωνητικό AI πράκτορα σε οποιονδήποτε ιστότοπο με λίγες γραμμές κώδικα

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

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

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

Πριν ενσωματώσετε το γραφικό στοιχείο, ολοκληρώστε αυτά τα τρία βήματα στο Πίνακας ελέγχου ThunderPhone:

1. Δημιουργία web widget

   Μεταβείτε στα Web Widgets στον πίνακα ελέγχου και δημιουργήστε ένα widget. Επιλέξτε τον πράκτορα που θέλετε να διαθέσετε. Κάθε widget έχει το δικό του δημοσιεύσιμο κλειδί (pk_live_...), το οποίο είναι ασφαλές να συμπεριληφθεί σε κώδικα πλευράς πελάτη· ο πράκτορας προσδιορίζεται από το κλειδί.

2. Ρύθμιση επιτρεπόμενων τομέων

   Στο ίδιο widget, προσθέστε τους τομείς όπου θα ενσωματωθεί. Υποστηρίζονται χαρακτήρες μπαλαντέρ (π.χ. *.example.com). Η λίστα εμποδίζει το widget να λειτουργεί όταν κάποιος αντιγράψει το κλειδί σας σε άλλον ιστότοπο· δεν αποτελεί έλεγχο ταυτότητας, καθώς ένα script εκτός προγράμματος περιήγησης μπορεί να στείλει οποιαδήποτε κεφαλίδα Origin. Το localhost δεν επιτρέπεται αυτόματα στην παραγωγή: προσθέστε το στη λίστα για τοπικές δοκιμές με το API παραγωγής.

3. Επιλογή παρακάμψεων προγράμματος περιήγησης

   Αν η σελίδα σας ορίζει language, voice ή context, ενεργοποιήστε το καθένα στην ενότητα Παρακάμψεις προγράμματος περιήγησης. Τα νέα widgets δεν δέχονται καμία και ένα αίτημα συνεδρίας που περιέχει ρύθμιση η οποία είναι απενεργοποιημένη αποτυγχάνει με 400 override_not_allowed. Δείτε τις Παρακάμψεις προγράμματος περιήγησης.

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

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

npm install @thunderphone/widget

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

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 εμφάνισης:

<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
/>

<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
  theme="dark"
  primaryColor="#8b5cf6"
  title="Ask our AI"
/>

Τρεις ακόμη ιδιότητες προσαρμόζουν τη συνεδρία αντί για την εμφάνιση -- όλες προωθούνται στο αίτημα συνεδρίας όταν ξεκινά μια κλήση. Κάθε μία λειτουργεί μόνο όταν το δημοσιεύσιμο κλειδί του widget το επιτρέπει στις Παρακάμψεις προγράμματος περιήγησης· διαφορετικά, το αίτημα συνεδρίας αποτυγχάνει με 400 override_not_allowed:

Δείτε την αναφορά στοιχείου React για τον πλήρη πίνακα props.

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

Κάθε συνομιλία στο widget είναι μια κλήση. Υπολογίζεται στο όριο ταυτόχρονων κλήσεων του οργανισμού σας (20 κλήσεις σε εξέλιξη από προεπιλογή, κοινό με τηλεφωνικές και άλλες κλήσεις) και σε ένα όριο widget 25 ενεργών συνεδριών (ή στο όριο ταυτόχρονων κλήσεών σας, αν είναι υψηλότερο). Σε οποιοδήποτε από τα δύο όρια, μια νέα συνομιλία δεν μπορεί να ξεκινήσει μέχρι να ολοκληρωθεί μια κλήση.

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

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

Στυλ#

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