Cómo añadir el chatbot de IA de Asyntai a Umbraco

Plataforma:

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

Paso 1: Obtén su código de inserción

Primero, ve a su Panel de control de Asyntai y desplácese hasta la sección "Código de inserción". Copie su código de inserción único que se verá así:

Paso 2: Editar la plantilla maestra (Recomendado)

La forma más fácil de agregar el chatbot a todas las páginas es editando su plantilla Master:

1. Inicia sesión en su Umbraco Backoffice
2. Ve a Settings en la barra lateral izquierda
3. Expande Templates
4. Haga clic en su plantilla Master (o la plantilla de diseño principal que use su sitio)
5. Encuentra la etiqueta de cierre </body>
6. Pegue su código de inserción de Asyntai justo antes de la etiqueta </body>
7. Haga clic en "Save"

Alternativa: Usar el tipo de documento Site Settings

Para mayor flexibilidad, puede agregar un campo personalizado para gestionar scripts del pie de página:

1. Ve a Settings → Document Types
2. Edita su tipo de documento Site Settings (o cree uno si no existe)
3. Agrega una nueva propiedad llamada "Footer Scripts" con un tipo de dato Textarea
4. Guarde el tipo de documento
5. Ve a Content y edita su nodo de Site Settings
6. Pegue su código de inserción de Asyntai en el campo Footer Scripts
7. En su plantilla Master, agrega este código antes de </body>:
   @Html.Raw(Model.Value("footerScripts"))
8. Guarde tanto el contenido como la plantilla

Alternativa: Usar la carpeta Scripts

También puede crear un archivo JavaScript en el Umbraco Backoffice:

1. Ve a Settings → Scripts
2. Haga clic derecho en Scripts y seleccione "Create"
3. Cree un nuevo archivo llamado asyntai-chatbot.js
4. Añada el siguiente código:
   (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. Reemplaza YOUR_WIDGET_ID con su ID de widget real
6. Guarde el archivo
7. Incluye este script en su plantilla Master antes de </body>:
   <script src="/scripts/asyntai-chatbot.js"></script>

Alternativa: Específico por página con RenderSection

Si solo quiere el chatbot en páginas específicas:

1. En su plantilla Master, agrega antes de </body>:
   @RenderSection("footerScripts", required: false)
2. In the specific page template where you want the chatbot, add:
   @section footerScripts {
  <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
}

Paso 3: Verificar la instalación

Después de guardar sus cambios, visite su sitio web en una nueva pestaña del navegador o en una ventana de incógnito. Deberías ver el botón del widget de chat en la esquina inferior derecha. Haga clic en él para asegurarte de que se abra y funciona correctamente.