Formulier installeren

De installatie van Symplicy op uw website gebeurt in 2 stappen.

  1. Het script integreren op uw website
  2. De knoppen definiëren die de popup zullen openen

1 Het script integreren

Integreer het script in de <head> van de pagina’s waar u de Symplicy-app wilt gebruiken.

<script src="https://casus.symplicy.com/app.js?uuid=*UUID*"><script>

Vervang het *UUID*-gedeelte door de identificatiecode (UIDD) die u heeft ontvangen bij uw abonnement.

 

Voorbeeldcode met UUID:

<script src="https://casus.symplicy.com/app.js?uuid=0000-1111-2222-3333"></script>

2 De knoppen definiëren die de popup zullen openen

Er zijn 4 manieren om aan ons script te communiceren welke knoppen de popup moeten activeren:

  1. Door een HTML-klasse toe te voegen aan de knop
  2. Door een HTML-klasse toe te voegen aan de container van de knop
  3. Via een link
  4. Programmatisch

2.1 Door een HTML-klasse toe te voegen aan de knop

Om ons contactformulier te openen door op een knop (of link) op uw website te klikken, voegt u gewoon de klasse js-symplicy-button toe aan de knop. Wanneer de gebruiker op deze knop klikt, wordt ons intelligente contactformulier geopend in een popup op uw website.

 

U kunt deze klasse op elk element op uw pagina plaatsen. Voor toegankelijkheidsredenen raden we echter aan om deze klasse op een knopelement button of een link ate plaatsen.

U kunt deze klasse toepassen op meerdere elementen op dezelfde pagina. Het contactformulier wordt hoe dan ook geopend.

 

Voorbeeld met een knop:

<button class="js-symplicy-button">Mijn contactknop</button>

 

Voorbeeld met een link :

<a href="#" class="js-symplicy-button">Voorbeeld met een link</a>

2.2 Door een HTML-klasse toe te voegen aan de container van de knop

Om de knop(pen) op een pagina te laten maken door Symplicy, moet u de klasse js-symplicy-container toepassen op het element dat de knop zal bevatten. De knoppen worden automatisch gemaakt op de door u gekozen locaties op uw pagina.

U kunt deze klasse zo vaak toepassen als u wilt, waardoor meerdere knoppen worden gecreëerd.

 

Opmerking: Het is mogelijk om de stijl van de knoppen aangemaakt door het script aan te passen door bepaalde parameters door te geven. Voor meer informatie over deze optie verwijzen we u naar de pagina “Aanpassing”.

 

Voorbeeld:

<div class="js-symplicy-container"></div>

2.3 Via een link

Het is mogelijk dat u geen toegang heeft tot de code van uw website (bijvoorbeeld als u WordPress, Wix, enz. gebruikt). In dit geval moet u een link toevoegen die verwijst naar https://symplicy.com#symplicy. Ons script zal deze doorverwijzing blokkeren wanneer een gebruiker op deze link klikt en in plaats daarvan de popup openen.

2.4 Programmatisch

U kunt ook de Symplicy-knoppen definiëren in Javascript. Hiervoor moet u de methode ‘addButtons’ van het aan de Window gekoppelde Symplicy-object gebruiken. Deze methode accepteert een parameter die kan zijn:

  • Een DOMString bestaande uit één of meerdere CSS-selectors die uw knoppen selecteren
  • Een array met uw knoppen (of een NodeList)
  • In het geval dat er slechts één knop is, kan deze rechtstreeks als parameter worden doorgegeven

Dit kan handig zijn als uw knoppen nog niet in de DOM van de pagina staan wanneer het script wordt geïnitialiseerd.

Voorbeelden:

<script>
  window.Symplicy.addButtons('.symplicy-buttons');
</script>
<script>
  var buttons = document.body.querySelectorAll('.symplicy-button');
  window.Symplicy.addButtons(buttons);
</script>
<script>
  var button = document.body.querySelector('#symplicy-button');
  window.Symplicy.addButtons(button);
</script>