Inserimento del Widget

Aggiunga il suo chatbot AI a qualsiasi sito web in pochi secondi con il nostro semplice codice di embed.

Avvio Rapido

Aggiunga questo codice prima del tag di chiusura </body>:

<script 
  src="https://www.chatreact.ai/embed/widget.js" 
  data-chatbot-id="YOUR_CHATBOT_ID" 
  async
></script>

Questo è tutto! Il suo chatbot è ora attivo sul suo sito web.

Trovare il suo Chatbot ID

1. Vada alle impostazioni del suo chatbot
2. Navigare alla scheda Embed
3. Copi il codice di embed (include il suo ID)

Personalizzazione del Widget

L'aspetto e il comportamento del widget sono configurati nella sua dashboard — non nel codice di embed. Vada su Dashboard → Chatbots → [your chatbot] → Widget per regolare:

• Posizione — bottom-right, bottom-left, o inline
• Colori — colori primario, sfondo e testo, oltre al raggio del bordo
• Dimensione — larghezza e altezza del widget

Per aprire la chat automaticamente dopo un ritardo configurabile, abiliti Auto-Open nella scheda Behavior della stessa pagina delle impostazioni.

Le modifiche si applicano al suo sito automaticamente — non è necessario aggiornare il codice di embed. Veda la guida Widget Customization per tutte le opzioni disponibili.

La lingua del widget viene rilevata automaticamente dal browser di ogni visitatore, in base alle lingue abilitate nella scheda Languages del suo chatbot.

Widget FAQ

Mostri le FAQ come un accordion in qualsiasi pagina:

<div id="chatreact-faq"></div>
<script 
  src="https://www.chatreact.ai/embed/faq-widget.js" 
  data-chatbot-id="YOUR_CHATBOT_ID"
  async
></script>

Il widget FAQ mostra le FAQ pubblicate del suo chatbot. Colori e stile (primario, sfondo e colori del testo, raggio del bordo) sono configurati in Dashboard → FAQs → Settings.

Opzioni del Widget FAQ

Esempio di Filtro per Categoria

<script
  src="https://www.chatreact.ai/embed/faq-widget.js"
  data-chatbot-id="YOUR_CHATBOT_ID"
  data-categories="shipping,returns"
  async
></script>

Ottimizzazione Mobile

Il widget di chat è completamente ottimizzato per i dispositivi mobili:

• Layout a larghezza completa su schermi piccoli
• Animazione slide-up all'apertura
• Gestione della tastiera su iOS (il widget si adatta alla tastiera a schermo)
• Supporto per le aree sicure (safe-area) per il notch e l'indicatore home degli iPhone
• Target touch più grandi per una migliore usabilità
• Dimensione del font dell'input che evita l'auto-zoom su iOS

Guide Specifiche per Piattaforma

WordPress

Consigliato: Utilizzi il plugin ufficiale ChatReact WordPress Plugin per l'integrazione più semplice con blocchi Gutenberg, widget Elementor e shortcode.

Alternativa: Embed manuale tramite un plugin "Header/Footer Scripts":

1. Installi qualsiasi plugin "Header/Footer Scripts"
2. Aggiunga il codice di embed nella sezione footer
3. Salvi e pubblichi

Shopify

Consigliato: ChatReact Shopify App

Installi l'app ChatReact dallo Shopify App Store per l'integrazione più semplice:

1. Installi l'app ChatReact nella sua amministrazione Shopify
2. Inserisca il suo Chatbot ID nelle impostazioni dell'app
3. Il widget di chat appare automaticamente sul suo storefront
4. Gestisca le assegnazioni del widget per pagina, o abiliti l'app ovunque

L'app supporta anche i widget Form e FAQ come App Blocks nell'Editor del Tema.

Alternativa: Embed Manuale

1. Vada su Online Store → Themes → Edit Code
2. Apra theme.liquid
3. Aggiunga il codice prima di </body>
4. Salvi

Webflow

1. Vada a Project Settings → Custom Code
2. Aggiunga nel Footer Code
3. Pubblichi il sito

Next.js / React

Use the Script component:

import Script from 'next/script';

export default function Layout({ children }) {
  return (
    <>
      {children}
      <Script 
        src="https://www.chatreact.ai/embed/widget.js"
        data-chatbot-id="YOUR_CHATBOT_ID"
        strategy="lazyOnload"
      />
    </>
  );
}

Vue.js

Aggiunga nel suo App.vue principale o nel layout:

<script setup>
import { onMounted } from 'vue';

onMounted(() => {
  const script = document.createElement('script');
  script.src = 'https://www.chatreact.ai/embed/widget.js';
  script.dataset.chatbotId = 'YOUR_CHATBOT_ID';
  script.async = true;
  document.body.appendChild(script);
});
</script>

JavaScript API

Interagisca con il widget programmaticamente:

// Open the chat
ChatReact.open();

// Close the chat
ChatReact.close();

// Toggle open/closed
ChatReact.toggle();

// Start a fresh conversation
ChatReact.newChat();

// Remove the widget from the page entirely
// (useful in single-page apps, e.g. on route changes)
ChatReact.destroy();

Test

Modalità Anteprima

Prima di incorporare in produzione:

1. Usi la funzionalità Preview nella sua dashboard
2. Testi diversi scenari
3. Verifichi che le risposte siano accurate

Risoluzione dei Problemi

Widget Non Visualizzato

1. Controlli la console del browser per eventuali errori
2. Verifichi che l'ID del chatbot sia corretto
3. Assicuri che il chatbot sia attivo (non disabilitato)
4. Controlli se gli ad blocker stanno interferendo
5. Controlli l'utilizzo del suo piano — il widget si sospende quando viene raggiunto il limite mensile del piano

Plugin di Caching & Ottimizzazione

Alcuni plugin di caching o ottimizzazione degli script riscrivono gli URL degli script, il che può impedire il caricamento del widget. Se ciò accade, aggiunga un URL API esplicito al tag script:

<script 
  src="https://www.chatreact.ai/embed/widget.js" 
  data-chatbot-id="YOUR_CHATBOT_ID"
  data-api-url="https://www.chatreact.ai"
  async
></script>

Lo stesso attributo funziona anche sugli script dei widget FAQ e form.

Conflitti di Styling

Se il CSS del suo sito entra in conflitto:

• Il widget isola i suoi stili nel proprio container e utilizza regole ad alta priorità per resistere ai conflitti
• Controlli i valori di z-index degli elementi che si sovrappongono al widget
• Eviti regole generiche !important nel CSS del sito che mirano a elementi generici

Prestazioni

Il widget è progettato per avere un impatto minimo:

• Si carica in modo asincrono — non blocca mai il rendering della pagina
• Leggero: circa 30 KB in trasferimento compresso

Prossimi Passi

• Widget Customization →
• WordPress Plugin →
• Shopify Integration →
• FAQ Management →
• Smart Contact Forms → — incorpori form autonomi con il form widget