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

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

פלטפורמה:

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

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

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

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

שלב 2: הוספה לתבנית ערכת העיצוב של Grav (מומלץ)

הדרך הטובה ביותר להוסיף את הצ'אטבוט לכל עמודי אתר Grav שלך היא על ידי עריכת תבנית Twig הבסיסית של ערכת העיצוב:

נווט לתיקייה user/themes/yourtheme/templates/ של פרויקט Grav שלך ופתח את default.html.twig (או תבנית הבסיס שבה משתמשת ערכת העיצוב שלך)
הוסף את קוד ההטמעה של Asyntai לפני תגית הסגירה </body>:

<!-- user/themes/yourtheme/templates/default.html.twig -->
...
    <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
  </body>
</html>

שמור את הקובץ

טיפ: Grav משתמש ב-Twig כמנוע התבניות שלו. תבנית הבסיס היא בדרך כלל default.html.twig או partials/base.html.twig בהתאם לערכת העיצוב שלך. בדוק את מבנה ערכת העיצוב שלך כדי למצוא את הקובץ הנכון שמכיל את תגית הסגירה </body>.

שיטה חלופית 1: שימוש ב-Asset Manager של Grav

מנהל הנכסים המובנה של Grav מספק דרך נקייה להוסיף נכסי JavaScript דרך Twig:

פתח את תבנית Twig הבסיסית של ערכת העיצוב שלך (למשל, user/themes/yourtheme/templates/partials/base.html.twig)
השתמש ב-Asset Manager כדי להוסיף את ה-JavaScript:

{% do assets.addJs('https://asyntai.com/static/js/chat-widget.js', {group: 'bottom', loading: 'async', 'data-asyntai-id': 'YOUR_WIDGET_ID'}) %}

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

<!-- user/themes/yourtheme/templates/partials/base.html.twig -->
...
{% block bottom %}
    {{ assets.js('bottom') }}
{% endblock %}

<script>
(function() {
  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.body.appendChild(script);
})();
</script>
</body>
</html>

הערה: שיטת Asset Manager היא הגישה המומלצת על ידי Grav לניהול נכסי JavaScript. היא מספקת תמיכה מובנית בצינור נכסים, סידור וקיבוץ.

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

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

התקן את תוסף "Custom JS" מפאנל הניהול של Grav או דרך CLI:

bin/gpm install custom-js

עבור אל Admin > Plugins > Custom JS
הוסף את קוד סקריפט ההטמעה:

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

שמור את תצורת התוסף

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

שיטה חלופית 3: שימוש בדריסת בלוק בתבנית ילד

אם ערכת העיצוב של Grav שלך משתמשת בירושת בלוקים של Twig, ניתן לדרוס את הבלוק התחתון בתבנית ילד:

{% block bottom %}
    {{ parent() }}
    <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
{% endblock %}

צור או פתח תבנית ילד שמרחיבה את תבנית הבסיס של ערכת העיצוב שלך
הוסף את דריסת הבלוק שמוצגת למעלה
קריאת parent() מבטיחה שכל התוכן הקיים בבלוק נשמר

הערה: שיטה זו משתמשת במערכת ירושת התבניות של Twig. ודא ששם הבלוק (למשל, bottom) תואם לבלוק שמוגדר בתבנית הבסיס של ערכת העיצוב שלך. שמות בלוקים נפוצים כוללים bottom, javascripts או footer.

שיטה חלופית 4: שימוש בתוסף Custom Head של Grav

אפשרות נוספת מבוססת תוסף היא תוסף Custom Head:

התקן את תוסף custom-head דרך CLI או פאנל הניהול:

bin/gpm install custom-head

עבור אל Admin > Plugins > Custom Head
הוסף את קוד סקריפט ההטמעה של Asyntai בתצורת התוסף:

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

שמור את התצורה

טיפ: תוסף Custom Head מאפשר לך להזריק קוד לחלקי head או body של האתר שלך מבלי לגעת בקבצי ערכת עיצוב. בדוק את תיעוד התוסף עבור אפשרות המיקום הנכונה להכנסת הסקריפט לפני תגית הסגירה </body>.

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

לאחר הוספת הקוד, נקה את מטמון Grav ואמת את ההתקנה:

# Clear cache via CLI
bin/grav clearcache

# Or clear cache from Admin Panel:
# Admin > Tools > Clear Cache

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

לא רואה את הווידג'ט? ודא שניקית את מטמון Grav באמצעות bin/grav clearcache או מפאנל הניהול. בדוק שהחלפת YOUR_WIDGET_ID במזהה הווידג'ט האמיתי שלך מלוח הבקרה. נקה את מטמון הדפדפן או צפה במצב גלישה פרטית. פתח את מסוף הדפדפן (F12) כדי לבדוק אם יש שגיאות JavaScript. אמת שהסקריפט קיים במקור העמוד על ידי לחיצה ימנית ובחירת "View Page Source".