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

מדריך צעד אחר צעד לאתרי Statamic CMS

פלטפורמה:

שלב 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: בחר שיטת התקנה

Statamic תומך הן בתבניות Antlers והן ב-Blade. בחרו את השיטה בהתאם למנוע התבניות שבו אתם משתמשים:

שיטה 1: Layout של Antlers (מומלץ)

הדרך הקלה ביותר להוסיף את הצ'אטבוט היא לכלול אותו בקובץ ה-layout הראשי. Statamic משתמש ב-Antlers כמנוע התבניות הברירת מחדל שלו.

נווטו לספריית resources/views של פרויקט Statamic שלכם
פתחו את קובץ ה-layout שלכם (בדרך כלל layout.antlers.html)
מצא את תג הסגירה </body>
הדבק את קוד ההטמעה של Asyntai ממש לפני תג </body>
שמור את הקובץ

<!DOCTYPE html>
<html lang="{{ site:short_locale }}">
<head>
  <meta charset="utf-8">
  <title>{{ title }} | {{ site:name }}</title>
  {{ vite src="resources/js/site.js|resources/css/site.css" }}
</head>
<body>
  {{ template_content }}

  <!-- Asyntai Chatbot -->
  <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>

טיפ: The {{ template_content }} variable is where Statamic injects your page content. Always add the chatbot script after this, just before </body>.

שיטה 2: Layout של Blade

אם אתם משתמשים בתבניות Blade במקום Antlers, עקבו אחר שלבים אלה:

נווטו לספריית resources/views של פרויקט Statamic שלכם
פתחו את קובץ ה-layout של Blade (למשל, layout.blade.php)
מצא את תג הסגירה </body>
הדבק את קוד ההטמעה של Asyntai ממש לפני תג </body>
שמור את הקובץ

<!DOCTYPE html>
<html lang="{{ $site->shortLocale() }}">
<head>
  <meta charset="utf-8">
  <title>{{ $title }} | {{ $site->name() }}</title>
  @vite(['resources/js/site.js', 'resources/css/site.css'])
</head>
<body>
  {!! $template_content !!}

  <!-- Asyntai Chatbot -->
  <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>

הערה: In Blade templates, use {!! $template_content !!} to render the page content. The !! syntax prevents HTML escaping.

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

לארגון טוב יותר, ניתן ליצור partial לשימוש חוזר עבור הצ'אטבוט:

שלב 1: צרו את ה-Partial

צרו קובץ חדש ב-resources/views/partials/_chatbot.antlers.html
הוסף את קוד ההטמעה של 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: כללו ב-Layout שלכם

פתחו את קובץ ה-layout שלכם (layout.antlers.html)
הוסיפו את תגית ה-partial לפני </body>:
{{ partial:chatbot }} </body>

למה להשתמש ב-partial? Partials מקלים על ניהול סקריפטים חיצוניים במקום אחד. אם אי פעם תצטרכו לעדכן את קוד הצ'אטבוט, תצטרכו לערוך רק קובץ אחד.

שימוש ב-Layouts מרובים

אם אתר ה-Statamic שלכם משתמש ב-layouts מרובים (למשל, layouts שונים לפוסטים בבלוג, דפי נחיתה וכו'), הקפידו להוסיף את סקריפט הצ'אטבוט לכל קובץ layout שבו אתם רוצים שהווידג'ט יופיע.

ניתן להגדיר באיזה layout דף משתמש במספר דרכים:

ברשומה: הוסיפו layout: your_layout ל-front matter
באוסף: הגדירו layout ברירת מחדל בקובץ YAML של הגדרות האוסף שלכם
ב-blueprint: הוסיפו שדה layout שעורכים יכולים לבחור ממנו

עבור ערכות התחלה של Statamic

אם אתם משתמשים בערכת התחלה של Statamic, מיקום ה-layout עשוי להשתנות. מיקומים נפוצים כוללים:

Default Statamic

resources/views/layout.antlers.html

Peak Starter

resources/views/layout.antlers.html עם partials ב-resources/views/snippets/

Cool Writings

resources/views/layout.antlers.html

Starter's Creek

resources/views/layout.blade.php

שלב 3: נקה מטמון ואמת

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

php artisan cache:clear
php please stache:refresh

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

לא רואה את הווידג'ט? ודאו שניקיתם הן את מטמון Laravel והן את ה-Stache של Statamic. אם אתם משתמשים במטמון סטטי, הריצו גם php please static:clear. בדקו את קונסולת הדפדפן (F12) לשגיאות JavaScript.

חשוב: אם אתם משתמשים במחולל האתרים הסטטיים של Statamic (ssg), הקפידו ליצור מחדש את הקבצים הסטטיים לאחר הוספת סקריפט הצ'אטבוט על ידי הרצת php please ssg:generate.

תיעוד