Hur du lägger till Asyntai AI-chattbot i Craft CMS

Steg-för-steg-guide för Craft CMS-webbplatser

Hämta inbäddningskod

Steg 1: Hämta din inbäddningskod

Gå först till din Asyntai-instrumentpanel och scrolla ner till avsnittet "Inbäddningskod". Kopiera din unika inbäddningskod som ser ut så här:

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

Obs! Koden ovan är bara ett exempel. Du måste kopiera din egen unika inbäddningskod från din instrumentpanel eftersom den innehåller ditt personliga widget-ID.

Steg 2: Redigera din layoutmall (rekommenderas)

Det enklaste sättet att lägga till chattboten på alla sidor är att redigera din huvudlayoutmall:

  1. Access your Craft CMS project files via FTP, SSH, or your code editor
  2. Navigera till katalogen templates/
  3. Hitta din huvudlayoutfil (vanligtvis namngiven _layout.twig, _layout.html eller placerad i templates/_layouts/)
  4. Hitta den avslutande taggen </body>
  5. Klistra in din Asyntai-inbäddningskod precis före taggen </body>
  6. Spara filen

Tips: Att lägga till skriptet före det avslutande </body>-taggen säkerställer att det laddas efter sidinnehållet, vilket rekommenderas för chattwidgetar och inte bromsar sidladdningen.

Alternative: Using Twig {% js %} Tag (Craft CMS 3.x+)

Craft CMS har en inbyggd Twig-tagg för att registrera JavaScript:

  1. Öppna din huvudlayoutmall
  2. Lägg till följande kod före det avslutande </body>-taggen:
    {% js %} (function() { var script = document.createElement('script'); script.async = true; script.src = 'https://asyntai.com/static/js/chat-widget.js'; script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID'); document.body.appendChild(script); })(); {% endjs %}
  3. Ersätt YOUR_WIDGET_ID med ditt faktiska widget-ID
  4. Spara filen

Obs! The {% js %} tag automatically handles script registration and prevents duplicate loading if the same code appears multiple times.

Alternativ: Skapa en separat include-fil

För bättre organisation, skapa en dedikerad include-fil:

  1. Skapa en ny fil: templates/_includes/chatbot.twig (eller .html)
  2. Lägg till din Asyntai-inbäddningskod i den här filen:
    <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
  3. I din huvudlayoutmall, inkludera den här filen innan </body>:
    {% include '_includes/chatbot' %}
  4. Spara båda filerna

Tips: Att använda en inkluderingsfil gör det enkelt att aktivera/inaktivera chatboten på hela din webbplats genom att kommentera bort en enda rad.

Alternativ: Villkorlig inläsning

För att ladda chattboten endast på specifika sidor eller sektioner:

  1. I din layout- eller sidmall, använd Twig-villkor:
    {% if entry.showChatbot ?? true %} <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> {% endif %}
  2. Eller kontrollera specifika avsnitt:
    {% if craft.app.request.segments[0] != 'admin' %} <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> {% endif %}

Steg 3: Verifiera installationen

Efter att du har sparat dina ändringar, besök din Craft CMS-webbplats i en ny webbläsarflik eller ett inkognitofönster. Du bör se widgetknappen för chatten i det nedre högra hörnet. Klicka på den för att kontrollera att den öppnas och fungerar korrekt.

Ser du inte widgeten? Se till att du sparat mallfilen och att du redigerar rätt layoutmall som dina sidor använder. Rensa webbläsarens cache eller visa sidan i ett inkognitofönster. Om du använder mallcaching, rensa Craft CMS-cachen från kontrollpanelen under Utilities > Clear Caches.

Mallplats: Platsen för Craft CMS-mallar kan variera beroende på din projektinställning. Vanliga platser inkluderar templates/_layout.twig, templates/_layouts/main.twig eller templates/_base.twig. Kontrollera dina befintliga mallar för att hitta var </body>-taggen är definierad.