Come aggiungere il chatbot IA Asyntai a Umbraco

Piattaforma:

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

Passaggio 1: ottieni il tuo codice di incorporamento

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

Passaggio 2: Modifica del template Master (consigliato)

Il modo più semplice per aggiungere il chatbot a tutte le pagine è modificare il template Master:

1. Accedi al tuo Backoffice Umbraco
2. Vai su Settings nella barra laterale sinistra
3. Espandi Templates
4. Clicca sul tuo template Master (o sul template di layout principale utilizzato dal tuo sito)
5. Trova il tag di chiusura </body>
6. Incolla il codice di incorporamento Asyntai appena prima del tag </body>
7. Clicca su "Save"

Alternativa: Utilizzo del Document Type Site Settings

Per una maggiore flessibilità, puoi aggiungere un campo personalizzato per gestire gli script del footer:

1. Vai su Settings → Document Types
2. Modifica il tuo document type Site Settings (o creane uno se non esiste)
3. Aggiungi una nuova proprietà chiamata "Footer Scripts" con un tipo di dati Textarea
4. Salva il Document Type
5. Vai su Content e modifica il nodo Site Settings
6. Incolla il codice di incorporamento Asyntai nel campo Footer Scripts
7. Nel tuo template Master, aggiungi questo codice prima di </body>:
   @Html.Raw(Model.Value("footerScripts"))
8. Salva sia il contenuto che il template

Alternativa: Utilizzo della cartella Scripts

Puoi anche creare un file JavaScript nel Backoffice di Umbraco:

1. Vai su Settings → Scripts
2. Clicca con il tasto destro su Scripts e seleziona "Create"
3. Crea un nuovo file chiamato asyntai-chatbot.js
4. Aggiungi il seguente codice:
   (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. Sostituisci YOUR_WIDGET_ID con il tuo ID widget effettivo
6. Salva il file
7. Includi questo script nel tuo template Master prima di </body>:
   <script src="/scripts/asyntai-chatbot.js"></script>

Alternativa: Per pagina specifica con RenderSection

Se vuoi il chatbot solo su pagine specifiche:

1. Nel tuo template Master, aggiungi prima di </body>:
   @RenderSection("footerScripts", required: false)
2. Nel template di pagina specifico in cui desideri il chatbot, aggiungi:
   @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>
}

Passaggio 3: verifica l'installazione

Dopo aver salvato le modifiche, visita il tuo sito web in una nuova scheda del browser o in una finestra di navigazione in incognito. Dovresti vedere il pulsante del widget chat nell'angolo in basso a destra. Cliccaci sopra per assicurarti che si apra e funzioni correttamente.