أداة صوتية قابلة للتضمين

أضف وكيلاً صوتياً بالذكاء الاصطناعي إلى أي موقع ويب ببضعة أسطر من التعليمات البرمجية

تتيح أداة ThunderPhone الصوتية القابلة للتضمين لزوّار موقعك التحدث إلى وكيل ذكاء اصطناعي مباشرةً من المتصفح. لا حاجة إلى مكالمة هاتفية -- ينقر المستخدمون زرًا ويبدؤون محادثة صوتية في الوقت الفعلي مدعومة من ThunderPhone.

تُعرض الأداة كشريط بتأثير زجاجي يتكيف مع النسقين الفاتح والداكن، مع ألوان تمييز وموضع قابلين للتخصيص. تُوزَّع كحزمة npm باسم @thunderphone/widget، وهي متاحة أيضًا عبر CDN للبيئات التي لا تستخدم أدوات تجميع الحزم.

المتطلبات الأساسية#

قبل تضمين الأداة، أكمل هذه الخطوات الثلاث في لوحة تحكم ThunderPhone:

1. إنشاء أداة ويب

   انتقل إلى أدوات الويب في لوحة التحكم وأنشئ أداة. اختر الوكيل الذي تريد إتاحته. لكل أداة مفتاح قابل للنشر خاص بها (pk_live_...) وآمن تضمينه في التعليمات البرمجية من جهة العميل؛ يُحدَّد الوكيل من المفتاح.

2. تهيئة النطاقات المسموح بها

   في الأداة نفسها، أضف النطاقات التي ستُضمَّن فيها. تُدعَم أحرف البدل (مثل *.example.com). تمنع القائمة عمل الأداة عندما ينسخ شخص مفتاحك إلى موقع آخر؛ وهي ليست مصادقة، إذ يمكن لنص برمجي خارج المتصفح إرسال أي ترويسة Origin. لا يُسمح بـ localhost تلقائيًا في بيئة الإنتاج: أضِفه إلى القائمة للاختبار محليًا باستخدام واجهة برمجة التطبيقات للإنتاج.

3. اختيار تجاوزات المتصفح

   إذا كانت صفحتك تضبط language أو voice أو context، ففعّل كلًّا منها ضمن تجاوزات المتصفح. لا تقبل الأدوات الجديدة أيًا منها، ويفشل طلب الجلسة الذي يتضمن إعدادًا غير مفعّل بالخطأ 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"
    />
  )
}

هذا كل شيء. سيرى مستخدموك شريط اتصال بتأثير زجاجي يربطهم بوكيل الذكاء الاصطناعي الخاص بك بنقرة واحدة.

التخصيص#

تحتوي الأداة على أربع خصائص للمظهر:

<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
/>

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

تخصص ثلاث خصائص إضافية الجلسة بدلًا من المظهر -- وتُمرَّر جميعها إلى طلب الجلسة عند بدء مكالمة. لا تعمل كل منها إلا إذا كان المفتاح القابل للنشر للأداة يسمح بها ضمن تجاوزات المتصفح؛ وإلا يفشل طلب الجلسة بالرمز 400 override_not_allowed:

راجع مرجع مكوّن React للاطلاع على جدول الخصائص الكامل.

لإنشاء واجهة مستخدم مخصصة بالكامل، استخدم الخطاف بلا واجهة لإدارة الجلسة الصوتية أثناء بناء واجهتك الخاصة. يوفّر الخطاف مستويات الصوت في الوقت الفعلي لإنشاء تصورات مرئية تتفاعل مع الصوت.

كل محادثة في الأداة هي مكالمة. وتُحتسب ضمن حد المكالمات المتزامنة لمؤسستك (20 مكالمة قيد التنفيذ افتراضيًا، مشتركة مع مكالمات الهاتف والمكالمات الأخرى) وضمن حد الأداة البالغ 25 جلسة نشطة (أو حد المكالمات المتزامنة لديك، إذا كان أعلى). عند بلوغ أي من الحدين، لا يمكن بدء محادثة جديدة حتى تنتهي مكالمة.

خيارات التكامل#

اختر طريقة التكامل التي تناسب منظومتك:

التنسيق#

تأتي الأداة مع سمات فاتحة وداكنة مدمجة يتحكم بها الخاصية theme، ولون تمييز يتحكم به الخاصية primaryColor. ولتخصيص أعمق، يمكنك تجاوز خصائص وفئات CSS المخصصة. راجع دليل التنسيق للتفاصيل.