Crea un agente, imposta l'autenticazione OAuth e incorpora il widget sul tuo sito web.
L'app del widget è ospitata su widget.companin.tech e fornisce un modo semplice per incorporare un AI Agent per il supporto clienti nel tuo sito web. Per iniziare, dovrai creare un agente e un'applicazione OAuth.
Il widget è un'applicazione leggera e autonoma che funziona in un iframe isolato sul tuo sito web. Questa architettura garantisce che il widget non confligga con il tuo CSS o JavaScript esistenti, mantenendo ottime prestazioni e sicurezza.
⚡ Distribuzione Rapida
La maggior parte degli sviluppatori ha il widget in esecuzione sul proprio sito entro 10 minuti. Il processo di configurazione prevede solo tre passaggi: creazione delle credenziali, configurazione dell'aspetto e aggiunta di un singolo tag script al tuo HTML.
Per prima cosa, crea un AI Agent per il supporto clienti nel tuo dashboard:
Il tuo agente è il cervello AI dietro il widget. Elabora i messaggi degli utenti, mantiene il contesto della conversazione e genera risposte intelligenti. Ogni agente può essere personalizzato con istruzioni specifiche, tratti della personalità e basi di conoscenza per adattarsi al tuo caso d'uso.
Suggerimento: Fornisci al tuo agente istruzioni chiare e specifiche sul suo ruolo e sulle sue limitazioni. Ad esempio: "Sei un agente di supporto clienti utile per un prodotto SaaS. Puoi rispondere a domande su funzionalità, prezzi e gestione degli account. Per problemi tecnici, indirizza gli utenti a creare un ticket di supporto."
Crea un'applicazione OAuth per autenticare il tuo widget:
client_id dall'applicazione creataIl modo più semplice per integrare il widget è incorporarlo direttamente utilizzando un iframe. Questo metodo non richiede inizializzazione JavaScript e funziona immediatamente. Per più iframe in una pagina, mantieni ogni incorporamento limitato al proprio contenitore e parametri.
<iframe src="https://widget.companin.tech/embed/session?key=YOUR_WIDGET_KEY&locale=en" style="border:none; width:100%; height:600px; border-radius:8px;" title="Customer Support AI Agent Widget"></iframe>Sostituisci YOUR_WIDGET_KEY con la chiave di installazione del tuo widget (il valore wgt_… — copialo dalla pagina Widget o dalla pagina di Installazione nel dashboard). Il parametro locale può essere impostato per corrispondere alla lingua del tuo sito.
Il metodo di integrazione consigliato è utilizzare il nostro loader di widget JavaScript, che fornisce dimensionamento automatico, gestione della configurazione e comportamento reattivo.
Aggiungi il seguente tag script alla tua pagina HTML:
<script src="https://widget.companin.tech/widget.js" data-widget-key="YOUR_WIDGET_KEY" data-instance-id="support-widget" data-locale="en" data-theme="system" async></script>Ogni attributo ha uno scopo specifico nella configurazione del tuo widget:
data-widget-key: L'ID Widget del tuo widget - Il valore singolo di cui la maggior parte delle installazioni ha bisogno. Risolve il tuo client, agente e server di configurazione lato server, quindi non è necessario incollarli separatamente.I tre attributi qui sotto sono un'alternativa avanzata a data-widget-key - usali per configurazioni multiistanza dove hai bisogno di mirare a un client, agente o configurazione specifici:
data-client-id: Il tuo ID client OAuth - Questo autentica la tua applicazione con la nostra API. Pensalo come la password della tua app.data-agent-id: L'UUID del tuo agente - Questo identifica quale Agente AI di Supporto Clienti gestisce le conversazioni.data-config-id: L'UUID della tua configurazione del widget - Questo determina come appare e si comporta il tuo widget (colori, dimensioni, posizione, ecc.).data-instance-id: ID istanza unico per widget - Richiesto quando si incorporano più widget sulla stessa pagina per evitare collisioni e abilitare il targeting API per istanza.data-custom-css: Deprecato. Impostare questo attributo registra un avviso nella console e non ha effetto. Imposta custom_css sulla configurazione del tuo widget nel dashboard invece — viene caricato dalla configurazione e iniettato automaticamente nell'iframe.data-locale: Codice lingua (ad es., "en", "es", "fr") - Imposta la lingua di visualizzazione del widget. L'agente risponderà comunque in qualsiasi lingua scritta dagli utenti.data-theme: Modalità tema - light, dark, o system (segui il dispositivo del visitatore). Sceglie quale palette di colori (configurata nel tuo dashboard) mostra il widget. Ometti per utilizzare il tuo predefinito salvato.data-dev: Imposta su "true" per la modalità di sviluppo (localhost) - Usa questo quando testi localmente. Rimuovi o imposta su "false" per la produzione.Il widget si occuperà automaticamente di:
start_open della configurazione.start_open dalla tua configurazionedata-dev="true" per il testing in localhost