Website

Je kunt je Quickchat AI-agent op drie manieren op het web aanbieden. Kies wat bij de gewenste weergave past:

• Widget: de zwevende chatknop in de hoek van je site. Geschikt voor algemene ondersteuning.
• Embed: een chatvenster dat precies op de gewenste plek in een pagina staat. Geschikt voor een specifiek appscherm, een helpcentrumpagina of een productdetailpagina.
• Chat Page: een gehoste chat op volledig scherm via Quickchat, zonder installatie of code. Handig om een link te delen via bijvoorbeeld een supportmail, interne Slack of met bètatesters, zonder iets in hun browser te veranderen.

Installeer je gekozen weergave via Channels → Your Website → Install. De pagina heeft drie subtabs: Install voor de installatiemethode, Appearance voor de vormgeving en Text Content voor de teksten en labels die bezoekers zien. De tab Install begint met een methodekeuze, heeft een aparte sectie voor beschikbaarheid en toegang, en toont een kopieerbare Scenario ID voor plugins en de API.

Optionele hulpmiddelen voor de installatie

• Vergelijk publicatiemethoden. Vergelijk je opgegeven kanalen, toegang tot je website en benodigde functies met de installatieopties van Quickchat AI. Dit inspecteert je website of account niet.

• Vergelijk HTML en Markdown van een voorbeeldpagina. Haal de oorspronkelijke HTML, Markdown-inhoud en toollinks van een vast Quickchat AI-voorbeeld op. Dit voert geen JavaScript uit en inspecteert geen willekeurige websites.

Widget

Met de Widget plaats je je Quickchat AI-agent rechtstreeks op je website, zodat bezoekers eenvoudig met de AI kunnen praten. De Widget verschijnt meestal als chatknop rechtsonder. Na een klik opent een chatvenster waarin bezoekers vragen kunnen stellen, hulp kunnen krijgen en informatie kunnen opzoeken.

De Widget aan je website toevoegen

Open Channels → Your Website → Install. De tab begint met ‘How do you want to add your AI Agent?’ en toont de installatiemethoden, met de eenvoudigste eerst. Kies wat bij je site past:

• WordPress: installeer onze gratis Quickchat AI Agent-plugin en plak je Scenario ID. De Widget verschijnt automatisch; je hoeft geen themacode aan te passen.
• Shopify: voeg de Widget toe via de Theme Editor van je winkel. Zie de Shopify-handleiding.
• Webflow, Wix & others: kopieer één codefragment en plak het in de instelling voor aangepaste code die voor de hele site geldt, op alle pagina’s. Gebruik geen Embed- of HTML-element op één pagina. Zie Websitebouwers.
• Share a link instead: installeer niets en deel de link naar je gehoste Chat Page.
• Install manually with code: kopieer de onbewerkte Widget- of Embed-code en plak deze zelf in je HTML.

Elke methode opent een gericht stappenpaneel met alleen de benodigde code of ID.

Je Scenario ID staat bovenaan de tab Install als kopieerbaar veld. Plugins en de API gebruiken deze identifier. Kopieer hem hier als een installatiestap erom vraagt.

Handmatig installeren met code

Beheer je zelf de HTML, open dan Install manually with code op de tab Install en volg deze stappen:

1. Kopieer het Widget-fragment.
2. Open het HTML-bestand van je pagina. Gebruik bij een websitebouwer de instelling voor code op de hele site; zie Websitebouwers.
3. Plak het fragment vlak vóór de afsluitende </body>-tag op elke pagina waar de Widget moet verschijnen.

Controleer een Widget-fragment tegen de Scenario ID die je opgeeft. De controle leest de geplakte code en haalt je website niet op.

Websitebouwers

Voeg bij Webflow, Wix, Squarespace, Hostinger en vergelijkbare bouwers de Widget één keer toe via de instelling voor code op de hele site:

1. Open de instelling die code aan elke pagina toevoegt. Deze heet bijvoorbeeld Custom code, Code injection, Footer code of Body end.
2. Plak daar het Widget-fragment en pas het toe op alle pagina’s. Kun je de positie kiezen, kies dan de footer of het einde van de body. Het fragment werkt niet in de head.
3. Publiceer je site. De chatknop verschijnt op elke pagina.

Opgepast

Voeg de Widget niet toe via een Embed- of HTML-element op één pagina. Veel bouwers tonen die elementen in een klein, apart frame waarin de Widget niet kan openen. Zelfs als hij wel laadt, zou hij alleen op die ene pagina verschijnen.

Waar je de instelling voor de hele site vindt:

Websitebouwer	Instelling voor code op de hele site
Webflow	Site settings → Custom code → Footer code
Wix	Settings → Custom Code, daarna All pages en Body - end. Vereist een gekoppeld domein.
Squarespace	Custom Code → Code Injection → Footer. Beschikbaar bij Core, Plus, Advanced en sommige oudere abonnementen.
Hostinger Website Builder	More (⋯) → Integrations → Custom code. Scripts worden automatisch aan het einde van de pagina geladen.

Menu’s kunnen veranderen en vertaald zijn naar de taal van je websitebouwer. Heeft jouw bouwer of abonnement geen instelling voor code op de hele site, deel dan je Chat Page-link.

Hulp nodig?

Geen ontwikkelaar? Onder Need a hand? op de tab Install staan twee snelkoppelingen:

• Ask AI for help: opent de assistent in de app met een vooraf ingevulde vraag over het toevoegen van de agent aan je website.
• Email instructions to a developer: stuurt een collega alles wat nodig is, waaronder het Widget-fragment, je Scenario ID en een link naar deze handleiding, zodat die de installatie kan uitvoeren.

Neem voor meer hulp contact op via contact@quickchat.ai.

Chat Page

De Chat Page is een gehoste versie van je AI-agent op volledig scherm via een Quickchat-URL. Er hoeft niets te worden geïnstalleerd. Deel de link en bezoekers kunnen direct in hun browser met je agent praten. Gebruik dit wanneer:

• Je een chat wilt, maar geen website hebt of de code niet wilt aanpassen.
• Je de AI intern deelt met een kleine groep, zoals bètatesters, je supportteam of potentiële klanten, en een link met toegangscontrole nodig hebt in plaats van een openbare Widget.
• Je de AI als vervolgmogelijkheid wilt delen via e-mail, Slack of je CRM.

Stel onder Install → Chat Page Access in wie de Chat Page mag openen. Zie Toegangscontrole.

Een nieuw gesprek starten

Zo begin je opnieuw met een lege chat:

• Widget of Embed: Open de chat en klik op de knop met een pen in een vierkant rechtsboven in het chatvenster.
• Chat Page: Kies New chat in de zijbalk of gebruik de knop met een pen in een vierkant in de header.

Dit start een nieuw gesprek met je AI-agent. Het vorige gesprek blijft in de Inbox. De Widget sluiten en opnieuw openen of de pagina vernieuwen kan het bestaande gesprek hervatten. De AI vragen om te ‘resetten’ of ‘de chat te wissen’ start geen nieuw gesprek. Je hoeft geen browsercookies te verwijderen.

Toegangscontrole

Op de tab Install staan de toegangsinstellingen in de uitklapbare sectie Availability and access. Hier vind je twee instellingen voor je publicatie:

Widget & Embed access

De schakelaar bovenaan Availability and access. Als deze aanstaat, werken de Widget- en Embed-scripts normaal in de browser van bezoekers. Als deze uitstaat, zijn Widget en Embed op je site niet beschikbaar, ook als de code nog aanwezig is. Handig om de AI tijdelijk offline te halen zonder het fragment te verwijderen, of om publieke toegang te beperken terwijl de Chat Page openblijft voor uitgenodigde gebruikers.

Chat Page Access

Los van de Widget- en Embed-schakelaar stel je in wie de Chat Page kan openen:

• Anyone: de Chat Page-URL is openbaar. Iedereen met de link kan hem gebruiken.
• Invited users only: alleen per e-mail uitgenodigde Chat Users mogen de Chat Page gebruiken. Ze moeten zich aanmelden.
• Nobody: de Chat Page is volledig uitgeschakeld.

De link Invite Chat Users opent Settings → Organization → Team Members. Het huidige uitnodigingsformulier biedt teamrollen met dashboardrechten en heeft geen afzonderlijke rol voor alleen chat of sectie Chat Users. Bekijk Team Members en rollen voordat je iemand uitnodigt.

Aanpassen

Met Appearance en Text Content pas je het uiterlijk en de bezoekersteksten van Widget, Embed en Chat Page aan. Alle drie delen deze instellingen. Een wijziging geldt dus overal waar je agent is gepubliceerd.

Het rechterpaneel van Install, Appearance en Text Content heeft eigen voorbeeldinstellingen. Wissel tussen Widget, Embed en Chat Page, en tussen Desktop en Mobile, om wijzigingen te bekijken voordat je publiceert.

Appearance

De visuele instellingen zijn gegroepeerd onder Branding, Size & Position, Theme en Other Settings.

Branding

• AI Agent Avatar: de profielfoto of het logo van de agent. Eén afbeelding van maximaal 5 MB wordt zowel in de chatheader als op de startknop gebruikt. Dit is één instelling, niet twee: één upload verschijnt op beide plekken en vervangt het vroegere afzonderlijke headerlogo en starticoon. Elke agent begint met een ingebouwde standaardavatar. Reset to default herstelt deze; verwijderen zorgt dat er helemaal geen avatar verschijnt. Beschikbaar op elk abonnement, inclusief Free.

AI Agent Avatar geldt voor Widget, Embed en Chat Page, maar niet voor Discord. Daar komt de botavatar uit de Discord-app. Zie Discord.

Size & Position

• Launcher size: Classic, Input Only of Small. Bepaalt hoe de startknop eruitziet voordat de chat wordt geopend.
• De startknop sluiten: de Classic-variant heeft rechtsboven een kleine sluitknop. Op desktop verschijnt deze bij aanwijzen; op aanraakschermen is hij altijd zichtbaar. De Widget wordt alleen voor de huidige paginaweergave verborgen en verschijnt weer bij de volgende paginalaadactie. De andere formaten hebben geen sluitknop.
• Launcher label: alleen zichtbaar bij Small. Aangepaste tekst van maximaal 25 tekens op de kleine startknop, bijvoorbeeld ‘Vraag AI’ of ‘Chat’. Laat het veld leeg voor alleen een icoon.
• Widget position: linksonder, middenonder of rechtsonder.
• Chat window dimensions: breedte van 300–700px en hoogte van 400–1200px.
• Draggable launcher: laat bezoekers de startknop verslepen. Handig als hij belangrijke inhoud bedekt.

Theme

Kies de kleuren van de chat:

• Light en Dark zijn vaste stijlen die voor elk account hetzelfde zijn.
• Custom geeft toegang tot een eigen kleurenpalet. Je kunt kleuren kiezen voor de achtergrond, header en headertekst, accentkleur voor onder meer de startknop vóór de chat, suggesties en beoordelingen, berichtballonnen en hun tekst, AI-berichttekst, link color, invoerveld, randen en meer. Elke kleur wordt op WCAG AA-contrast met de achtergrond gecontroleerd. Je krijgt een waarschuwing als een combinatie moeilijk leesbaar is.

Merkkleuren voor header en accenten horen bij Custom. Light en Dark blijven neutrale stijlen; omschakelen neemt geen aangepaste kleuren mee.

Onder Transparency bepaalt Background hoe doorschijnend het chatvenster is. Dit werkt in elke themamodus; het thema bepaalt de tint:

• Solid: een ondoorzichtige achtergrond. Dit is de standaard.
• Glass: het venster wordt doorschijnend en de website erachter vervaagt als achter matglas. De tint is wit bij Light, donker bij Dark en je gekozen achtergrondkleur bij Custom. Een afwijkende headerkleur blijft bij Custom behouden, zodat je huisstijl zichtbaar blijft. Glass opacity bepaalt hoe sterk de tint de pagina bedekt: vanaf het minimum waarbij tekst op elke website leesbaar blijft, 50% bij Light, 65% bij Dark en afhankelijk van de kleuren bij Custom, tot 95%. Werkt geen enkele doorzichtigheid met je Custom-kleuren, dan gebruikt de Widget een ondoorzichtige achtergrond en leggen de instellingen uit waarom. Glass blijft geselecteerd en wordt weer toegepast zodra je tekst- of achtergrondkleuren genoeg contrast bieden.

Transparantie geldt voor de Widget, ook op telefoons, en voor Embed. De volledige Chat Page heeft altijd een ondoorzichtige achtergrond. Bezoekers die op hun apparaat ‘Transparantie verminderen’ hebben ingeschakeld, zien Solid in Chrome en Edge, de browsers die deze instelling doorgeven. Kan een browser de achtergrond niet vervagen, dan blijft Glass vrijwel ondoorzichtig om tekst leesbaar te houden.

Bij Custom krijgt de Chat Page ook eigen zijbalkkleuren: Sidebar background, Sidebar text, Sidebar hover en Sidebar hover text. Ze gelden alleen voor de Chat Page op volledig scherm, niet voor Widget of Embed. Laat tekstkleuren leeg om automatisch een leesbare kleur bij de gekozen achtergrond te gebruiken.

Je kunt ook de corner radius, de afronding van tekstballonnen, invoervelden en knoppen, en de text size instellen. Beide werken in elke themamodus.

Other Settings

• Voice Input: laat bezoekers een gesproken bericht opnemen met de microfoon in de chat. De opname wordt naar tekst in het invoerveld omgezet, zodat ze die vóór verzending kunnen aanpassen. Opnames stoppen automatisch na twee minuten. Beschikbaar op betaalde abonnementen.
• File Attachments: laat bezoekers een afbeelding of document toevoegen. Staat standaard aan; zet dit uit om de bijlageknop te verwijderen.
• Auto-open Widget: opent de Widget automatisch zodra de pagina laadt.
• Hide Quickchat AI Branding: verbergt de voettekst ‘Powered by Quickchat AI’ voor een volledig eigen merkervaring. Beschikbaar op abonnementen met white-labeling.

Wil je bezoekers gesprekken laten beoordelen, open dan Conversations → Insights → Conversation Rating. Daar staan zowel instellingen als resultaten. Zie Conversation Rating.

Text Content

Open Channels → Your Website → Text Content om de begroeting en andere bezoekersteksten te bewerken:

• Header text: tekst bovenaan het chatvenster.
• Welcome message: het eerste bericht van de agent aan het begin van elk gesprek, bijvoorbeeld ‘Hoi, kan ik je helpen?’.
• Show as a pop-up: toont het welkomstbericht als zwevende tekstballon naast de startknop om aandacht te trekken voordat een bezoeker klikt. Dit wordt soms een teaser of launcher message genoemd. De ballon gebruikt de tekst van Welcome message zelf; wijzig dat veld om de inhoud aan te passen.
• Conversation starters: maximaal 3 voorbeeldberichten die verschijnen voordat de bezoeker typt. Een klik verstuurt het gekozen bericht als eerste bericht. Hiermee stuur je bezoekers naar onderwerpen waar je AI sterk in is, zoals ‘Hoe installeer ik de Widget?’ of ‘Welke integraties ondersteunen jullie?’.
• Input placeholder: hulptekst in het lege invoerveld.
• Disclaimer text: tekst achter het gesprek, meestal om duidelijk te maken dat iemand met AI praat. Houd deze tekst duidelijk en zichtbaar.

De sectie Pre-chat Screen staat onder deze velden op dezelfde tab Text Content. Schakel deze daar in en bewerk de header, knop en berichttekst.

Talen en vertalingen

Standaard ziet elke bezoeker Text Content precies zoals jij die hebt ingevoerd. Op betaalde abonnementen kun je vertalingen per taal toevoegen, zodat bezoekers de Widget in hun eigen taal zien.

1. Open Text Content en klik bij Other languages op Translate. Het paneel Translate widget text opent en toont je oorspronkelijke tekst bij elke vertaling als Default (source).
2. Klik op Add language en kies een taal. Quickchat AI genereert een vertaling van je huidige tekst. Controleer en bewerk de header, begroeting, gespreksstarters, invoerhint, het pre-chatscherm en de disclaimer. Wijzigingen worden automatisch opgeslagen.
3. Lege velden gebruiken je standaardtekst, zodat je alleen hoeft te vertalen wat je wilt wijzigen. Mislukt automatisch vertalen, dan kun je de tekst zelf invoeren.

Het aantal talen dat je kunt toevoegen hangt af van je abonnement.

Hoe de taal van een bezoeker wordt gekozen

Voor Widget en Embed kiest Quickchat de taal in deze volgorde:

1. Een expliciete keuze in de loader: _quickchat("language", "de"), aangeroepen vóór _quickchat("init", ...).
2. Het <html lang>-attribuut van je pagina: bijvoorbeeld <html lang="de"> voor de Duitse vertaling. Dit is de aanbevolen methode: stel lang correct in op elke vertaalde pagina en de Widget volgt automatisch.
3. De browsertaal van de bezoeker, gevolgd door je Default-tekst als er geen overeenkomst is.

Opmerking

Als er geen vertaling voor de taal van een bezoeker is, ziet die altijd je Default-tekst. Er blijven geen velden leeg.

Geavanceerde functies: aangepaste parameters

Met Quickchat AI Widget en Embed kun je bij initialisatie aangepaste parameters meegeven. Je kunt ze gebruiken om:

• analyses uit te breiden; ze zijn beschikbaar in de CSV-export van het Quickchat-platform;
• waarden aan API Actions door te geven en, waar toegestaan, antwoorden te personaliseren. De AI ontvangt een gefilterde selectie, niet alle parameters. Zie Modelcontext en autorisatie.

Voorbeelden van nuttige parameters:

• visitor_name: Mike
• customer_tier: VIP
• order_id: ord_123

visitor_name is een herkende contactsleutel. Eigen sleutels zoals customer_tier kunnen worden opgeslagen en in Actions worden gebruikt. Alleen meesturen garandeert niet dat de AI ze in zijn antwoord gebruikt. Behandel waarden uit de browser als niet-geverifieerde invoer, niet als toestemming om een klantaccount te openen.

Voeg voor zulke parameters het volgende toe aan het script uit Your Website > Install.

Widget en Embed gebruiken dezelfde aanroep:

_quickchat("custom_params", {
  "visitor_name": "Mike",
  "customer_tier": "VIP",
  "order_id": "ord_123",
});

Deze waarden worden aan elk nieuw gesprek gekoppeld. Beperk het bij voorkeur tot een klein aantal sleutels.

Tip

Aangepaste parameters met snake_case-namen, zoals order_id en customer_tier, kun je rechtstreeks in API Actions gebruiken als {{metadata_order_id}}, {{metadata_customer_tier}}, enzovoort. Zie AI Action Variables.

Voorbeeldscript:

widget

<script>
  (function(e,a,d,i,c,t=a.createElement(d)){e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},t.src=i,t.async=1,a.body.insertAdjacentElement("beforeend",t)})(window,document,"script","https://bubble.quickchat.ai/chat.js","_quickchat");
  _quickchat("custom_params", {"visitor_name": "Mike", "customer_tier": "VIP", "order_id": "ord_123"});
  _quickchat("init", "abcdefghij");
</script>

Embed

<div id="quickchat-embedded" style="height:600px;overflow:hidden;"></div>
<script>
  (function(e,a,d,i,c,t=a.createElement(d)){e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},t.src=i,t.async=1,a.body.insertAdjacentElement("beforeend",t)})(window,document,"script","https://bubble.quickchat.ai/chat.js","_quickchat");
  _quickchat("containerId", "quickchat-embedded");
  _quickchat("custom_params", {"visitor_name": "Mike", "customer_tier": "VIP", "order_id": "ord_123"});
  _quickchat("init", "abcdefghij");
</script>

Embed

Met Embed plaats je de Quickchat AI-agent als chatvenster in de pagina in plaats van als zwevende knop. Gebruik dit voor een vaste plek, bijvoorbeeld een kolom in je helpcentrum, een contactpagina of een zijbalk in je app.

Embed toevoegen

1. Haal de Embed-code op

   • Log in op de Quickchat AI App.
   • Ga in de linkerzijbalk naar Channels → Your Website.
   • Open Install en vervolgens Install manually with code.
   • Kopieer het Embed snippet, met zowel de container <div id="quickchat-embedded"> als het laadscript.

2. Open het HTML-bestand van je website of de pagina in je websitebouwer.

3. Plak de code

   • Voeg het Embed-fragment toe aan de <body> van je pagina.
   • Plaats het precies waar het chatvenster moet komen. De <div> bepaalt het formaat; pas style="height:600px" aan de beschikbare ruimte aan.
   • Voeg in een websitebouwer een code- of HTML-element op de gewenste plek toe en plak het fragment daarin.

Opmerking

Embed werkt alleen als je websitebouwer de code rechtstreeks in de pagina plaatst. Sommige bouwers, zoals Wix, tonen HTML-elementen in een apart frame waarin Embed niet kan laden. Verschijnt de chat niet op je gepubliceerde pagina, voeg dan de Widget toe via de instelling voor code op de hele site of deel je Chat Page-link.