Asyntai AI -chatbotin lisääminen Craft CMS -alustalle

Vaiheittainen opas Craft CMS -verkkosivustoille

Hae upotuskoodi

Vaihe 1: Hanki upotuskoodisi

Siirry ensin Asyntai-hallintapaneeliin ja vieritä alas "Upotuskoodi"-osioon. Kopioi yksilöllinen upotuskoodisi, joka näyttää tältä:

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

Huomautus: Yllä oleva koodi on vain esimerkki. Sinun on kopioitava oma yksilöllinen upotuskoodisi Hallintapaneelistasi, sillä se sisältää henkilökohtaisen widget-tunnuksesi.

Vaihe 2: Muokkaa asettelumalliasi (suositeltu)

Helpoin tapa lisätä chatbot kaikille sivuille on muokata pääasettelumalliasi:

  1. Access your Craft CMS project files via FTP, SSH, or your code editor
  2. Siirry templates/-hakemistoon
  3. Etsi pääasettelutiedostosi (yleensä nimeltään _layout.twig, _layout.html tai sijaitsee kansiossa templates/_layouts/)
  4. Etsi sulkeva </body>-tagi
  5. Liitä Asyntai-upotuskoodisi juuri ennen </body>-tagia
  6. Tallenna tiedosto

Vinkki: Skriptin lisääminen ennen sulkevaa </body>-tagia varmistaa, että se latautuu sivun sisällön jälkeen, mikä on suositeltavaa chat-widgeteille eikä hidasta sivun latautumista.

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

Craft CMS provides a built-in Twig tag for registering JavaScript:

  1. Avaa pääasettelumallisi
  2. Lisää seuraava koodi ennen sulkevaa </body>-tagia:
    {% 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. Korvaa YOUR_WIDGET_ID todellisella widget-tunnuksellasi
  4. Tallenna tiedosto

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

Vaihtoehto: Luo erillinen sisällytettävä tiedosto

Parempaa organisointia varten luo erillinen sisällytettävä tiedosto:

  1. Luo uusi tiedosto: templates/_includes/chatbot.twig (tai .html)
  2. Lisää Asyntai-upotuskoodisi tähän tiedostoon:
    <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
  3. Sisällytä tämä tiedosto pääasettelumallissasi ennen </body>-tagia:
    {% include '_includes/chatbot' %}
  4. Tallenna molemmat tiedostot

Vinkki: Sisällytettävän tiedoston käyttö helpottaa chatbotin käyttöönottoa tai poistamista koko sivustolla kommentoimalla yksi ainoa rivi.

Vaihtoehto: Ehdollinen lataus

Chatbotin lataaminen vain tietyillä sivuilla tai osioissa:

  1. Käytä asettelu- tai sivumallissasi Twig-ehtolauseita:
    {% if entry.showChatbot ?? true %} <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> {% endif %}
  2. Tai tarkista tietyt osiot:
    {% 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 %}

Vaihe 3: Vahvista asennus

Kun olet tallentanut muutokset, avaa Craft CMS -verkkosivustosi uudessa selaimen välilehdessä tai incognito-ikkunassa. Chat-painikkeen pitäisi näkyä oikeassa alakulmassa. Napsauta sitä varmistaaksesi, että se avautuu ja toimii oikein.

Etkö näe widgetiä? Varmista, että tallensit mallitiedoston ja muokkaat oikeaa asettelumallia, jota sivusi käyttävät. Tyhjennä selaimen välimuisti tai katso sivua incognito-ikkunassa. Jos käytät mallien välimuistia, tyhjennä Craft CMS:n välimuisti ohjauspaneelista kohdasta Utilities > Clear Caches.

Mallin sijainti: Craft CMS:n mallien sijainnit voivat vaihdella projektisi asetuksista riippuen. Yleisiä sijainteja ovat templates/_layout.twig, templates/_layouts/main.twig tai templates/_base.twig. Tarkista olemassa olevat mallisi löytääksesi, missä </body>-tagi on määritelty.