Incorporazione del widget

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

Avvio rapido

Inserisca 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>

Fatto! Il suo chatbot è ora attivo sul suo sito web.

Trovare l'ID del suo chatbot

1. Acceda alle impostazioni del suo chatbot
2. Acceda alla scheda Embed
3. Copi il codice embed (contiene il suo ID)

Oppure trovi l'ID nell'URL della dashboard: /dashboard/company/chatbots/[CHATBOT_ID]

Opzioni del widget

Personalizzi il widget con attributi data:

Opzioni di base

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

Sovrascritture dei colori

Sovrascriva le impostazioni della dashboard con colori inline:

<script 
  src="https://www.chatreact.ai/embed/widget.js" 
  data-chatbot-id="YOUR_CHATBOT_ID"
  data-primary-color="#8B5CF6"
  data-background-color="#0F172A"
  data-text-color="#F1F5F9"
  data-border-radius="24"
  async
></script>

Widget FAQ

Mostra le FAQ come un accordion su qualsiasi pagina:

<div id="chatreact-faq"></div>
<script 
  src="https://www.chatreact.ai/embed/faq-widget.js" 
  data-chatbot-id="YOUR_CHATBOT_ID"
  data-primary-color="#8B5CF6"
  data-background-color="#0F172A"
  data-text-color="#F1F5F9"
  data-border-radius="24"
  async
></script>

Il widget FAQ mostra le FAQ pubblicate dal suo chatbot.

Opzioni del Widget FAQ

Esempio 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 della chat è completamente ottimizzato per i dispositivi mobili:

• Layout a larghezza piena su schermi piccoli
• Animazione slide-up all'apertura
• Gestione tastiera iOS (il widget si adatta alla tastiera su schermo)
• Supporto safe-area per il notch e l'indicatore home dell'iPhone
• Target touch più grandi per una migliore usabilità
• La dimensione del font dell'input previene lo zoom automatico su iOS

Guide specifiche per piattaforma

WordPress

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

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

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

Shopify

Consigliato: App ChatReact per Shopify

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

1. Installi l'app ChatReact nel pannello admin di Shopify
2. Inserisca il suo Chatbot ID nelle impostazioni dell'app
3. Il widget della chat appare automaticamente nel suo negozio
4. Gestisca le assegnazioni del widget per pagina, o lo abiliti ovunque

L'app supporta anche 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 su Project Settings → Custom Code
2. Aggiunga nel Footer Code
3. Pubblichi il sito

Next.js / React

Usi il componente Script:

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 al suo App.vue principale o al 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

Interagire con il widget programmaticamente:

// Open the chat
ChatReact.open();

// Close the chat
ChatReact.close();

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

// Send a message
ChatReact.sendMessage('Hello!');

// Set user data
ChatReact.setUser({
  name: 'John Doe',
  email: '[email protected]'
});

Testing

Preview Mode

Prima di incorporarlo in produzione:

1. Utilizzi la funzione Preview nel suo dashboard
2. Verifichi diversi scenari
3. Verifichi che le risposte siano accurate

Sviluppo locale

Per i test locali, utilizzi URL localhost:

<script 
  src="http://localhost:3000/embed/widget.js" 
  data-chatbot-id="YOUR_CHATBOT_ID" 
  async
></script>

Risoluzione dei problemi

Widget non viene visualizzato

1. Controlli la console del browser per errori
2. Verifichi che l'ID del chatbot sia corretto
3. Assicuri che il chatbot sia attivo (non disabilitato)
4. Verifichi se gli ad blocker stanno interferendo

Conflitti di stile

Se il CSS del suo sito entra in conflitto:

• Il Widget utilizza shadow DOM per l'isolamento
• Controlli i valori di z-index
• Assicuri che non vi siano override con !important

Prestazioni

Il Widget è progettato per avere un impatto minimo:

• Lazy loaded
• < 50KB total size
• Non-blocking
• Cached aggressively

Passi successivi

• Plugin WordPress →
• Integrazione Shopify →
• Gestione FAQ →