איך להוסיף צ'אטבוט AI של Asyntai ל-Kirby

מדריך צעד אחר צעד לאתרי Kirby 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: הוספה ל-snippet של Kirby (מומלץ)

Kirby היא מערכת CMS מבוססת קבצים ב-PHP שמשתמשת ב-snippets לחלקי תבנית לשימוש חוזר. הגישה המומלצת היא ליצור snippet ייעודי לצ'אטבוט:

צור קובץ snippet חדש ב-site/snippets/asyntai-widget.php
הדבק את קוד ההטמעה שלך בקובץ:

<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>

לאחר מכן כלול את ה-snippet בתבנית הראשית שלך (למשל, site/templates/default.php) או בפריסה שלך, ממש לפני תגית הסגירה </body>:

<?php snippet('asyntai-widget') ?>
</body>
</html>

טיפ: אם אתה משתמש בפריסה משותפת או ב-snippet של footer, ניתן להוסיף את קריאת ה-snippet שם כדי שהוא יופיע אוטומטית בכל עמוד. למשל, הוסף אותו ל-snippet של ה-footer ממש לפני </body>.

שיטה חלופית 1: הוספה ל-snippet של Footer

אם אתר Kirby שלך משתמש ב-snippet של footer, ניתן להוסיף את קוד ההטמעה ישירות שם:

פתח את site/snippets/footer.php (צור אותו אם הוא לא קיים)
הוסף את קוד ההטמעה לפני תגית הסגירה </body>:

    <!-- Footer content -->
    <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>

ודא שהתבניות שלך כוללות את snippet ה-footer:

<?php snippet('footer') ?>

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

שיטה חלופית 2: שימוש בתוסף Kirby

ניתן ליצור תוסף Kirby כדי להזריק אוטומטית את סקריפט הצ'אטבוט לכל עמוד מבלי לשנות תבניות:

צור את תיקיית התוסף והקובץ ב-site/plugins/asyntai/index.php
הוסף את הקוד הבא כדי להשתמש ב-hooks של Kirby להזרקת הסקריפט:

Kirby::plugin('custom/asyntai', [
    'hooks' => [
        'page.render:after' => function ($contentType, $body) {
            $script = '<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>';
            return str_replace('</body>', $script . '</body>', $body);
        }
    ]
]);

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

שיטה חלופית 3: שימוש בעזר js() של Kirby

Kirby מספק עזר js() מובנה לטעינת קבצי JavaScript. ניתן להשתמש בו בתבנית או ב-snippet שלך:

<?= js('https://asyntai.com/static/js/chat-widget.js', ['async' => true, 'data-asyntai-id' => 'YOUR_WIDGET_ID']) ?>

או הוסף את הסקריפט ישירות בקובץ PHP של התבנית שלך לפני </body>:

<?php // site/templates/default.php ?>
<html>
<head>
    <!-- head content -->
</head>
<body>
    <!-- page content -->
    <?php snippet('header') ?>
    <main>
        <?= $page->text()->kirbytext() ?>
    </main>
    <?php snippet('footer') ?>

    <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>

הערה: אם אתה משתמש בעזר js(), ודא שהוא ממוקם בתוך חלק <body> של התבנית שלך כדי להבטיח שהצ'אטבוט נטען כראוי.

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

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

לא רואה את הווידג'ט? ודא שהחלפת YOUR_WIDGET_ID במזהה הווידג'ט האמיתי שלך מלוח הבקרה. בדוק שקובץ ה-snippet או התוסף נשמר בתיקייה הנכונה. אם אתה משתמש בשיטת התוסף, ודא שמבנה תיקיית התוסף הוא site/plugins/asyntai/index.php. נקה את מטמון הדפדפן או בדוק במצב גלישה פרטית. בדוק במסוף המפתחים של הדפדפן (F12) אם יש שגיאות.