Πώς να Προσθέσετε το AI Chatbot Asyntai στο Craft CMS

Πλατφόρμα:

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

Βήμα 1: Αποκτήστε τον Κωδικό Ενσωμάτωσής σας

First, go to your Asyntai Dashboard and scroll down to the "Embed Code" section. Copy your unique embed code which will look like this:

Βήμα 2: Επεξεργαστείτε το Πρότυπο Διάταξης (Συνιστάται)

Ο ευκολότερος τρόπος για να προσθέσετε το chatbot σε όλες τις σελίδες είναι να επεξεργαστείτε το κύριο πρότυπο διάταξης:

1. Αποκτήστε πρόσβαση στα αρχεία έργου Craft CMS μέσω FTP, SSH ή του επεξεργαστή κώδικα
2. Μεταβείτε στον κατάλογο templates/
3. Βρείτε το κύριο αρχείο διάταξης (συνήθως ονομάζεται _layout.twig, _layout.html, ή βρίσκεται στο templates/_layouts/)
4. Βρείτε την ετικέτα κλεισίματος </body>
5. Επικολλήστε τον κωδικό ενσωμάτωσης Asyntai ακριβώς πριν από την ετικέτα </body>
6. Αποθηκεύστε το αρχείο

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

Το Craft CMS παρέχει ενσωματωμένο Twig tag για εγγραφή JavaScript:

1. Ανοίξτε το κύριο πρότυπο διάταξης
2. Προσθέστε τον παρακάτω κώδικα πριν την ετικέτα κλεισίματος </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. Αντικαταστήστε το YOUR_WIDGET_ID με το πραγματικό widget ID σας
4. Αποθηκεύστε το αρχείο

Εναλλακτικά: Δημιουργήστε Ξεχωριστό Αρχείο Συμπερίληψης

Για καλύτερη οργάνωση, δημιουργήστε ένα αποκλειστικό αρχείο συμπερίληψης:

1. Δημιουργήστε ένα νέο αρχείο: templates/_includes/chatbot.twig (ή .html)
2. Προσθέστε τον κώδικα ενσωμάτωσης Asyntai σε αυτό το αρχείο:
   <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. Στο κύριο πρότυπο διάταξης, συμπεριλάβετε αυτό το αρχείο πριν το </body>:
   {% include '_includes/chatbot' %}
4. Αποθηκεύστε και τα δύο αρχεία

Εναλλακτικά: Υπό Συνθήκη Φόρτωση

Για να φορτώσετε το chatbot μόνο σε συγκεκριμένες σελίδες ή ενότητες:

1. Στο πρότυπο διάταξης ή σελίδας, χρησιμοποιήστε συνθήκες 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. Ή ελέγξτε για συγκεκριμένες ενότητες:
   {% 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 %}

Βήμα 3: Επαληθεύστε την Εγκατάσταση

Αφού αποθηκεύσετε τις αλλαγές, επισκεφθείτε τον ιστότοπό σας Craft CMS σε μια νέα καρτέλα του προγράμματος περιήγησης ή σε παράθυρο ανώνυμης περιήγησης. Θα πρέπει να δείτε το κουμπί του chat widget στην κάτω δεξιά γωνία. Κάντε κλικ για να βεβαιωθείτε ότι ανοίγει και λειτουργεί σωστά.