Ενσωματώστε το widget ιστού

Το γραφικό στοιχείο ιστού προσφέρει στους επισκέπτες του ιστότοπού σας μια συνομιλία με κλικ για ομιλία με έναν AI πράκτορα, χρησιμοποιώντας το μικρόφωνο του προγράμματος περιήγησης. Πρόκειται για ξεχωριστό JavaScript / React SDK με τη δική του αναφορά SDK — αυτός ο οδηγός εστιάζει στη ρύθμιση στην πλευρά του ThunderPhone που χρειάζεται το γραφικό στοιχείο.

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

1. Δημιουργήστε έναν πράκτορα

   Ο πράκτορας του οποίου η προτροπή και η φωνή θα εκτελούν τη συνεδρία του γραφικού στοιχείου. Ορίστε widget_enabled: true (η προεπιλογή).

2. Επιλέξτε τη λειτουργία δρομολόγησης
   • mode="agent" — ένας στατικός πράκτορας ανά κλειδί. Η απλούστερη επιλογή.
   • mode="webhook" — ο διακομιστής σας επιλέγει τον πράκτορα ανά επισκέπτη μέσω ενός webhook web.incoming. Χρησιμοποιήστε το για συνδεδεμένους χρήστες, δοκιμές A/B ή δρομολόγηση ανά σελίδα.
3. Καταγράψτε τα επιτρεπόμενα domain

   Τα δημοσιεύσιμα κλειδιά είναι κλειδωμένα στην προέλευση. Πρέπει να ονομάσετε κάθε όνομα κεντρικού υπολογιστή που θα ενσωματώνει το γραφικό στοιχείο. Τα localhost / 127.0.0.1 επιτρέπονται πάντα κατά την τοπική ανάπτυξη.

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

curl -X POST https://api.thunderphone.com/v1/publishable-key \
  -H "Authorization: Bearer sk_live_YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "name":            "Marketing site (prod)",
    "mode":            "agent",
    "agent_id":        12,
    "allowed_domains": ["example.com", "*.example.com"]
  }'

curl -X POST https://api.thunderphone.com/v1/publishable-key \
  -H "Authorization: Bearer sk_live_YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "name":            "Support (dynamic)",
    "mode":            "webhook",
    "webhook_url":     "https://example.com/thunderphone/widget-hook",
    "allowed_domains": ["support.example.com"]
  }'

Η απόκριση περιλαμβάνει ένα key που αρχίζει με pk_live_.... Τα δημοσιεύσιμα κλειδιά είναι δημόσια από σχεδιασμό — είναι ασφαλές να τα συμπεριλάβετε στο πακέτο του front-end σας. Δείτε την αναφορά δημοσιεύσιμων κλειδιών για όλα τα πεδία.

Προσθέστε το γραφικό στοιχείο στον ιστότοπό σας

Τρεις επιλογές ενσωμάτωσης καλύπτονται στην τεκμηρίωση SDK του γραφικού στοιχείου:

Και οι τρεις δέχονται το ίδιο publishableKey και αποδίδουν το κουμπί μικροφώνου μαζί με το στοιχείο ήχου εντός κλήσης.

Το context του γραφικού στοιχείου περικόπτεται στους 12.000 χαρακτήρες (περίπου 3.400 tokens τυπικού αγγλικού κειμένου) και προσμετράται στην προσαύξηση μεγέθους προτροπής.

Webhook λειτουργίας γραφικού στοιχείου

Όταν mode="webhook", το ThunderPhone καλεί το webhook_url σας σε κάθε έναρξη συνεδρίας με ένα ωφέλιμο φορτίο web.incoming. Επιστρέψτε τη διαμόρφωση πράκτορα που θέλετε να εκτελείται για εκείνον τον επισκέπτη — ακολουθεί το ίδιο σχήμα απόκρισης με τις τηλεφωνικές κλήσεις:

{
  "prompt":  "You are a VIP concierge for Jane Doe.",
  "voice":   "john",
  "product": "storm-base",
  "tools":   [ /* per-customer tools */ ]
}

Μπορείτε να συνδυάσετε context από τη δική σας συνεδρία (ποιος πελάτης περιηγείται, σε ποια σελίδα βρίσκεται) στην προτροπή και να αλλάζετε πράκτορες ανά ανάπτυξη.

Παρακολουθήστε τις συνεδρίες

Οι συνεδρίες του widget εμφανίζονται στο GET /v1/calls με direction="widget" — με την ίδια απομαγνητοφώνηση, εγγραφή, αξιολόγηση και χρέωση όπως οι τηλεφωνικές κλήσεις. Φιλτράρετε με βάση το direction για να δημιουργήσετε έναν πίνακα ελέγχου μόνο για το widget.

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