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

מדריך צעד אחר צעד ל-SilverStripe CMS

פלטפורמה:

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

ראשית, עבור ללוח הבקרה של Asyntai וגלול למטה לחלק "קוד הטמעה". העתק את קוד ההטמעה הייחודי שלך שייראה כך:

<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: הוספה לתבנית SilverStripe (מומלץ)

הדרך הפשוטה ביותר להוסיף את הצ'אטבוט לאתר SilverStripe שלכם היא על ידי עריכת קובץ התבנית הראשי ישירות:

פתחו את קובץ התבנית של התבנית שלכם (למשל, themes/yourtheme/templates/Page.ss)
הוסיפו את קוד ההטמעה ממש לפני תגית הסגירה </body>:

    <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>
  </body>
</html>

שמרו את הקובץ ונקו את מטמון SilverStripe על ידי הוספת ?flush=1 לכתובת האתר שלכם

טיפ: SilverStripe משתמש בקבצי תבנית .ss עם מערכת ירושת תבניות. מיקום הסקריפט בתבנית Page.ss הבסיסית מבטיח שהצ'אטבוט מופיע בכל דף באתר. אם התבנית שלכם משתמשת בתיקיית Includes, ניתן גם למקם את הסקריפט בקובץ include משותף.

שיטה חלופית 1: שימוש במחלקת Requirements ב-Controller

SilverStripe מספק מחלקת Requirements לניהול תלויות JavaScript ו-CSS באופן פרוגרמטי. זו הגישה המומלצת למפתחים:

פתחו את app/src/PageController.php (או קובץ ה-controller של הדף שלכם)
בשיטת init(), השתמשו ב-Requirements::customScript() כדי לטעון את הווידג'ט באופן דינמי:

use SilverStripe\View\Requirements;

class PageController extends \SilverStripe\CMS\Controllers\ContentController
{
    protected function init()
    {
        parent::init();
        Requirements::customScript(<<<JS
            var script = document.createElement('script');
            script.src = 'https://asyntai.com/static/js/chat-widget.js';
            script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID');
            script.async = true;
            document.head.appendChild(script);
        JS);
    }
}

שמרו את הקובץ ונקו את המטמון על ידי ביקור ב-yourdomain.com?flush=1

הערה: מחלקת Requirements היא הדרך הסטנדרטית ב-SilverStripe לכלול סקריפטים וגיליונות סגנון. שימוש ב-Requirements::customScript() מפיק JavaScript inline. שיטה זו מבטיחה שהווידג'ט נטען בכל דף שמטופל על ידי ה-PageController שלכם.

שיטה חלופית 2: שימוש ב-Requirements בתבנית

ניתן גם להשתמש בתחביר התבנית של SilverStripe כדי לדרוש קבצי JavaScript ישירות בתבנית .ss שלכם:

פתחו את קובץ התבנית של התבנית שלכם (למשל, themes/yourtheme/templates/Page.ss)
הוסיפו את הבא קרוב לתחתית התבנית, לפני </body>:

<% require javascript("https://asyntai.com/static/js/chat-widget.js") %>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        var scripts = document.querySelectorAll('script[src*="chat-widget.js"]');
        scripts.forEach(function(s) {
            s.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID');
        });
    });
</script>
</body>

טיפ: The <% require %> syntax is SilverStripe's template-level way of including assets. Note that this method does not natively support adding custom data attributes to the script tag, so we add a small initialization snippet to set the widget ID.

שיטה חלופית 3: שימוש בהגדרות SilverStripe (YAML)

לגישה מבוססת הגדרות, ניתן להשתמש בהגדרות YAML של SilverStripe כדי להוסיף דרישות גלובליות:

פתחו או צרו את הקובץ app/_config/app.yml
הוסיפו הגדרות לכלול את הווידג'ט דרך extension מותאם אישית או הגדרת controller:

# app/_config/app.yml
---
Name: asyntai-chatbot
After: '#rootroutes'
---
SilverStripe\Core\Injector\Injector:
  AsyntaiChatbotExtension:
    class: App\Extensions\AsyntaiChatbotExtension

צרו את קובץ ה-extension app/src/Extensions/AsyntaiChatbotExtension.php:

namespace App\Extensions;

use SilverStripe\Core\Extension;
use SilverStripe\View\Requirements;

class AsyntaiChatbotExtension extends Extension
{
    public function onAfterInit()
    {
        Requirements::customScript("
            var script = document.createElement('script');
            script.src = 'https://asyntai.com/static/js/chat-widget.js';
            script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID');
            script.async = true;
            document.head.appendChild(script);
        ");
    }
}

החילו את ה-extension על ה-PageController שלכם ב-app/_config/app.yml:

PageController:
  extensions:
    - App\Extensions\AsyntaiChatbotExtension

הריצו ?flush=1 כדי לבנות מחדש את מטמון ההגדרות

הערה: שימוש בהגדרות YAML ו-extensions היא הגישה המודולרית ביותר ב-SilverStripe. היא שומרת על שילוב הצ'אטבוט בנפרד מלוגיקת ה-controller הראשית ומקלה על הפעלה או השבתה מבלי לשנות קוד.

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

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

לא רואה את הווידג'ט? ודאו שניקיתם את המטמון על ידי הוספת ?flush=1 לכתובת האתר שלכם. בדקו שהחלפתם YOUR_WIDGET_ID במזהה הווידג'ט האמיתי שלכם מלוח הבקרה. נקו את מטמון הדפדפן או צפו במצב גלישה פרטית. פתחו את קונסולת הדפדפן (F12) כדי לבדוק שגיאות JavaScript. אם משתמשים במחלקת Requirements, ודאו ששיטת init() של ה-PageController נקראת כראוי.