Integrazione React
Aggiungi un chatbot AI alla tua app React
Aggiungi il widget di intoCHAT con un tag script in index.html, oppure caricalo da un piccolo componente con useEffect. Resta al suo posto durante i cambi di route lato client.
Ultimo aggiornamento:
Come funziona intoCHAT in React
Il widget di intoCHAT è un semplice script, non un componente React. Legge l'ID dell'agente dall'attributo data-chatbot-id dell'elemento script che lo ha caricato, poi aggiunge una bolla della chat a document.body, fuori dall'albero di React. Per questo funziona con qualsiasi router o libreria di stato, e i re-render non lo toccano mai. Colori, posizione e messaggio di benvenuto si impostano in intoCHAT, quindi per cambiarli non serve una nuova build.
Installare intoCHAT in un'app React
Crea e addestra l'agente
Registrati su intoCHAT, crea un agente e aggiungi il tuo sito nella scheda Knowledge. La scansione esegue il rendering delle pagine basate su JavaScript prima di leggerle, quindi le route che la tua app renderizza nel browser vengono lette come le vedono i visitatori.
Copia il tag script
Apri la scheda Share e copia il codice sotto Bubble Chat. Contiene già l'ID del tuo agente.
Opzione più semplice: incollalo in index.html
Incolla il tag script subito prima del tag di chiusura del body in index.html: nella radice del progetto con Vite, o in public/index.html con Create React App.
Oppure caricalo da un componente
Se preferisci tenerlo nel codice, aggiungi il componente IntoChatWidget qui sotto e renderizzalo una volta nel componente principale, ad esempio App. Usa una sola delle due opzioni.
Controlla
Avvia la tua app. La bolla della chat compare nell'angolo in basso e resta lì mentre passi da una route all'altra.
IntoChatWidget.jsx
import { useEffect } from 'react'
export default function IntoChatWidget() {
useEffect(() => {
// Load the widget only once, even when StrictMode runs effects twice
if (document.getElementById('intochat-embed')) return
const script = document.createElement('script')
script.id = 'intochat-embed'
script.src = 'https://www.intochat.ai/api/embed.js'
script.setAttribute('data-chatbot-id', 'YOUR_AGENT_ID')
document.body.appendChild(script)
}, [])
return null
}Il widget legge l'ID dell'agente dall'attributo data-chatbot-id dell'elemento script che lo ha caricato, quindi imposta l'attributo prima di aggiungere l'elemento alla pagina. Il controllo sull'id evita una seconda copia in sviluppo.
Cosa può fare l'agente nella tua app React
Azioni lato client
Registra funzioni con window.IntoChatActions.register e l'agente può chiamarle durante la chat per leggere lo stato della tua app o avviare qualcosa che hai definito.
Azioni API personalizzate
Fai chiamare all'agente la tua API HTTP, con autenticazione bearer, basic, chiave API o header personalizzati. Importa una richiesta da cURL e scegli quali campi della risposta vede il modello.
Legge le pagine renderizzate
La scansione del sito esegue il rendering delle pagine basate su JavaScript prima di leggerle, trova fino a 500 URL da sitemap e link e ti permette di escludere percorsi con dei pattern.
Risposte basate sulle fonti
Ricerca ibrida semantica e per parole chiave sui tuoi contenuti, con regole che tengono le risposte sulle tue fonti, resistono alla prompt injection e dicono quando la risposta non c'è.
Raccolta lead
Chiedi email o numero di telefono in chat, manualmente, con regole o quando lo decide l'AI. I lead ti arrivano via email e si esportano in CSV.
Nuovo stile senza nuova build
Colori, avatar, icona del pulsante, posizione e messaggio di benvenuto si impostano nella scheda Appearance e arrivano con il widget, non dal tuo bundle.
Domande frequenti
Meglio index.html o il componente?
index.html è l'opzione più semplice e carica il widget su ogni pagina. Usa il componente quando vuoi decidere nel codice se caricarlo, ad esempio solo in produzione o solo dopo che il visitatore ha accettato i cookie. Usa una sola delle due opzioni, altrimenti avrai due bolle.
Perché in sviluppo vedo due bolle della chat?
React StrictMode esegue gli effect due volte in sviluppo, e il widget aggiunge una nuova bolla ogni volta che il suo script viene eseguito. Il controllo sull'id all'inizio dell'effect impedisce alla seconda esecuzione di aggiungere un altro script. Verifica anche che lo script non sia pure in index.html.
Il widget rallenta la mia app React?
Caricato dal componente, lo script viene aggiunto dopo il rendering della tua app, quindi non blocca il primo render. In index.html è un normale script alla fine del body. In entrambi i casi la finestra della chat gira in un proprio iframe servito da intoCHAT, separato dal codice della tua app.
Funziona con React Router e altri sistemi di routing lato client?
Sì. Il widget vive in document.body, fuori dalla root di React, quindi cambi di route e re-render non lo toccano. Resta anche se il componente che lo ha caricato viene smontato, fino al successivo caricamento completo della pagina.
L'agente può eseguire codice nella mia app React?
Sì, con le azioni lato client. Registra una funzione con window.IntoChatActions.register e l'agente può chiamarla durante la chat per leggere lo stato della tua app o avviare qualcosa che hai definito. Se il tuo codice gira prima che il widget sia caricato, inserisci nome e funzione come coppia in window.IntoChatActionsQueue e il widget li registra all'avvio.
La mia app ha una Content Security Policy. Cosa devo consentire?
Consenti www.intochat.ai in script-src per lo script, in connect-src per caricare le impostazioni dell'agente e in frame-src per la finestra della chat. Senza queste voci il browser blocca il widget e la bolla non compare.
Guardalo rispondere dal tuo sito
Incolla l’indirizzo del tuo sito e chatta con un agente creato dalle tue pagine. Ci vuole circa un minuto.
Crea il tuo agente gratisPiano gratuito, nessuna carta di credito.