Leer hoe je je aangepaste chatbot eenvoudig in je website kunt integreren.
Het integreren van de Swiftron Chatbot op uw website is eenvoudig en snel. Met slechts een eenmalige integratie en zonder de noodzaak voor voortdurende wijzigingen, kunt u de betrokkenheid van uw klanten naadloos verbeteren. Volg deze eenvoudige stappen om aan de slag te gaan:
Stap 1: Kopieer de Integratiecode
Ga naar Swiftron Integratiepagina en kopieer de volgende code:
<script async type="module" project-id="YOUR_PROJECT_ID" lang="auto" src="https://swiftron.eu/static/js/chatbot-boot.min.js"></script>
- project-id: Dit is uw unieke Project-ID en zal automatisch worden ingevuld.
- lang: De doeltaal voor uw chatbot. U kunt gebruiken:
- Elke geldige taalcodes van ISO 639-taalcodes (bijv. 'nl' voor Nederlands, 'de' voor Duits).
- 'auto', wat de taal selecteert op basis van de instellingen van de browser van de gebruiker.
- 'site', wat de taal gebruikt die is opgegeven in de HTML-header van de website. Dit leest de waarde van
document.documentElement.lang
en stelt de taal van de chatbot dienovereenkomstig in.
Stap 2: Plak de code in je website
Een websitebouwer gebruiken:
Als je websitebouwers zoals Jimdo, WordPress of Squarespace gebruikt, volg dan hun instructies om aangepaste code in te voegen:
- Jimdo: Hoe voeg ik aangepaste code in
- WordPress: Aangepaste HTML-blok gebruiken
- Squarespace: Aangepaste code aan uw site toevoegen
Het beheren van je eigen code:
Voeg de gekopieerde integratiecode in de HTML van elke pagina in waar je de chatbot wilt laten verschijnen. Hier is een voorbeeld:
<!
DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your Site</title>
  </head>
  <body>
    <div>Your Content</div>
  </body>
  <script async type="module"
project-id="YOUR_PROJECT_ID"
lang="auto"
src="https://swiftron.eu/static/js/chatbot-boot.min.js">
</script>
</html>
Stel de Toggle Chatbot-knop in (Optioneel)
Als je al een bestaande communicatiedoos hebt of je eigen knop wilt maken om de chatbot te openen of te sluiten, kun je deze eenvoudig integreren door de ID toe te voegen in de 'Toggle Chatbot Button' instellingen op de Swiftron Integratiepagina.
Voorbeeld:
<button id="btn-toggle-chatbot">Je Chatbot-pictogram</button>
Stel eenvoudig het 'Toggle Chatbot Button' veld in op de ID van jouw knop, bijv. 'btn-toggle-chatbot'. Het knoptype kan van alles zijn (bijv. div, span). Je hoeft geen JavaScript of gebeurtenishandlers toe te voegen; de Swiftron chatbot zal deze knop automatisch detecteren en de nodige logica afhandelen.
Als er geen element met de opgegeven ID wordt gevonden, of als het 'Toggle Chatbot Button' veld leeg is, zal Swiftron zijn eigen chatbot-toggleknop op jouw site maken.
Pas de Plaatsing van de Chatbot Aan (Optioneel)
Je kunt de chatbot in een specifiek element weergeven door de ID ervan op te geven in het 'Pas de Plaatsing van de Chatbot Aan' veld op de Swiftron Integratiepagina. De chatbot zal binnen dit element verschijnen en alle bestaande inhoud daarin vervangen.
In dit geval zal er geen toggle chatbot-knop worden weergegeven of gebruikt. De chatbot zal altijd zichtbaar zijn binnen het opgegeven element en kan niet door de gebruiker worden geminimaliseerd.