De code op je website plaatsen
Dit werkt op elke website, ook bij Wix, Squarespace, Webflow of een eigen HTML-site.
Stap 1: Kopieer je widgetcode
Ga in het dashboard naar "Instellingen" → "Installatie" en klik bij "Embed Code" op "Kopieer". Je vindt dezelfde code ook op "Overzicht" en onder "Integraties" → "Andere website".
Stap 2: Plak de code vóór </body>
Plak de code op elke pagina vlak vóór de </body>-tag, of in het veld voor eigen code of scripts in de footer van je websitebouwer.
Stap 3: Controleer je website
Open je website in een nieuw venster. Rechtsonder verschijnt de chatknop. Stuur een testbericht; het gesprek verschijnt in je "Gedeelde inbox".
Is de code verborgen met de melding dat de widgetcode is gepauzeerd? Dan ontbreekt nog de verwerkersovereenkomst. Accepteer die in je account op twilper.com.
WordPress en WooCommerce
Stap 1: Installeer via WordPress.org
Ga in WordPress naar Plugins → Nieuwe plugin, zoek op "TwilperChat", klik op Nu installeren en daarna op Activeren.
Stap 2: Of upload het zip-bestand
Kun je geen plugins van WordPress.org installeren? Download dan bij "Integraties" → "WordPress" de "TwilperChat WordPress plugin (.zip)" en upload die via Plugins → Nieuwe plugin → Plugin uploaden. Activeer de plugin daarna.
Stap 3: Vul je widgetsleutel in
Ga in WordPress naar Instellingen → TwilperChat → Verbinding. Plak daar de sleutel die in het dashboard bij de WordPress-stappen staat en klik op "Verbinding opslaan" en daarna "Verbinding testen".
Stap 4: Optioneel: pagina's en producten synchroniseren
Wil je dat de AI je pagina's, berichten en WooCommerce-producten kent? Maak in het dashboard bij "Integraties" een sync key aan ("Sync key voor de WordPress-plugin") en plak die in de plugin. De sleutel zie je maar één keer.
Shopify
Stap 1: Open de Shopify-vermelding
Ga naar "Integraties", kies "Shopify" en klik op "Open Shopify-vermelding".
Stap 2: Installeer de app
Doorloop de installatie in Shopify. De widget wordt in je actieve thema aangezet; controleer dat even in je winkel.
Stap 3: Controleer de synchronisatie
Kijk in Twilper of de productsynchronisatie klaar is, zodat de AI vragen over je producten kan beantwoorden.
Staat de knop op "Nieuwe Shopify-installaties gepauzeerd"? Dan kun je de widgetcode tijdelijk zelf in je thema plaatsen, of producten handmatig synchroniseren met je winkeladres (jouwwinkel.myshopify.com).
Is mijn widget gedetecteerd?
Zodra de widget voor het eerst laadt op je website, registreert Twilper dat domein bij je licentie. In de checklist op "Overzicht" wordt "Widget plaatsen" dan groen.
- Nog niet groen? Open je website, ververs de pagina en kijk of de chatknop verschijnt.
- Controleer of de code op de gepubliceerde site staat en niet alleen in een concept of voorbeeldweergave.
- Je licentie bepaalt op hoeveel domeinen de widget mag draaien. Wordt een nieuw domein geweigerd, deactiveer dan een oud domein of kies een groter plan.
Kleuren, naam en welkomstbericht
In de "Widget Designer" bepaal je hoe de widget eruitziet en zich gedraagt. Je ziet je wijzigingen direct in de "Live Preview".
Stap 1: Naam en uiterlijk
Vul de "Bot naam" in en eventueel een avatar. Kies bij "Kleuren" je "Hoofdkleur" en de kleuren van de bubbels, of klik op "Twilper-stijl".
Stap 2: Tekst en toon
Schrijf bij "Tekst & Toon" je "Welkomstbericht" en "Placeholder tekst", en kies "Formeel (u)" of "Informeel (je)". Bij "Teksten per taal" zet je dezelfde teksten in het Engels, Duits, Frans en Spaans.
Stap 3: Gedrag
Kies bij "Gedrag" de "Positie" (rechtsonder of linksonder) en de knopgrootte. Zet eventueel "Voorgestelde vragen", een "Proactief bericht" of "Lead capture" aan.
Stap 4: Opslaan
Klik op "Opslaan". De widget op je website neemt de wijzigingen over.
Goed om te weten
- De widget kiest automatisch de taal van je bezoeker op basis van de pagina en het bericht.
- Plaats de code één keer per pagina; dubbele code kan twee chatknoppen geven.
- Eigen CSS is alleen beschikbaar op het Business-plan.
- Met "Bronvermelding tonen" ziet de bezoeker op welke pagina een antwoord is gebaseerd.