--- title: "CDN / תג סקריפט" description: "הוסיפו את וידג'ט הקול של ThunderPhone לכל אתר ללא באנדלר" --- גרסת ה-CDN כוללת את React באופן פנימי, כך שתוכלו להשתמש בווידג'ט באתרים סטטיים, ב-WordPress, ב-Webflow או בכל דף שבו תוכלו להוסיף HTML. אין צורך ב-npm, בכלי bundler או במסגרת עבודה. ## כתובות URL של CDN ```html Latest (recommended) ``` ```html Pinned version ``` כתובות ה-URL של `latest` הן אלו שמחולל מקטע ההטמעה בלוח הבקרה יוצר. הן נשמרות במטמון למשך 5 דקות ומקבלות מהדורות יציבות חדשות באופן אוטומטי. נתיבי `/widget/vX.Y.Z/` מקובעים אינם ניתנים לשינוי ונשמרים במטמון לטווח ארוך -- אם אתם מקבעים גרסה, התאימו אותה למהדורת npm של `@thunderphone/widget` שמולה אתם מפתחים. --- ## שימוש בסיסי ```html

``` הווידג'ט נטען לתוך רכיב היעד ומוצג כ-**סרגל במיקום קבוע באחת מפינות אזור התצוגה** (ברירת המחדל היא `bottom-right`, ונשלטת באמצעות האפשרות `position`). רכיב הטעינה הוא רק שורש ה-React -- מיקומו בדף אינו משפיע על המקום שבו הווידג'ט מופיע. --- ## אפשרויות טעינה `ThunderPhone.mount()` מקבלת את אותן אפשרויות כמו רכיב ה-React, בנוסף למאפיין `element`: | אפשרות | סוג | חובה | ברירת מחדל | תיאור | |--------|------|----------|---------|-------------| | `element` | `string \| HTMLElement` | כן | -- | בורר CSS (לדוגמה, `'#thunderphone'`) או הפניה לרכיב DOM. | | `publishableKey` | `string` | כן | -- | מפתח API ניתן לפרסום (`pk_live_...`). הסוכן מזוהה אוטומטית מתצורת הווידג'ט של המפתח. | | `theme` | `'light' \| 'dark'` | לא | `'light'` | ערכת צבעים. | | `primaryColor` | `string` | לא | `'#000000'` (בהיר) / `'#ffffff'` (כהה) | מחרוזת צבע CSS המשמשת כצבע ההדגשה. | | `title` | `string` | לא | `'Voice assistant'` | טקסט המוצג בסרגל הווידג'ט. | | `position` | `'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left'` | לא | `'bottom-right'` | מיקום קבוע בחלון התצוגה. | | `apiBase` | `string` | לא | `'https://api.thunderphone.com/v1'` | עקיפת כתובת הבסיס של ה-API. | | `language` | `string` | לא | -- | עקיפת שפה לכל סשן -- קוד שפה או אזור כגון `en`, `es` או `fr-FR`. כאשר האפשרות אינה מוגדרת, חלה השפה שהוגדרה לסוכן. נדרש `language` תחת [עקיפות דפדפן](/he/guides/embed-web-widget) של המפתח. | | `voice` | `string` | לא | -- | עקיפת קול לכל סשן -- שם קול כגון `maria`. כאשר האפשרות אינה מוגדרת, חל הקול שהוגדר לסוכן. נדרש `voice` תחת [עקיפות דפדפן](/he/guides/embed-web-widget) של המפתח. | | `context` | `string` | לא | -- | הקשר עובדתי של דף או אתר לכל סשן, המועבר לסוכן. נחתך בצד השרת ל-12,000 תווים. נדרש `context` תחת [עקיפות דפדפן](/he/guides/embed-web-widget) של המפתח. | | `onConnect` | `() => void` | לא | -- | נקרא כאשר סשן הקול מתחבר. | | `onDisconnect` | `() => void` | לא | -- | נקרא כאשר הסשן מסתיים. | | `onError` | `(error) => void` | לא | -- | נקרא במקרה של שגיאות. השגיאה כוללת את השדות `error` (קוד) ו-`message`. | | `ringtone` | `boolean \| string` | לא | `false` | נגנו צלצול בזמן ההתחברות. `true` עבור צלצול ברירת המחדל, או מחרוזת URL עבור שמע מותאם אישית. | --- ## ניקוי `ThunderPhone.mount()` מחזירה מופע וידג'ט עם שיטות ניקוי: ```html ``` גם `unmount()` וגם `destroy()` מבצעות את אותה פעולה -- הן מנתקות כל סשן קולי פעיל ומסירות את הווידג'ט מה-DOM. השתמשו בזו שמתאימה יותר לקריאות הקוד שלכם. נקו תמיד את הווידג'ט בעת ניווט ביישומים בעלי דף יחיד או כאשר הרכיב המכיל מוסר. כך תבטיחו שסשנים קוליים פעילים מנותקים כראוי. --- ## דוגמאות ### ערכת נושא כהה עם צבע מותאם אישית ```html

``` ### מיקום מותאם אישית ```html

``` ### עם קריאות חזרה של אירועים ```html

``` ### עם צלצול ```html

``` ### שימוש בהפניה לרכיב DOM ```html

``` ### שילוב עם WordPress / CMS הוסיפו זאת לבלוק HTML מותאם אישית או לכותרת התחתונה של ערכת הנושא שלכם: ```html ``` ניתן למקם את ה-`

` בכל מקום -- הוא משמש רק כנקודת העגינה. הווידג'ט עצמו מוצג כשכבת-על קבועה בפינת אזור התצוגה (המוגדרת באמצעות האפשרות `position`) ואינו זורם עם התוכן שמסביב. --- ## פתרון בעיות ודאו שקובצי ה-CSS וה-JS נטענים. בדקו במסוף הדפדפן שגיאות רשת. ודאו שרכיב היעד קיים ב-DOM לפני הקריאה ל-`ThunderPhone.mount()`. הסקריפט עדיין לא נטען. ודאו שתגית ה-`