כיצד להוסיף את צ'אטבוט ה-AI של Asyntai ל-WordPress

מדריך שלב אחר שלב לאתרי WordPress

פלטפורמה:

שלב 1: קבל את קוד ההטמעה שלך

First, go to your Asyntai Dashboard and scroll down to the "Embed Code" section. Copy your unique embed code which will look like this:

<script>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</script>

הערה: הקוד למעלה הוא רק דוגמה. עליך להעתיק את קוד ההטמעה הייחודי שלך מלוח הבקרה שלך כיוון שהוא מכיל את מזהה הווידג'ט האישי שלך.

שלב 2: בחר שיטת התקנה

ישנן מספר דרכים להוסיף את ווידג'ט הצ'אט ל-WordPress. בחרו את השיטה שמתאימה לכם ביותר:

שיטה 1: שימוש בתוסף (מומלץ)

הדרך הקלה ביותר להוסיף את ווידג'ט הצ'אט היא באמצעות תוסף כמו "Insert Headers and Footers" או "WPCode".

שימוש ב-WPCode (חינם)

עברו אל Plugins → Add New בממשק הניהול של WordPress
חפשו "WPCode" והתקינו אותו
הפעילו את התוסף
עברו אל Code Snippets → Header & Footer
הדביקו את קוד ההטמעה של Asyntai בקטע "Footer"
לחצו על "Save Changes"

שימוש ב-Insert Headers and Footers

עברו אל Plugins → Add New בממשק הניהול של WordPress
חפשו "Insert Headers and Footers" מאת WPBeginner
התקינו והפעילו את התוסף
עברו אל Settings → Insert Headers and Footers
הדביקו את קוד ההטמעה של Asyntai בתיבת "Scripts in Footer"
לחץ על "Save"

למה להשתמש בתוסף? שימוש בתוסף מבטיח שהקוד שלכם יישאר במקומו גם כשתעדכנו או תחליפו את ערכת העיצוב של WordPress.

שיטה 2: עריכת קבצי ערכת עיצוב

תוכלו להוסיף את הקוד ישירות לקבצי ערכת העיצוב. מיקום עורך קבצי ערכת העיצוב תלוי בגרסת WordPress ובסוג ערכת העיצוב.

עבור ערכות עיצוב קלאסיות

עברו אל Appearance → Theme File Editor בממשק הניהול של WordPress
בחרו את ערכת העיצוב הפעילה מהתפריט הנפתח (אם לא נבחרה כבר)
מצאו ולחצו על footer.php ברשימת הקבצים מצד ימין
גללו לתחתית ומצאו את תגית הסגירה </body>
הדבק את קוד ההטמעה של Asyntai ממש לפני תג </body>
לחצו על "Update File"

עבור ערכות עיצוב בלוקים (ערכות FSE)

אם אתם משתמשים בערכת עיצוב מבוססת בלוקים (כמו Twenty Twenty-Four או ערכות Full Site Editing אחרות), עורך קבצי ערכת העיצוב עבר:

עברו אל Tools → Theme File Editor בממשק הניהול של WordPress
בחרו את ערכת העיצוב הפעילה מהתפריט הנפתח
חפשו footer.php או footer.html ברשימת הקבצים
הוסיפו את קוד ההטמעה של Asyntai לפני תגית הסגירה </body>
לחצו על "Update File"

הערה: חלק מערכות העיצוב מבוססות הבלוקים אינן כוללות קובץ footer.php. במקרה כזה, השתמשו בשיטת התוסף (WPCode) שעובדת עם כל סוגי ערכות העיצוב.

חשוב: עדכוני ערכת עיצוב ידרסו את השינויים שלכם. לפתרון קבוע, השתמשו בערכת עיצוב בת או בשיטת התוסף במקום.

שיטה 3: שימוש ב-Elementor

אם אתם משתמשים ב-Elementor, תוכלו להוסיף את הקוד דרך תכונת הקוד המותאם אישית של Elementor.

Elementor Pro

עברו אל Elementor → Custom Code
לחצו על "Add New"
תנו לו שם כמו "Asyntai Chatbot"
הגדירו מיקום ל-"Before </body> End"
הדבק את קוד ההטמעה של Asyntai
הגדירו תנאי תצוגה ל-"Entire Site"
לחצו על "Publish"

Elementor Free

אם אתם משתמשים בגרסה החינמית של Elementor, השתמשו בשיטת התוסף המתוארת למעלה, מכיוון שהזרקת קוד מותאם אישית דורשת Elementor Pro.

שלב 3: אמת את ההתקנה

לאחר הוספת הקוד, בקרו באתר שלכם בלשונית דפדפן חדשה או בחלון גלישה פרטית. אתם אמורים לראות את כפתור הצ'אט בפינה הימנית התחתונה של האתר. לחצו עליו כדי לוודא שהוא נפתח ופועל כראוי.

לא רואה את הווידג'ט? נקו את מטמון הדפדפן ואת כל תוספי המטמון של WordPress. אם אתם משתמשים בתוסף מטמון כמו WP Rocket או W3 Total Cache, רוקנו את המטמון לאחר הוספת הקוד.

הוספת שורת החיפוש החכמה

שורת החיפוש החכמה היא ווידג ט נפרד עם קוד משלה. הוסיפו אותה לצד הצאט או לבד. היא דורשת תוכנית Standard ומעלה: בתוכנית נמוכה יותר השורה מופיעה אך לא מחזירה תוצאות.

הוסיפו את המאפיין data-replace לתגית הסקריפט והשורה תתפוס את מקומה של הקיימת בתבנית. הוסיפו אותו עם אותו תוסף כותרת ותחתית שבו השתמשתם לקוד הצאט, כמו Code Snippets או Insert Headers and Footers. הסקריפט לא חייב להיות ליד תיבת החיפוש, ולכן אין צורך לערוך קובץ תבנית.

<script src="https://widget.asyntai.com/static/js/search-widget.js" data-asyntai-id="YOUR_WIDGET_ID" data-replace="auto" async></script>

קראו את המדריך המלא לשורת החיפוש החכמה

תיעוד