Nazaj na nadzorno ploščo

Dokumentacija

Naučite se uporabljati Asyntai

Kako dodati klepetalnik Asyntai z UI v Craft CMS

Vodič po korakih za spletne strani Craft CMS

Pridobite kodo za vdelavo

Korak 1: Pridobite svojo vdelovalno kodo

Najprej pojdite na svojo Nadzorno ploščo Asyntai in se pomaknite navzdol do razdelka "Vdelovalna koda". Kopirajte svojo edinstveno vdelovalno kodo, ki bo videti takole:

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

Opomba: Zgornja koda je le primer. Svojo edinstveno vdelovalno kodo morate kopirati iz svoje Nadzorne plošče, saj vsebuje vaš osebni ID klepetalnika.

Korak 2: Uredite svojo predlogo postavitve (priporočeno)

Najlažji način za dodajanje klepetalnika na vse strani je urejanje glavne predloge postavitve:

  1. Access your Craft CMS project files via FTP, SSH, or your code editor
  2. Pojdite v imenik templates/
  3. Poiščite svojo glavno datoteko postavitve (običajno poimenovano _layout.twig, _layout.html ali v imeniku templates/_layouts/)
  4. Poiščite zaključno oznako </body>
  5. Prilepite svojo vdelovalno kodo Asyntai tik pred oznako </body>
  6. Shranite datoteko

Nasvet: Dodajanje skripta pred zaključno oznako </body> zagotavlja nalaganje po vsebini strani, kar je priporočeno za klepetalnik in ne bo upočasnilo nalaganja vaše strani.

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

Craft CMS zagotavlja vgrajeno oznako Twig za registracijo JavaScripta:

  1. Odprite svojo glavno predlogo postavitve
  2. Dodajte naslednjo kodo pred zaključno oznako </body>:
    {% 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. Replace YOUR_WIDGET_ID with your actual widget ID
  4. Shranite datoteko

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

Alternativa: Ustvarite ločeno datoteko za vključitev

Za boljšo organizacijo ustvarite namensko datoteko za vključitev:

  1. Ustvarite novo datoteko: templates/_includes/chatbot.twig (ali .html)
  2. Dodajte svojo vdelovalno kodo Asyntai v to datoteko:
    <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
  3. V svoji glavni predlogi postavitve vključite to datoteko pred </body>:
    {% include '_includes/chatbot' %}
  4. Shranite obe datoteki

Nasvet: Uporaba datoteke za vključitev olajša omogočanje/onemogočanje klepetalnika na celotni strani s komentiranjem ene same vrstice.

Alternativa: Pogojno nalaganje

Za nalaganje klepetalnika le na določenih straneh ali razdelkih:

  1. V svoji predlogi postavitve ali strani uporabite Twig pogojnice:
    {% if entry.showChatbot ?? true %} <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> {% endif %}
  2. Ali preverite za določene razdelke:
    {% 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 %}

Korak 3: Preverite namestitev

Po shranjevanju sprememb obiščite svojo spletno stran Craft CMS v novem zavihku brskalnika ali oknu brez beleženja. V spodnjem desnem kotu bi morali videti gumb klepetalnika. Kliknite ga, da preverite, ali se pravilno odpre in deluje.

Ne vidite klepetalnika? Prepričajte se, da ste shranili datoteko predloge in da urejate pravilno predlogo postavitve, ki jo vaše strani uporabljajo. Počistite predpomnilnik brskalnika ali si oglejte stran v oknu brez beleženja. Če uporabljate predpomnjenje predlog, počistite predpomnilnik Craft CMS z nadzorne plošče pod Pripomočki > Počisti predpomnilnike.

Lokacija predloge: Lokacije predlog Craft CMS se lahko razlikujejo glede na nastavitev projekta. Pogoste lokacije vključujejo templates/_layout.twig, templates/_layouts/main.twig ali templates/_base.twig. Preverite svoje obstoječe predloge, da ugotovite, kje je določena oznaka </body>.