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

Πλατφόρμα:

Umbraco

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: Επεξεργασία Master Template (Συνιστάται)

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

1. Συνδεθείτε στο Umbraco Backoffice σας
2. Μεταβείτε στις Ρυθμίσεις στο αριστερό πλαϊνό μενού
3. Αναπτύξτε το Templates
4. Κάντε κλικ στο template Master σας (ή στο κύριο layout template που χρησιμοποιεί ο ιστότοπός σας)
5. Βρείτε την ετικέτα κλεισίματος </body>
6. Επικολλήστε τον κωδικό ενσωμάτωσης Asyntai ακριβώς πριν από την ετικέτα </body>
7. Κάντε κλικ στο «Αποθήκευση»

Εναλλακτική: Χρήση Site Settings Document Type

Για μεγαλύτερη ευελιξία, μπορείτε να προσθέσετε ένα προσαρμοσμένο πεδίο για τη διαχείριση των scripts υποσέλιδου:

1. Μεταβείτε στο Settings → Document Types
2. Επεξεργαστείτε το document type Site Settings σας (ή δημιουργήστε ένα αν δεν υπάρχει)
3. Προσθέστε μια νέα ιδιότητα με όνομα «Footer Scripts» με τύπο δεδομένων Textarea
4. Αποθηκεύστε το Document Type
5. Μεταβείτε στο Content και επεξεργαστείτε τον κόμβο Site Settings
6. Επικολλήστε τον κώδικα ενσωμάτωσης του Asyntai στο πεδίο Footer Scripts
7. Στο Master template σας, προσθέστε αυτόν τον κώδικα πριν από το </body>:
   @Html.Raw(Model.Value("footerScripts"))
8. Αποθηκεύστε τόσο το περιεχόμενο όσο και το template

Εναλλακτική: Χρήση Φακέλου Scripts

Μπορείτε επίσης να δημιουργήσετε ένα αρχείο JavaScript στο Umbraco Backoffice:

1. Μεταβείτε στο Settings → Scripts
2. Κάντε δεξί κλικ στο Scripts και επιλέξτε «Create»
3. Δημιουργήστε ένα νέο αρχείο με όνομα asyntai-chatbot.js
4. Προσθέστε τον παρακάτω κώδικα:
   (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);
})();
5. Αντικαταστήστε το YOUR_WIDGET_ID με το πραγματικό widget ID σας
6. Αποθηκεύστε το αρχείο
7. Συμπεριλάβετε αυτό το script στο Master template σας πριν από το </body>:
   <script src="/scripts/asyntai-chatbot.js"></script>

Εναλλακτική: Ανά Σελίδα με RenderSection

Εάν θέλετε το chatbot μόνο σε συγκεκριμένες σελίδες:

1. Στο Master template σας, προσθέστε πριν από το </body>:
   @RenderSection("footerScripts", required: false)
2. Στο template της συγκεκριμένης σελίδας όπου θέλετε το chatbot, προσθέστε:
   @section footerScripts {
  <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: Επαληθεύστε την Εγκατάσταση

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