Torna alla Dashboard

Documentazione

Scopri come usare Asyntai

Per iniziare
Installazione Knowledge Base Testa la Tua IA Gestisci i Siti Web
Personalizzazione
Colori del widget Nome dell'assistente IA Messaggio iniziale Posizione del widget Auto-apertura Fumetto di saluto Badge non letti Modalità istruzioni Fai domande Usa emoji Raccogli email Raccogli numeri di telefono Acquisizione Contatti Intelligente Localizzazione Nascondi il branding Link alla privacy Avviso personalizzato Download della Trascrizione Nuova Conversazione Cronologia delle conversazioni Tagline e indicatore di stato Riconoscimento Vocale Icona della chat Logo aziendale Limite caratteri Temperatura
Suggerimenti per le Istruzioni IA Confronta i Piani
Funzionalità
Scansione del Sito Web Lacune di conoscenza Schede Prodotto Schede Prodotto Dinamiche Dynamic Images Contesto utente Monitoraggio in tempo reale Takeover umano Escalation Notifiche IA Report giornaliero Feed Dati in Tempo Reale Feed Dati in Tempo Reale Max Membri del Team Single Sign-On Includi Immagini Visione Immagini Widget di Traduzione Localizzazione Contatti Acquisizione Contatti Intelligente Ticket di Supporto Prenotazioni Incorporamenti Escludi Pagine IP bloccati Modello avanzato Attiva il Ragionamento Suggerimenti di Risposta Messaggi di Follow-up Riconoscimento Vocale Download della Trascrizione Chat Incorporata
Analisi
Analisi delle Chat Registri Chat
Integrazioni
REST API Instagram Messenger WhatsApp Zapier Email App Mobile
Altro
Aggiungi alla Schermata Home Pulsante di Apertura Personalizzato
Chiedi all'IA

Come aggiungere il chatbot IA Asyntai a DatoCMS

Guida passo passo per i siti web basati su DatoCMS

Ottieni il codice di incorporamento
Piattaforma:
HTML HTML/Custom WordPress WordPress Shopify Shopify WooCommerce WooCommerce BigCommerce BigCommerce Ecwid Ecwid Wix Wix Squarespace Squarespace Webflow Webflow Weebly Weebly HubSpot HubSpot Tilda Tilda Adobe Experience Manager Adobe Experience Manager Duda Duda Google Sites Google Sites Bludit Bludit Plesk Plesk Concrete CMS Concrete CMS Craft CMS Craft CMS Contentful Contentful Docusaurus Docusaurus Strapi Strapi Joomla Joomla Kentico Kentico Drupal Drupal Magento Magento Blogger Blogger Bitrix Bitrix TYPO3 TYPO3 PrestaShop PrestaShop OpenCart OpenCart Ghost Ghost Hugo Hugo Statamic Statamic Umbraco Umbraco Volusion Volusion Moodle Moodle SilverStripe SilverStripe Grav Grav October CMS October CMS ProcessWire ProcessWire Sanity Sanity ExpressionEngine ExpressionEngine Sylius Sylius Backdrop CMS Backdrop CMS MODX MODX Bagisto Bagisto PayloadCMS PayloadCMS e107 e107 CrafterCMS CrafterCMS Kirby Kirby MedusaCMS MedusaCMS DatoCMS DatoCMS GoDaddy GoDaddy Framer Framer Bubble Bubble Carrd Carrd Jimdo Jimdo Strikingly Strikingly Kajabi Kajabi Teachable Teachable Thinkific Thinkific ClickFunnels ClickFunnels Hostinger Hostinger Unbounce Unbounce Leadpages Leadpages Systeme.io Systeme.io Instapage Instapage

CMS headless: DatoCMS è un CMS headless che fornisce contenuti tramite API. Il codice del chatbot deve essere aggiunto alla tua applicazione frontend (Next.js, Gatsby, Nuxt, ecc.), non alla dashboard di DatoCMS.

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 frontend Next.js (più comune)

Next.js è il framework frontend più popolare utilizzato con DatoCMS. Aggiungi il chatbot utilizzando il componente Script:

App Router (app/layout.tsx):

  1. Apri il file di layout root: app/layout.tsx
  2. Importa il componente Script e aggiungi il chatbot:
    import Script from 'next/script'

    export default function RootLayout({ children }) {
      return (
        <html>
          <body>
            {children}
            <Script
              src="https://asyntai.com/static/js/chat-widget.js"
              data-asyntai-id="YOUR_WIDGET_ID"
              strategy="afterInteractive"
            />
          </body>
        </html>
      )
    }
  3. Sostituisci YOUR_WIDGET_ID con il tuo ID widget effettivo
  4. Salva il file e riavvia il server di sviluppo

Pages Router (pages/_app.tsx):

  1. Apri il file pages/_app.tsx
  2. Aggiungi il componente Script:
    import Script from 'next/script'
    import type { AppProps } from 'next/app'

    export default function App({ Component, pageProps }: AppProps) {
      return (
        <>
          <Component {...pageProps} />
          <Script
            src="https://asyntai.com/static/js/chat-widget.js"
            data-asyntai-id="YOUR_WIDGET_ID"
            strategy="afterInteractive"
          />
        </>
      )
    }

Suggerimento: L'utilizzo di strategy="afterInteractive" assicura che il chatbot venga caricato subito dopo che la pagina diventa interattiva, offrendo un buon equilibrio tra prestazioni e disponibilità.

Metodo alternativo 1: Frontend Gatsby

Per i siti Gatsby che estraggono contenuti da DatoCMS tramite gatsby-source-datocms:

  1. Crea o modifica gatsby-ssr.js nella root del progetto:
    import React from 'react'

    export const onRenderBody = ({ setPostBodyComponents }) => {
      setPostBodyComponents([
        <script
          key="asyntai-chatbot"
          async
          src="https://asyntai.com/static/js/chat-widget.js"
          data-asyntai-id="YOUR_WIDGET_ID"
        />
      ])
    }
  2. Sostituisci YOUR_WIDGET_ID con il tuo ID widget effettivo
  3. Riavvia il server di sviluppo Gatsby

Metodo alternativo 2: Frontend Nuxt.js

Per le applicazioni Nuxt.js che consumano contenuti DatoCMS:

  1. Aggiungi al tuo nuxt.config.ts:
    export default defineNuxtConfig({
      app: {
        head: {
          script: [
            {
              src: 'https://asyntai.com/static/js/chat-widget.js',
              async: true,
              'data-asyntai-id': 'YOUR_WIDGET_ID'
            }
          ]
        }
      }
    })
  2. Sostituisci YOUR_WIDGET_ID con il tuo ID widget effettivo
  3. Riavvia il server di sviluppo Nuxt

Metodo alternativo 3: HTML statico / Sito statico

Se stai utilizzando la Content Delivery API di DatoCMS con un sito HTML statico o un generatore di siti statici:

  1. Aggiungi il codice di incorporamento al file HTML prima del tag di chiusura </body>:
    <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
  2. Sostituisci YOUR_WIDGET_ID con il tuo ID widget effettivo
  3. Salva il file e caricalo sul tuo hosting

Metodo alternativo 4: React (Vite/CRA)

Per le app React standard (Create React App, Vite) che utilizzano l'API di DatoCMS:

Opzione A: Aggiungi a public/index.html

  1. Apri il file public/index.html (CRA) o index.html (Vite)
  2. Aggiungi il codice di integrazione prima del tag di chiusura </body>
    <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
  3. Salva il file

Opzione B: useEffect nel componente root

  1. Crea un componente chatbot o aggiungilo al componente root:
    // components/Chatbot.jsx
    import { useEffect } from 'react'

    export default function Chatbot() {
      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)
      }, [])
      return null
    }
  2. Importa e renderizza il componente nel tuo App.jsx o layout root

Passaggio 3: Distribuisci e verifica

Dopo aver aggiunto il codice del chatbot al tuo sito basato su DatoCMS, effettua il deploy o avvia il server di sviluppo. 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 di chat nell'angolo in basso a destra. Cliccaci sopra per assicurarti che si apra e funzioni correttamente.

Non vedi il widget? Assicurati di aver aggiunto lo script al file corretto per il tuo framework. Controlla la console per sviluppatori del browser per eventuali errori. Se utilizzi il rendering lato server, assicurati che lo script venga eseguito lato client. Prova a svuotare la cache del browser o a visualizzare in una finestra di navigazione in incognito.

Variabili d'ambiente: Per una maggiore sicurezza e flessibilità, considera di memorizzare l'ID del widget in una variabile d'ambiente (ad es., NEXT_PUBLIC_ASYNTAI_ID per Next.js o VITE_ASYNTAI_ID per Vite) anziché codificarlo direttamente.