Crea un agente, imposta l'autenticazione OAuth e incorpora il widget nel tuo sito web.
L'app widget è ospitata su widget.companin.tech e fornisce un modo semplice per incorporare un Agente AI 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 viene eseguita 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 Agente AI per il Supporto Clienti nella tua 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 su 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_… — trovalo nella pagina Widget o Installazione nella dashboard). Il parametro locale può essere impostato per corrispondere alla lingua del tuo sito.
Il metodo di integrazione consigliato è utilizzare il nostro caricatore 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" async></script>Ogni attributo ha uno scopo specifico nella configurazione del tuo widget:
data-widget-key: L'ID del Widget del tuo widget - Il singolo valore di cui la maggior parte delle installazioni ha bisogno. Risolve il tuo client, agente e server di configurazione lato server, quindi non li incolli separatamente.I tre attributi seguenti sono un'alternativa avanzata a data-widget-key - usali per configurazioni multi-istanza in cui è necessario indirizzare esplicitamente un cliente, un agente o una configurazione specifica:
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 univoco per ogni istanza del 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-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 configurazionestart_open dalla tua configurazionedata-dev="true" per test locali