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

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

ThunderPhone widget in light and dark themes with various accent colors

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

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

إنشاء مفتاح API قابل للنشر

انتقل إلى المطورون في إعدادات لوحة التحكم وأنشئ مفتاحًا قابلاً للنشر. تبدأ المفاتيح القابلة للنشر بـ pk_live_ ويمكن تضمينها بأمان في التعليمات البرمجية من جانب العميل.

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

في إعدادات المطورون نفسها، أضف النطاقات التي ستُضمَّن فيها الأداة. يُسمح دائمًا بـ localhost للتطوير. تُدعَم أحرف البدل (مثل *.example.com).

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

انتقل إلى عناصر واجهة الويب في لوحة التحكم وأنشئ أداة. اختر الوكيل الذي تريد إتاحته والمفتاح القابل للنشر الذي تريد استخدامه. يُحدَّد الوكيل تلقائيًا من تهيئة مفتاحك القابل للنشر.

المفاتيح القابلة للنشر (pk_live_...) ليست نفسها رموز API السرية الخاصة بك. صُممت المفاتيح القابلة للنشر للاستخدام من جانب العميل، ويقتصر نطاقها على جلسات الأداة ضمن نطاقاتك المسموح بها. لا تستخدم رمز API السري مطلقًا في التعليمات البرمجية من جانب العميل.

البدء السريع

ثبّت الحزمة:

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

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

التخصيص

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

الخاصية	القيمة الافتراضية	الوصف
`theme`	`'light'`	`'light'` للزجاج الأبيض، و`'dark'` للزجاج الداكن
`primaryColor`	`'#000000'` (فاتح) / `'#ffffff'` (داكن)	لون التمييز لزر البدء وشكل الموجة ومؤشر الاتصال
`title`	`'Voice assistant'`	النص المعروض في الأداة
`position`	`'bottom-right'`	زاوية إطار العرض: `'bottom-right'`، `'bottom-left'`، `'top-right'`، `'top-left'`

<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
/>

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

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

الخاصية	الوصف
`language`	تجاوز لغة لكل جلسة — رمز أو إعدادات محلية مثل `en` أو `es` أو `fr-FR`
`voice`	تجاوز صوت لكل جلسة — اسم صوت مثل `maria`
`context`	سياق واقعي للصفحة أو الموقع يُمرَّر إلى الوكيل (يُقتطع على جانب الخادم إلى 12,000 حرف)

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

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

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

مكوّن React

مكوّن واجهة مستخدم جاهز مسبقًا مع عناصر تحكم مدمجة بالمكالمات وعرض للحالة. استورده، مرّر الخصائص، وانتهى الأمر.

خطاف Headless

تحكم كامل في واجهة المستخدم. يدير الخطاف useThunderPhone الجلسة الصوتية بينما تنشئ واجهتك الخاصة.

وسم CDN / Script

لا حاجة إلى أداة تجميع. حمّل الأداة عبر وسم script للمواقع الثابتة وWordPress والبيئات الأخرى غير المعتمدة على React.

التنسيق

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

هل تحتاج إلى مساعدة؟ تواصل معنا عبر support@thunderphone.com

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

​البدء السريع

​التخصيص

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

مكوّن React

خطاف Headless

وسم CDN / Script

​التنسيق

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

البدء السريع

التخصيص

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

التنسيق