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 Bolla di notifica 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 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 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

Come aggiungere il chatbot IA Asyntai a Contentful

Guida passo passo per i siti web basati su Contentful

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: Contentful è un CMS headless, il che significa che fornisce contenuti tramite API ma non include un frontend integrato. L'installazione del chatbot dipende dal framework frontend che stai utilizzando per renderizzare i contenuti di Contentful. Scegli il metodo qui sotto che corrisponde alla tua configurazione.

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.

Metodo 1: Next.js con Contentful (consigliato)

Se stai utilizzando Next.js per renderizzare i contenuti di Contentful, aggiungi il chatbot utilizzando il componente Script:

  1. Apri il file di layout principale: app/layout.tsx (App Router) o pages/_app.tsx (Pages Router)
  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="lazyOnload"
            />
          </body>
        </html>
      )
    }
  3. Sostituisci YOUR_WIDGET_ID con il tuo ID widget effettivo
  4. Salva il file e riavvia il server di sviluppo

Suggerimento: L'utilizzo di strategy="lazyOnload" assicura che il chatbot venga caricato dopo che la pagina è completamente interattiva, offrendo le migliori prestazioni.

Metodo 2: Gatsby con Contentful

Per i siti Gatsby che estraggono contenuti da Contentful:

  1. Installa gatsby-plugin-load-script (opzionale ma consigliato):
    npm install gatsby-plugin-load-script
  2. Aggiungi al tuo gatsby-config.js:
    module.exports = {
      plugins: [
        {
          resolve: 'gatsby-plugin-load-script',
          options: {
            src: 'https://asyntai.com/static/js/chat-widget.js',
            attributes: {
              'data-asyntai-id': 'YOUR_WIDGET_ID',
              async: true
            }
          }
        }
      ]
    }
  3. In alternativa, utilizza gatsby-ssr.js:
    // gatsby-ssr.js
    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"
        />
      ])
    }
  4. Riavvia il server di sviluppo Gatsby

Metodo 3: React con Contentful

Per le app React standard (Create React App, Vite, ecc.) che utilizzano Contentful:

  1. Apri il file public/index.html
  2. Add the embed code before the closing </body> tag:
    <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
  3. Salva il file

Oppure utilizza un componente React con useEffect:

// 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
}

Metodo 4: Vue/Nuxt con Contentful

Per le applicazioni Vue o Nuxt.js che utilizzano Contentful:

Nuxt 3:

  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'
            }
          ]
        }
      }
    })

Vue 3:

  1. Add to your index.html before </body>:
    <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

Metodo 5: HTML statico con API Contentful

Se stai utilizzando la Content Delivery API di Contentful con JavaScript vanilla:

  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. Salva il file e caricalo sul tuo hosting

Passaggio 2: Verifica l'installazione

Dopo aver aggiunto il codice del chatbot al tuo sito basato su Contentful, 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) anziché codificarlo direttamente.