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

מדריך צעד אחר צעד לאתרי AEM

פלטפורמה:

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

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

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

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

שלב 2: הוסף קוד באמצעות רכיב דף (מומלץ)

השיטה המומלצת היא להוסיף את קוד הצ'אטבוט לחלק ה-head של רכיב הדף ב-AEM שלך להתקנה ברחבי האתר:

התחבר למופע ה-AEM Author שלך
נווט ל-CRXDE Lite (בדרך כלל בכתובת http://your-aem-instance:4502/crx/de)
אתר את תבנית רכיב הדף שלך (בדרך כלל תחת /apps/your-project/components/page)
מצא או צור את קובץ head.html או headerlibs.html
הוסף את קוד ההטמעה של Asyntai לקובץ זה
לחץ על "Save All" בתפריט העליון
שכפל את השינויים למופע הפרסום שלך

טיפ: הצבת הקוד בקובץ head.html מבטיחה שהצ'אטבוט יופיע בכל הדפים שמשתמשים בתבנית זו. זו הגישה הנקייה ביותר להתקנה ברחבי האתר.

שיטה חלופית 1: ספריות לקוח (ClientLibs)

לגישה מובנית יותר, אתה יכול להשתמש במערכת ספריות הלקוח של AEM:

צור תיקיית ספריית לקוח חדשה תחת /apps/your-project/clientlibs
הגדר את סוג הצומת cq:clientLibraryFolder
צור קובץ js.txt המפרט את קבצי ה-JavaScript שלך
הוסף את קוד ההטמעה של Asyntai לקובץ JavaScript בתיקייה זו
כלול את ספריית הלקוח ברכיב הדף שלך באמצעות:

<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html"
     data-sly-call="${clientlib.js @ categories='your-category-name'}" />

הערה: שיטה זו מומלצת לפרויקטים עם מבנה ClientLib קיים ומספקת ארגון טוב יותר למימושים גדולים.

שיטה חלופית 2: ניהול תגים (Adobe Launch)

אם אתה משתמש ב-Adobe Launch (לשעבר DTM) או מנהל תגים אחר:

התחבר ל-Adobe Experience Platform Launch
נווט לנכס שלך
עבור ל-Rules וצור כלל חדש
הגדר את האירוע ל-"Page Bottom" או "DOM Ready"
הוסף פעולה: Custom Code
הדבק את קוד ההטמעה של Asyntai
שמור ופרסם את הספרייה

טיפ: שימוש ב-Adobe Launch היא הגישה המומלצת על ידי Adobe להוספת סקריפטים של צד שלישי. היא מספקת שליטה טובה יותר, יכולות בדיקה, ואינה דורשת פריסות קוד.

שיטה חלופית 3: Experience Fragment

למימוש גמיש וידידותי לכותבים:

נווט ל-Experience Fragments ב-AEM
צור Experience Fragment חדש
הוסף רכיב טקסט או רכיב HTML
עבור למצב מקור HTML
הדבק את קוד ההטמעה של Asyntai
כלול את ה-Experience Fragment הזה בתחתית תבנית הדף שלך

חשוב: ודא שיש לך הרשאות AEM מתאימות לשינוי תבניות ורכיבים. עבור AEM כשירות ענן, ייתכן שהשינויים יצטרכו לעבור דרך צינור ה-CI/CD שלך.

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

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

לא רואה את הווידג'ט? בדוק את קונסולת הדפדפן (F12) לשגיאות JavaScript. ודא שהקוד נפרס כראוי למופע הפרסום שלך. עבור AEM כשירות ענן, ודא שהשינויים שלך עברו בהצלחה דרך צינור הפריסה.