De widget aanpassen
Laat de OneTwoAgent-widget eruitzien en werken als onderdeel van je product, zonder CSS: thema, kleuren, 45 Google Fonts, ballonvormen, launcher-iconen en -animaties, een startscherm, Voice en waar de widget verschijnt.
Waar je de widget aanpast
Open Channels -> Widget. Elke wijziging zie je direct in het live voorbeeld.
- Bekijk Home, Chat en Talk vooraf op desktop en op mobiel.
- Geen CSS: kleuren, lettertypen, vormen, launcher, startscherm en Voice zijn allemaal instellingen.
- Dezelfde instellingen gelden overal waar de widget is geïnstalleerd: op je website en in je app.
Weergaven en het eerste scherm
- Home: een startscherm in je huisstijl met je kop, een primaire knop en links.
- Chat: het gesprek met de AI-supportagent en je team.
- Talk: een Voice-gesprek met de agent.
- Kies met welke van de drie de widget opent.
Thema en kleuren
- Licht of donker thema.
- Kleuren voor de header, berichtballonnen van assistent en klant, chatachtergrond, invoerveld, verzendknop, launcher, knoppen en sluitknop.
- De sluitknop kan een eigen achtergrond en rand krijgen.
Typografie
- 45 Google Fonts: sans-serif, serif en monospace.
- Stel het lettertype apart in voor de header, berichten van de assistent, berichten van de klant, het invoerveld en de launcher.
- Elk element heeft een eigen lettergrootte.
Berichten en header
- 6 ballonvormen, voor berichten van de assistent of voor beide kanten.
- Een keuze uit verzendiconen.
- Header: naam van de assistent, statusregel en een optionele avatar of logo.
Launcher
- 15 launcher-iconen en je eigen launcherkleur.
- Optionele launchertekst, op mobiel desgewenst alleen het icoon.
- 13 launcher-animaties die de aandacht trekken zonder in de weg te zitten.
Startscherm
- Kop, een korte regel erboven en de tekst van de primaire knop.
- Maximaal 3 links, bijvoorbeeld naar je documentatie, statuspagina of prijzen.
- Een geanimeerde bol, met een textuur die je ook in Talk kunt gebruiken.
- 16 geanimeerde achtergrondstijlen, waaronder mesh, halo, rays, glow, stars, dots, grain en halftone, of een effen achtergrond.
- Geef de achtergrond een tint met een van je widgetkleuren of een vooraf ingestelde kleur, en stel intensiteit en beweging in: stil, rustig of levendig.
Talk (Voice)
- Zet Talk aan of uit.
- Kies een stem uit de stemmencatalogus, gefilterd op taal, accent en geslacht, en luister hem af voordat je kiest.
- Schrijf het gesproken welkomstbericht en kies de textuur van de bol.
- Hoe Voice werkt: Voice, bestanden en screenshots.
Teksten en gedrag
- Welkomstbericht, placeholder van het invoerveld en launchertekst.
- Bestandsuploads aan of uit.
- Compacte modus voor een kleinere widget.
Waar de widget verschijnt
- Toegestane domeinen: de widget laadt alleen op je eigen domeinen.
- Paginabeperkingen: toegestane en uitgesloten pagina's, zoals /checkout of /account.
- Installatiestappen: Websitewidget.
Gerelateerde handleidingen
Ga verder met de volgende instelstappen rond kanalen, boekingen, planning of automatisering.
Installeer de widget en geef hem je huisstijl; chat, Voice, bestanden en talen.
Voice in de widget, spraakberichten, screenshots, bestanden en links.
CLI + coding agent setup, live account data, support views and the manual integration architecture.
Veelgestelde vragen
Heb ik CSS of een developer nodig om de widget in mijn huisstijl te zetten?
Nee. Alle ontwerp- en gedragsinstellingen staan in Channels -> Widget, en elke wijziging zie je direct in het live voorbeeld.
Kan de widget het lettertype van mijn merk gebruiken?
Kies uit 45 Google Fonts (sans-serif, serif en monospace), apart in te stellen voor de header, berichten van de assistent, berichten van de klant, het invoerveld en de launcher, elk met een eigen grootte.
Kan de widget direct in Voice openen?
Ja. Kies Home, Chat of Talk als het scherm waarop de widget opent.
Kan ik de widget op bepaalde pagina's verbergen?
Ja. Schakel paginabeperkingen in en geef toegestane of uitgesloten pagina's op, bijvoorbeeld /checkout. Toegestane domeinen voorkomen dat de widgetcode op andere sites wordt hergebruikt.