Come aggiungere il chatbot IA Asyntai a qualsiasi sito web
Universal guide for HTML, custom sites, and static generators
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
Per prima cosa, vai alla tua Dashboard Asyntai e scorri fino alla sezione "Codice di incorporamento". Copia il tuo codice di incorporamento univoco che apparirà così:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Nota: Il codice sopra è solo un esempio. Devi copiare il tuo codice di incorporamento univoco dalla tua Dashboard poiché contiene il tuo ID widget personale.
Passaggio 2: Aggiungi al tuo file HTML
Il modo più semplice per aggiungere il chatbot è incollare il codice di incorporamento direttamente nel tuo file HTML:
- Apri il tuo file HTML in un editor di testo
- Trova il tag di chiusura
</body> - Incolla il codice di incorporamento Asyntai appena prima del tag
</body> - Salva il file
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>
<!-- Your website content -->
<!-- Asyntai Chatbot - Add before closing body tag -->
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
</body>
</html>
Suggerimento: Aggiungere lo script prima del tag di chiusura </body> garantisce che venga caricato dopo il contenuto della pagina, il che è ottimale per le prestazioni e non rallenterà la tua pagina.
Per siti web con più pagine
Se il tuo sito web ha più pagine HTML, hai diverse opzioni:
Opzione A: Aggiungi a ogni pagina
Aggiungi il codice di incorporamento a ogni file HTML in cui vuoi che il chatbot appaia.
Opzione B: Usa un include del footer comune
Se stai usando server-side includes (SSI), include PHP o simili:
- Crea un file footer.html (o footer.php)
- Aggiungi il codice di incorporamento Asyntai a questo file
- Includi questo file footer in tutte le tue pagine:
<!-- For PHP -->
<?php include 'footer.php'; ?>
<!-- For SSI -->
<!--#include virtual="/footer.html" -->
Opzione C: Caricamento dinamico JavaScript
Create a single JavaScript file that loads the chatbot on all pages:
- Crea un file chiamato asyntai-loader.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);
})(); - Sostituisci
YOUR_WIDGET_IDcon il tuo ID widget effettivo - Includi questo script in tutte le tue pagine:
<script src="/js/asyntai-loader.js"></script>
Per i generatori di siti statici
Se stai usando un generatore di siti statici, aggiungi il codice di incorporamento al tuo layout o template base:
Aggiungi a _includes/footer.html o _layouts/default.html
Aggiungi a layouts/partials/footer.html o layouts/_default/baseof.html
Add to gatsby-browser.js or use gatsby-ssr.js
Aggiungi a pages/_document.js o usa il componente next/script
Aggiungi a nuxt.config.js sotto head.script
Aggiungi al tuo layout base in _includes/
Aggiungi a src/layouts/Layout.astro prima di </body>
Aggiungi a .vuepress/config.js sotto head
Per le app React / Vue / Angular
Per le applicazioni a pagina singola (SPA), puoi aggiungere lo script al tuo index.html o caricarlo dinamicamente:
React (metodo index.html)
<!-- In public/index.html, before </body> -->
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
React (metodo useEffect)
// In your App.js or a component
useEffect(() => {
const script = document.createElement('script');
script.src = 'https://asyntai.com/static/js/chat-widget.js';
script.async = true;
script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID');
document.body.appendChild(script);
return () => document.body.removeChild(script);
}, []);
Vue (in main.js o App.vue)
// In mounted() or onMounted()
const script = document.createElement('script');
script.src = 'https://asyntai.com/static/js/chat-widget.js';
script.async = true;
script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID');
document.body.appendChild(script);
Angular (in index.html)
<!-- In src/index.html, before </body> -->
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Passaggio 3: verifica l'installazione
Dopo aver aggiunto il codice, apri 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.
Non vedi il widget? Verifica che lo script sia posizionato correttamente prima del tag </body>. Assicurati che non ci siano errori JavaScript nella console del browser (premi F12 per aprire gli strumenti per sviluppatori). Prova a svuotare la cache del browser o a visualizzare in una finestra di navigazione in incognito.
Importante: Il chatbot richiede che il tuo sito web sia servito tramite HTTP o HTTPS (non aperto direttamente come file). Se stai testando in locale, usa un server di sviluppo locale.