Inapoi la Tutoriale
Incepator
15 minAdauga un chatbot pe site-ul tau
Invata cum sa integrezi un agent AI conversational pe orice website folosind widget-ul nostru.
Ce vei invata
- Cum sa adaugi widget-ul VAI pe orice site
- Cum sa personalizezi aspectul widget-ului
- Cum sa configurezi mesajul de intampinare
Cerinte
- Cont VAI Portal (gratuit)
- Acces la codul HTML al site-ului tau
Pasul 1: Obtine codul widget
Din Dashboard, navigheaza la Agenti → Widget si copiaza codul de integrare:
<script>
(function(w,d,s,l,i){
w[l]=w[l]||[];
var f=d.getElementsByTagName(s)[0],
j=d.createElement(s);
j.async=true;
j.src='https://cdn.vai-portal.ro/widget.js';
j.setAttribute('data-agent-id', 'suport-it');
j.setAttribute('data-token', 'vai_pk_xxxx');
f.parentNode.insertBefore(j,f);
})(window,document,'script','vai');
</script>Pasul 2: Adauga codul pe site
Lipeste codul inainte de tag-ul </body> in pagina HTML:
<html>
<head>...</head>
<body>
<!-- Continutul site-ului -->
<!-- Widget VAI - inainte de /body -->
<script>...</script>
</body>
</html>Pasul 3: Personalizeaza widget-ul
Adauga atribute pentru a schimba aspectul:
data-position="bottom-right" // Pozitia: bottom-left sau bottom-right
data-primary-color="#6366f1" // Culoarea principala
data-accent-color="#8b5cf6" // Culoarea accent
data-greeting="Buna! Cu ce te pot ajuta azi?"
data-placeholder="Scrie mesajul tau..."
data-show-branding="false" // Ascunde logo VAI (doar Pro)Pasul 4: Testeaza
Deschide site-ul intr-un browser si verifica:
- Widget-ul apare in coltul din dreapta jos
- Click pe buton deschide fereastra de chat
- Mesajele sunt procesate de agent
Depanare
Widget-ul nu apare
- Verifica consola browser-ului pentru erori
- Asigura-te ca token-ul este valid
- Verifica ca scriptul este incarcat (Network tab)
Agentul nu raspunde
- Verifica ca ai tokeni disponibili in cont
- Verifica ca agent ID-ul este corect
Felicitari! Ai terminat acest tutorial.