Inlinechat insluiten en instellingen
Inlinechat
De inlinechat (<web-chat-agent-inline>) wordt binnen uw paginalayout weergegeven in plaats van eroverheen te zweven. Gebruik deze voor een helpcenter, productadviseur, intern portaal of paginavullende assistent.
Open Dashboard → uw assistent → Kanalen → Inlinechat. Het kanaal heeft een eigen installatiecode, instellingen en live voorbeeld. Het kan op dezelfde site draaien als de zwevende chatwidget met een andere titel, welkomstinhoud, hoogte, prompts en styling.
Inlinechat installeren
Vouw Installatiedetails tonen uit en kopieer de vooraf ingevulde code. De handmatige vorm is:
<script src="https://webchatagent.com/widget/chat-widget-inline.js" async></script>
<web-chat-agent-inline chatbot-id="YOUR_CHATBOT_ID"></web-chat-agent-inline>
Plaats het element precies waar de chat moet verschijnen en laad het script eenmaal per pagina. Het element vult de bovenliggende container, dus uw layout bepaalt de breedte:
<div style="max-width: 720px; margin: 0 auto;">
<web-chat-agent-inline chatbot-id="YOUR_CHATBOT_ID"></web-chat-agent-inline>
</div>
Gebruik de vanuit het dashboard gekopieerde versie om typefouten in het Chatbot-ID te voorkomen. Het installatiepaneel kan ook controleren of deze assistent op een toegestaan domein wordt geladen.
Uiterlijk
| Instelling | Wat het aanpast |
|---|---|
| Titel | Koptekst op het startscherm. Laat dit leeg om de koptekst te verbergen. |
| Themakleur | Accentkleur voor knoppen en bezoekersberichten. |
| Lettertype | Lettertype van de widget. Zoek in Google Fonts of voeg de naam van een aangepast lettertype toe. |
| Hoogte | Hoogte van de chatcontainer als CSS-lengte zoals 600px, 80vh of 100%. |
| Welkomstbericht | Inhoud die wordt getoond vóór het eerste bericht van de bezoeker. |
Het live voorbeeld wordt bijgewerkt met deze instellingen. Het verzenden van een bericht in het voorbeeld gebruikt de echte assistent en verbruikt het normale berichttegoed.
Afbeeldingen
Voeg een optionele Welkomstafbeelding toe via een upload of URL. Deze verschijnt op het startscherm boven het welkomstbericht. Gebruik een geoptimaliseerd logo of een geoptimaliseerde banner en controleer het resultaat op de smalste containerbreedte die op uw site wordt gebruikt.
Inhoud & gedrag
| Instelling | Wat het aanpast |
|---|---|
| Welkomstbericht | Introductie met rich text boven het invoerveld vóór het eerste bericht. |
| Bronnen tonen | Voegt beschikbare bronverwijzingen toe aan antwoorden. |
| AI-markering onder botantwoorden | Markeert elk assistent-antwoord als gegenereerd door AI. Dit staat altijd aan. |
| Automatische vertaling | Vertaalt interfacelabels naar de gedetecteerde taal van de bezoeker. |
| Bestand uploaden | Laat bezoekers bestanden bijvoegen wanneer het pakket dit toestaat. |
| Promptknoppen | Startvragen op het startscherm, ook wel voorgestelde vragen of gesprekstarters genoemd. Elk item heeft een zichtbare titel en een verzonden bericht naar de assistent. Maximaal 10 items. |
Promptknoppen kunnen als concept worden gegenereerd met AI of handmatig worden toegevoegd. Houd de set kort en gebruik vragen die de daadwerkelijke kennis van de assistent aantonen.
Geavanceerd
| Instelling | Wat het aanpast |
|---|---|
| Taaldetectiebron | Gebruikt de browsertaal of het <html lang>-attribuut van de pagina voor automatische vertaling. |
| Branding verbergen | Verwijdert de “Powered by”-link wanneer het pakket dit toestaat. |
| Eigen CSS | Voegt CSS toe aan de inline-widget met behulp van de gedocumenteerde stabiele selectors. |
De CSS-editor bevat vooraf ingestelde presets, een overzicht van stabiele selectors, een tekenteller en een live voorbeeld. Zie Eigen CSS.
Optionele contextattributen
Het inline-element accepteert naast chatbot-id ook tracking-consent en context-data. Contextgegevens kunnen niet-geheime sessie-informatie doorgeven vanaf de insluitende pagina:
<web-chat-agent-inline
chatbot-id="YOUR_CHATBOT_ID"
context-data="Customer=Jane Doe;OrderID=A-1023"
></web-chat-agent-inline>
De AI kan deze waarden gebruiken in antwoorden en goedgekeurde tool-aanroepen. Plaats geen geheimen, inloggegevens of informatie waartoe de huidige bezoeker niet bevoegd is in HTML-attributen. Zie Sessiecontextgegevens voor formaten, limieten en het runtime-event.
Zwevend vs. inline
| Chatwidget | Inlinechat | |
|---|---|---|
| Plaatsing | Vaste zwevende knop en overlay | Binnen uw paginalayout |
| Element | <web-chat-agent> | <web-chat-agent-inline> |
| Script | /widget/web-chat-agent.js | /widget/chat-widget-inline.js |
| Tekstballon en proactieve triggers | Ja | Nee |
| Action Bar en formulieren | Ja | Nee |
| Live chat overname | Ja | Nee |
| Instellingen | Kanalen → Chatwidget | Kanalen → Inlinechat |
Testen voor publicatie
- Sla de inline-instellingen op.
- Stuur één onderbouwde vraag in het live voorbeeld.
- Open de echte pagina en controleer de hoogte, het scrolgedrag, het laden van lettertypen, bronnen en promptknoppen.
- Test de kleinste mobiele container.
- Als beide widgettypen zijn geïnstalleerd, controleer dan of ze de beoogde onafhankelijke instellingen gebruiken.