Installare il widget di chat su altre piattaforme
Dove incollare lo script di intoCHAT su Wix, Webflow, Squarespace, Framer, Bubble, Joomla, Drupal, Ghost, Magento, VTEX e altre, con guide passo passo.
intoCHAT funziona su qualsiasi piattaforma che ti permetta di aggiungere uno script alle pagine. La regola è sempre la stessa: incolla il tag script della scheda Share in un campo che inserisce il codice alla fine del body, su tutte le pagine.
La regola generale
- Cerca un campo chiamato codice del footer, fine del body o simile. Funziona anche un campo per header o head, perché il widget attende il caricamento della pagina, ma la fine del body è la posizione consigliata.
- Applica il codice a tutte le pagine.
- Pubblica il sito. La maggior parte dei site builder aggiunge il codice personalizzato solo al sito online, non all'anteprima dell'editor.
- Se la piattaforma modifica i tuoi tag script e toglie l'attributo
data-chatbot-id, usa Google Tag Manager.
Lo snippet e il suo unico attributo sono spiegati in Installare con un tag script.
Site builder e CMS
| Piattaforma | Dove va il codice | Guida |
|---|---|---|
| Wix | Impostazioni → Codice personalizzato, tutte le pagine, posizione Corpo - fine | Wix |
| Webflow | Site settings → Custom code → Footer code, poi pubblica | Webflow |
| Squarespace | Codice personalizzato → Iniezione di codice → Piè di pagina | Squarespace |
| Framer | Project Settings → Custom Code → Add Script, fine del body, esecuzione Once | Framer |
| Bubble | Settings → SEO / metatags → campo body | Bubble |
| Joomla | Un modulo Custom in una posizione visibile su ogni pagina, creato con un editor che mantiene gli script | Joomla |
| Drupal | Una libreria nel tuo tema che carica lo script nel footer | Drupal |
| Ghost | Settings → Advanced → Code injection → Site footer | Ghost |
| WordPress | Il plugin ufficiale | Documentazione WordPress |
Negozi online
| Piattaforma | Dove va il codice | Guida |
|---|---|---|
| Shopify | theme.liquid, subito sopra </body> | Documentazione Shopify |
| WooCommerce | Il plugin ufficiale per WordPress | WooCommerce |
| Magento | Content → Design → Configuration → Footer → Miscellaneous HTML | Magento |
| VTEX | Un tag HTML personalizzato in Google Tag Manager, oppure il codice della tua storefront | VTEX |
Su tutti questi negozi, Connect your website nella scheda Actions può dare all'agente anche la ricerca dei prodotti in tempo reale, a partire dai dati pubblici del negozio. Vedi Collegare il negozio.
Framework
| Piattaforma | Dove va il codice | Guida |
|---|---|---|
| Next.js | next/script nel layout principale | Next.js |
| React | index.html, oppure un componente con useEffect | React |
Entrambi sono trattati in Next.js e React.
Google Tag Manager
Google Tag Manager rimuove gli attributi data come data-chatbot-id dai tag script nei tag HTML personalizzati, quindi lo snippet normale si carica senza sapere quale agente mostrare. Usa invece questo snippet in un tag HTML personalizzato, con il tuo ID agente, e attivalo con un attivatore Pronto per DOM:
<script>
(function () {
if (document.getElementById('intochat-embed')) return;
var s = document.createElement('script');
s.id = 'intochat-embed';
s.src = 'https://www.intochat.ai/api/embed.js';
s.setAttribute('data-chatbot-id', 'YOUR_AGENT_ID');
document.body.appendChild(s);
})();
</script>
Il controllo iniziale evita che lo script venga caricato di nuovo se il tag si attiva due volte nella stessa pagina. Tutti i passaggi sono nella guida a Google Tag Manager.
La tua piattaforma non è in elenco
- Se permette di aggiungere HTML o uno script alla fine del body, il tag script funziona.
- Se permette codice solo nell'head, incolla lì il tag script. Funziona anche nell'head.
- Se non permette alcun codice personalizzato, collega un pulsante o una voce di menu alla pagina di chat del tuo agente.