Website chat

Met Website chat plaats je een chatknop op je eigen website. Bezoekers sturen berichten via het widget; uw team antwoordt in de Tillor inbox naast WhatsApp, Messenger en Instagram.

Integratie installeren

1. Ga naar Instellingen > Integraties (sidebar onder Ondersteuning)
2. Open Website chat in de lijst
3. Klik Installeren (geen OAuth - Tillor maakt direct een widget-sleutel aan)
4. Stel onder Instellingen de widget in (welkomstbericht, accentkleur, optioneel toegestane domeinen)
5. Kopieer het Embed-snippet onder Embedden op je website en plak het vóór </body> op elke pagina waar de chatknop moet verschijnen

Chat op Tillor view-pagina's

Staat Website chat geïnstalleerd, is Widget ingeschakeld aan en staat Tonen op publieke Tillor-pagina's aan, dan verschijnt de chatknop op publieke Tillor-pagina's van uw organisatie. U hoeft daar geen embed-snippet te plaatsen.

Voorbeelden:

• Toegangspas (/view/access-methods/...)
• Openstaande factuur (/view/invoices/...)
• NFC-tag (/view/nfc-tags/...)
• Organisatiegegevens (/view/organization)
• Publieke kaart (/view/map)

Toegestane domeinen geldt voor uw eigen website. Tillor view-pagina's werken wanneer het widget aan staat, ook als alleen externe hostnamen in de lijst staan.

Zet u Widget ingeschakeld uit, dan verdwijnt de knop overal (eigen site en Tillor). Zet u alleen Tonen op publieke Tillor-pagina's uit, dan blijft het widget wel op uw eigen website werken via het embed-snippet.

Op view-pagina's gebruikt Tillor de Accentkleur uit Instellingen (via data-accent-color op het script). Zet u daar een andere kleur op uw eigen site via het embed-snippet, dan geldt die alleen op die site.

Widget instellen

Bezoekersformulier

Onder Instellingen bij Website chat stelt u in welke velden bezoekers invullen vóór het eerste bericht. Zijn er verplichte velden, dan verschijnen die samen met het berichtveld in één scherm. De bezoeker vult alles in en stuurt met Versturen - geen aparte tussenstap.

Standaardvelden

Vink per veld aan of het verplicht is:

U kunt elk veld apart aan- of uitzetten. Alleen telefoon aan? Dan verschijnt alleen het telefoonveld.

Extra velden

Klik Veld toevoegen voor eigen vragen (max. 8). Per veld stelt u in:

Waarden van extra velden staan in de inbox onder het gesprek, naast kanaal en bezoeker-id.

Bezoekers e-mailen over ongelezen antwoorden

Bezoekers verlaten vaak de pagina voordat uw team of Tillie reageert. Met Bezoekers e-mailen over ongelezen antwoorden (standaard aan) krijgt de bezoeker een e-mail zodra er een antwoord klaarstaat dat hij nog niet heeft gelezen en hij niet meer actief is. De e-mail bevat een knop Gesprek voortzetten die de chat weer opent, zodat het gesprek doorloopt.

• De bezoeker moet een e-mailadres hebben opgegeven (via het bezoekersformulier of vooraf ingevuld). Zonder e-mailadres wordt er niets verstuurd.
• We sturen kort nadat de bezoeker weg is één e-mail per reeks ongelezen antwoorden. Komt de bezoeker terug, dan kan een volgende reeks weer een e-mail opleveren.
• De link opent de chat in dezelfde browser waar het gesprek begon, zodat de bezoeker zijn eigen gesprek terugziet. Opent hij de link op een ander apparaat, dan start een nieuw gesprek.
• De bezoeker kan ook gewoon rechtstreeks op de e-mail antwoorden. Dat antwoord komt automatisch terug in hetzelfde gesprek in de inbox. Berichten die via e-mail binnenkomen, herkent u aan een klein envelop-icoon bij het bericht.

Zet de schakelaar uit onder Instellingen > Integraties > Website chat als u deze e-mails niet wilt versturen.

AI-assistent (Tillie)

Tillie is de standaardnaam van de inbox-AI. Ze werkt op alle kanalen (website chat, WhatsApp, Messenger, Instagram), niet alleen op het widget.

Installeer Inbox AI-assistent apart onder Instellingen > Integraties. Volledige uitleg over installatie, bedoelingen (reservatie, verkoop, overig), kennisbank en per-gesprek instellingen staat op Inbox AI-assistent (Tillie).

Onder Website chat kunt u AI-assistent icoon aanvinken zodat berichten van Tillie een roboticoon tonen in plaats van het organisatielogo.

Embed-opties

Naast data-org-id en data-widget-key kunt u optionele attributen op het script zetten:

Script-attributen vullen alleen lege velden aan. Heeft de bezoeker al gegevens ingevuld in deze browsersessie, dan blijven die staan.

Spambeveiliging

Het widget gebruikt geen aparte captcha op de bezoekerssite. Tillor beschermt verzenden via:

• Widget-sleutel (data-key / X-Tillor-Inbox-Widget-Key) - alleen geïnstalleerde chats accepteren verzoeken met de juiste sleutel
• Toegestane domeinen (optioneel) - Tillor controleert de Origin-header; alleen hostnamen uit uw lijst mogen berichten sturen

Vul Toegestane domeinen in wanneer het widget op een vaste klantensite staat (bijv. recreatiepark-het-meer.be, www.recreatiepark-het-meer.be). Laat u het veld leeg, dan werkt het widget op elk domein waar u het snippet plaatst.

JavaScript-SDK (window.TillorInbox)

Na het laden van het widget-script kunt u contactgegevens vanaf uw eigen formulier doorgeven (contactpagina, verkoopdetail, offerte-aanvraag). Alle methodes wachten tot de widget-config geladen is.

getVisitor() geeft dit object terug:

Gebruik getVisitor() om een eigen formulier te prefilling vanuit localStorage (zelfde browser, ook na een pagina-verversing).

Opties voor setVisitor (tweede argument):

Opties voor send:

Met open: false (standaard) blijft de chatknop dicht. Het bericht gaat wel naar Tillor; uw eigen formulier kan bedanken of een fout tonen. Met open: true opent het chatvenster en ziet de bezoeker het normale verzendgedrag (geluid, vinkjes, eventuele widget-fouten).

metadata (boekingsformulier)

Gebruik metadata wanneer u een eigen formulier op de website hebt en Tillie alleen een bevestiging moet sturen, zonder vervolgvragen (bijv. het tabblad sluit daarna).

await TillorInbox.send({
  name: "Jan Janssens",
  email: "jan@voorbeeld.be",
  phone: "+32 3 779 81 64",
  body: structuredBookingMessage,
  silent: true,
  metadata: {
    forceHandover: true,
    handoverIntent: "reservation",
    source: "website_booking_form",
  },
});

Contactformulier vervangen (stille verzending)

Gebruik dit wanneer u het bestaande contactformulier wilt houden, maar berichten via Tillor wilt laten lopen zonder het chatvenster te openen:

<form id="site-contact-form">
  <input name="name" type="text" required />
  <input name="email" type="email" required />
  <input name="phone" type="tel" />
  <textarea name="message" required></textarea>
  <button type="submit">Verstuur</button>
  <p id="contact-status" hidden></p>
</form>

<script>
  document.getElementById("site-contact-form").addEventListener("submit", async (event) => {
    event.preventDefault();
    const form = event.currentTarget;
    const status = document.getElementById("contact-status");
    const data = new FormData(form);

    try {
      await TillorInbox.send({
        name: String(data.get("name") ?? ""),
        email: String(data.get("email") ?? ""),
        phone: String(data.get("phone") ?? ""),
        body: String(data.get("message") ?? ""),
      });
      status.textContent = "Bedankt, we nemen snel contact op.";
      status.hidden = false;
      form.reset();
    } catch (error) {
      status.textContent = error instanceof Error ? error.message : "Versturen mislukt.";
      status.hidden = false;
    }
  });
</script>

open en silent hoeft u niet te zetten: zonder open: true blijft het venster dicht en behandelt Tillor de aanroep als stille verzending.

Contactformulier koppelen (chat openen)

Voorbeeld: velden doorgeven en het chatvenster openen zodat de bezoeker het gesprek ziet:

<form id="site-contact-form">
  <input name="name" type="text" required />
  <input name="email" type="email" required />
  <input name="phone" type="tel" />
  <textarea name="message" required></textarea>
  <button type="submit">Verstuur</button>
</form>

<script>
  document.getElementById("site-contact-form").addEventListener("submit", (event) => {
    event.preventDefault();
    const form = event.currentTarget;
    const data = new FormData(form);
    void TillorInbox.send({
      name: String(data.get("name") ?? ""),
      email: String(data.get("email") ?? ""),
      phone: String(data.get("phone") ?? ""),
      body: String(data.get("message") ?? ""),
      open: true,
    });
  });
</script>

Of alleen velden invullen en het venster openen (zonder meteen te versturen):

void TillorInbox.setVisitor(
  {
    name: "Jan Janssens",
    email: "jan@voorbeeld.be",
    phone: "+32 3 779 81 64",
    message: "Ik heb een vraag over de stacaravan te koop.",
  },
  { markSubmitted: true, open: true },
);

Verkooppagina met direct versturen en chat openen:

void TillorInbox.send({
  name: "Jan Janssens",
  email: "jan@voorbeeld.be",
  phone: "+32 3 779 81 64",
  body: "Ik heb interesse in deze stacaravan.",
  open: true,
});

Live synchroniseren terwijl iemand typt (optioneel):

const form = document.getElementById("site-contact-form");
form.addEventListener("input", () => {
  void TillorInbox.setVisitor({
    name: form.name.value,
    email: form.email.value,
    phone: form.phone.value,
    message: form.message.value,
  });
});

Vroeg aanroepen (vóór het widget-script)

<script>
  window.TillorInbox = window.TillorInbox || { q: [] };
  window.TillorInbox.q.push([
    "setVisitor",
    { name: "Jan", email: "jan@voorbeeld.be" },
    { open: true },
  ]);
</script>
<script src="https://tillor.eu/inbox-widget.js" data-org-id="org_abc123" data-widget-key="iwk_xxx" async defer></script>

Voorbeeld met Nederlandse teksten:

<link rel="preload" href="https://tillor.eu/inbox-widget.css" as="style" />
<script
  src="https://tillor.eu/inbox-widget.js"
  data-org-id="org_abc123"
  data-widget-key="iwk_xxx"
  data-locale="nl"
  data-debug="true"
  async
  defer
></script>

U kunt debug ook aanzetten zonder het snippet te wijzigen: in de browserconsole localStorage.setItem('tillor-inbox-debug', '1') en de pagina verversen.

Onder het berichtveld ziet de bezoeker een korte mededeling dat verzenden akkoord is met de websitechat-voorwaarden (GDPR/AVG, Belgisch recht). De link opent in een nieuw tabblad en volgt de taal van data-locale.

Typen (beide kanten)

Typen werkt in beide richtingen:

Het ingebouwde widget stuurt automatisch typ-signalen terwijl de bezoeker in het berichtveld typt. Uw team ziet dat in de inbox zodra het gesprek openstaat (ook vóór het eerste verzonden bericht).

Bouwt u een eigen chat-UI in plaats van het widget? Roep dan de website-chat-API aan (zie OpenAPI, tag inbox):

POST /api/orgs/{orgId}/inbox/website/typing
X-Tillor-Inbox-Widget-Key: iwk_xxx
Content-Type: application/json

{
  "visitorId": "vis_…",
  "active": true,
  "visitorName": "Jan",
  "visitorEmail": "jan@voorbeeld.nl",
  "visitorPhone": "+32470123456"
}

• active: true wanneer de bezoeker typt; false wanneer het veld leeg is of de bezoeker stopt (het widget stuurt false na ongeveer 4 seconden zonder input)
• visitorName / visitorEmail / visitorPhone zijn optioneel, maar helpen bij het koppelen vóór het eerste bericht
• Gebruik hetzelfde visitorId als bij POST …/inbox/website/messages en GET …/inbox/website/messages

Realtime (SSE)

Voor live updates opent u een langlopende stream:

GET /api/orgs/{orgId}/inbox/website/subscribe?visitorId=vis_…
X-Tillor-Inbox-Widget-Key: iwk_xxx
Accept: text/event-stream

Event keys:

Payload-formaat is hetzelfde als org-SSE (event, data, timestamp, traceId). Herverbind na verbreking; er is geen resumption.

Het officiële widget gebruikt SSE als primaire laag en pollt GET …/messages elke 5 seconden als fallback (elke 1 seconde met open paneel wanneer SSE even wegvalt). Daardoor worden uw antwoorden als afgeleverd gemarkeerd zodra de bezoeker nog op de pagina is, ook zonder het paneel te openen.

Bezoekersactiviteit (alleen in de inbox)

Na het eerste bericht stuurt het widget info-regels naar Tillor (chat openen of sluiten, tab wisselen, pagina verlaten, navigatie). Uw team ziet die als grijze tekst in het gesprek; de bezoeker ziet ze niet in het widget. Vóór dat eerste bericht verschijnt er nog geen gesprek in de inbox.

Navigatie werkt bij gewone websites (elke pagina laadt opnieuw), bij een nieuw tabblad op dezelfde site, en bij single-page apps (history API). Het widget stuurt de huidige pagina-URL mee in elke heartbeat (elke 20 seconden) en bij pagina-wissels; in het zijpaneel ziet u daardoor steeds de laatste pagina waar de bezoeker actief was. Info-regels verhogen geen ongelezen teller en geven geen pushmelding.

Eigen UI? Roep POST /api/orgs/{orgId}/inbox/website/events aan met event: chat_closed, tab_hidden of navigation (bij navigatie ook url).

In de inbox

• Gesprekken verschijnen als kanaal Website chat
• Tillor onthoudt bezoekers via een id in localStorage op hun browser (zelfde apparaat = zelfde thread)
• Naam, e-mail en telefoon uit het bezoekersformulier worden na het eerste verzonden bericht eveneens in localStorage bewaard, zodat bezoekers die later terugkomen (nieuw tabblad of nieuwe sessie) het formulier niet opnieuw hoeven in te vullen
• Is localStorage leeg (andere browser, opgeschoond geheugen)? Bij het ophalen van berichten vult het widget contactgegevens aan vanuit het bestaande gesprek op de server
• Extra velden verschijnen in de inbox bij het gesprek
• Antwoorden vanuit Tillor komen terug in het widget (bezoeker moet het chatvenster open hebben of later opnieuw openen; het widget ververst berichten automatisch)
• Wanneer u typt in de inbox, ziet de bezoeker Typen… in het widget
• Wanneer de bezoeker typt op uw site, ziet u Typen… in het gesprek
• Bezoekers zien vinkjes op hun eigen berichten: één vinkje na verzenden, twee grijze vinkjes zodra uw team het gesprek opent en de berichten laadt, blauwe dubbele vinkjes zodra uw team het gesprek als gelezen markeert. In de inbox ziet u vinkjes op uw eigen antwoorden: één vinkje na verzenden, twee grijze vinkjes zodra de bezoeker op de pagina is en berichten ophaalt (ook met gesloten chat), blauw zodra de bezoeker het chatvenster open heeft
• Boven het gesprek ziet u Online (groene stip) wanneer de bezoeker op uw site actief is, of Laatst gezien met een relatieve tijd wanneer niet. Het widget stuurt elke 20 seconden een heartbeat zolang het browsertabblad zichtbaar is; berichten ophalen, typen en lezen tellen ook mee als activiteit

Berichten zijn tekst tot 4096 tekens. Afbeeldingen en bestanden worden in deze versie niet ondersteund.

Gerelateerd