Widget

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

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

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

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

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

قبل تضمين الأداة، أكمل هذه الخطوات الثلاث في لوحة تحكم 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"
    />
  )
}

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

التخصيص#

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

<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
/>

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

تخصّص ثلاث خصائص إضافية الجلسة بدلًا من المظهر -- وتُمرَّر جميعها إلى طلب الجلسة عند بدء مكالمة:

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

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

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

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

التنسيق#

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