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

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.

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. camping-vlasaard.be, www.camping-vlasaard.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.

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).

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 widget-API aan:

POST /api/inbox-widget/{orgId}/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 /send en /messages

Staff-typ-indicator in het widget komt mee in GET /messages als staffTyping: true (widget pollt elke paar seconden).

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) en bij single-page apps (history API). De huidige pagina-URL staat ook in het zijpaneel van het gesprek. Info-regels verhogen geen ongelezen teller en geven geen pushmelding.

Eigen UI? Roep POST /api/inbox-widget/{orgId}/info 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 opgeslagen bij het gesprek
• 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 vinkjes zodra uw team het gesprek heeft geopend en gelezen (blauw = gelezen). In de inbox ziet u vinkjes op uw eigen antwoorden zodra de bezoeker het chatvenster open heeft

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

Gerelateerd