Cum să adăugați chatbot-ul AI Asyntai pe Craft CMS

Platformă:

Craft CMS

HTML/Custom WordPress Shopify WooCommerce BigCommerce Ecwid Wix Squarespace Webflow Weebly HubSpot Tilda Adobe Experience Manager Duda Google Sites Bludit Plesk Concrete CMS Craft CMS Contentful Docusaurus Strapi Joomla Kentico Drupal Magento Blogger Bitrix TYPO3 PrestaShop OpenCart Ghost Hugo Statamic Umbraco Volusion Moodle SilverStripe Grav October CMS ProcessWire Sanity ExpressionEngine Sylius Backdrop CMS MODX Bagisto PayloadCMS e107 CrafterCMS Kirby MedusaCMS DatoCMS GoDaddy Framer Bubble Carrd Jimdo Strikingly Kajabi Teachable Thinkific ClickFunnels Hostinger Unbounce Leadpages Systeme.io Instapage

Pasul 1: Obțineți codul de încorporare

Mai întâi, accesați panoul de control Asyntai și derulați în jos până la secțiunea "Cod de integrare". Copiați codul dvs. unic de integrare, care va arăta astfel:

Pasul 2: Editați șablonul de layout (Recomandat)

Cel mai simplu mod de a adăuga chatbot-ul pe toate paginile este prin editarea șablonului de layout principal:

1. Accesați fișierele proiectului Craft CMS prin FTP, SSH sau editorul de cod
2. Navigați la directorul templates/
3. Găsiți fișierul de layout principal (denumit de obicei _layout.twig, _layout.html, sau localizat în templates/_layouts/)
4. Găsiți eticheta de închidere </body>
5. Inserați codul de încorporare Asyntai chiar înainte de eticheta </body>
6. Salvați fișierul

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

Craft CMS oferă o etichetă Twig integrată pentru înregistrarea JavaScript:

1. Deschideți șablonul de layout principal
2. Adăugați următorul cod înainte de eticheta de închidere </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. Înlocuiți YOUR_WIDGET_ID cu ID-ul real al widget-ului dvs.
4. Salvați fișierul

Alternativă: Creați un fișier include separat

Pentru o organizare mai bună, creați un fișier include dedicat:

1. Creați un fișier nou: templates/_includes/chatbot.twig (sau .html)
2. Adăugați codul de integrare Asyntai în acest fișier:
   <script>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</script>
3. În șablonul de layout principal, includeți acest fișier înainte de </body>:
   {% include '_includes/chatbot' %}
4. Salvați ambele fișiere

Alternativă: Încărcare condiționată

Pentru a încărca chatbot-ul doar pe anumite pagini sau secțiuni:

1. În șablonul de layout sau de pagină, utilizați condiționale Twig:
   {% if entry.showChatbot ?? true %} <script>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</script> {% endif %}
2. Sau verificați secțiuni specifice:
   {% if craft.app.request.segments[0] != 'admin' %} <script>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</script> {% endif %}

Pasul 3: Verificați instalarea

După ce ați salvat modificările, vizitați site-ul Craft CMS într-o filă nouă de browser sau într-o fereastră incognito. Ar trebui să vedeți butonul widget-ului de chat în colțul din dreapta jos. Faceți clic pe el pentru a vă asigura că se deschide și funcționează corect.