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

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

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

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

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

1. Δημιουργήστε ένα δημοσιεύσιμο κλειδί API

   Μεταβείτε στους Προγραμματιστές στις ρυθμίσεις του πίνακα ελέγχου και δημιουργήστε ένα δημοσιεύσιμο κλειδί. Τα δημοσιεύσιμα κλειδιά ξεκινούν με pk_live_ και είναι ασφαλές να συμπεριλαμβάνονται σε κώδικα πλευράς πελάτη.

2. Ρυθμίστε τους επιτρεπόμενους τομείς

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

3. Δημιουργήστε ένα γραφικό στοιχείο ιστού

   Μεταβείτε στα Γραφικά στοιχεία ιστού στον πίνακα ελέγχου και δημιουργήστε ένα γραφικό στοιχείο. Επιλέξτε τον πράκτορα που θέλετε να διαθέσετε και το δημοσιεύσιμο κλειδί που θα χρησιμοποιήσετε. Ο πράκτορας επιλύεται αυτόματα από τη διαμόρφωση του δημοσιεύσιμου κλειδιού σας.

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

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

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"
/>

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

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

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

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

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

Στυλ

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