Voeg je keuzehulp toe aan je website

Kies de plekken waar je je keuzehulp wilt tonen

We raden aan om de keuzehulp op meerdere pagina's binnen je website beschikbaar te maken. Zo weet je zeker dat een klant altijd de hulp kan vinden die hij nodig heeft, waar hij zich ook bevindt in zijn klantreis.

Mogelijke plekken:

1. Op de categorie pagina (lister page) van de betreffende productcategorie. We raden aan om hier de in-page keuzehulp, sidebar keuzehulp of pop-up keuzehulp te gebruiken.

2. Op de productdetailpagina (PDP) van elk relevant product. We raden aan om hiervoor de sidebar keuzehulp of pop-up keuzehulp te gebruiken.

3. Op een aparte pagina die een klant kan bereiken via een menu-item of vanaf een andere pagina. Hiervoor raden we de full-page keuzehulp of in-page keuzehulp aan.

4. Op alle relevante campagne pagina's, SEO pagina's, blogs, FAQ pagina's, of handleidingen. For deze doeleinden kun je het beste de full-page keuzehulp of in-page keuzehulp kiezen.

Meer weten? Doe hier inspiratie op: ✨ Laat je keuzehulp schitteren op deze 7 plekken. Of bekijk voorbeelden in onze 'Nepshop'.

‍

Kies in welke vorm je de keuzehulp aan je klanten wilt presenteren

Er zijn drie manieren om je keuzehulp aan je klanten te tonen. Over elke vorm hebben we wat meer informatie:

Heb je eenmaal besloten waar je de keuzehulp wilt plaatsen en in welke vorm? Voeg dan je keuzehulp in slechts 2 eenvoudige stappen toe!

‍

Stap 1 — Voeg het Aiden script toe

Het Aiden-script moet worden geïmplementeerd voordat je Aiden keuzehulpen aan je website kunt toevoegen:

<script src="https://app.aiden.cx/webshop/build/aiden-embedded.min.js" async=""></script>

Het script 'luistert' naar clicks op de pagina. Om specifiek te zijn, het luistert alleen naar clicks op elementen met een zogenaamde 'data attribute'. Wanneer een gebruiker op een element klikt met het data-attribuut data-advisor-id, zal het script de waarde van het attribuut pakken (dit is de identifier van de keuzehulp) en start de keuzehulp.

💡 Goed om te weten: We raden aan om het Aiden-script in de <head> van je website te plaatsen.

Dit zorgt ervoor dat je keuzehulpen altijd goed werken en niet worden beïnvloed of overschreven door andere scripts op je website.

Gebruik je een e-commerce CMS? Hier vind je handige instructies van verschillende platformen voor het toevoegen van scripts:

‍

Stap 2 — Voeg de embedcode van je keuzehulp toe

Zodra het script is geïmplementeerd, kunt je overal op je website een of meerdere keuzehulpen toevoegen.

1. Ga naar het onderdeel Embed.

2. Klik op de vorm die je wilt gebruiken:

3. Pas waar nodig de knoptekst of de hoogte van de menubalk aan.

4. Kopieer de embedcode door op de knop Copy embed code te klikken.

Bekijk een voorbeeld van de sidebar embed code

<!-- gebruik deze voorbeeldcode niet, kopieer de code van de embed pagina in Aiden -->
<button 
  data-advisor-id="00000000-0000-0000-0000-000000000000"
  data-aiden-mode="sidebar"
  style="
    border: none; 
    background: #F5C402; 
    border-radius: 0.25rem; 
    padding: 0.75rem 1.25rem; 
    color: #000000; 
    font-size: inherit; 
    font-weight: bold; 
    cursor: pointer;
  ">
  Start keuzehulp 
</button>

Bekijk een voorbeeld van de pop-up embed code

<!-- gebruik deze voorbeeldcode niet, kopieer de code van de embed pagina in Aiden -->
<button 
  data-advisor-id="00000000-0000-0000-0000-000000000000"
  style="
    border: none; 
    background: #F5C402; 
    border-radius: 0.25rem; 
    padding: 0.75rem 1.25rem; 
    color: #000000; 
    font-size: inherit; 
    font-weight: bold; 
    cursor: pointer;
  ">
  Start keuzehulp 
</button>

Bekijk een voorbeeld van de in-page embedcode

<!-- gebruik deze voorbeeldcode niet, kopieer de code van de embed pagina in Aiden -->
<iframe
  src="https://app.aiden.cx/webshop/?advisorId=00000000-0000-0000-0000-000000000000&mode=banner&layout=horizontal&transparent=true"
  id="aiden-00000000-0000-0000-0000-000000000000"
  data-scrolloffset="-100"
  loading="lazy"
  style="
    border: none;
    width: 100%;
  "
  ></iframe>

Bekijk een voorbeeld van de full-page embedcode

Bekijk een voorbeeld van de pop-up embed code

<!-- gebruik deze voorbeeldcode niet, kopieer de code van de embed pagina in Aiden -->
<iframe
  src="https://app.aiden.cx/webshop/?advisorId=00000000-0000-0000-0000-000000000000&mode=inpage&layout=vertical&transparent=true"
  id="aiden-00000000-0000-0000-0000-000000000000"
  data-scrolloffset="-100"
  loading="lazy"
  style="
    border: none;
    width: 100%;
    min-height: 400px;
  "
  ></iframe>

5. Plak de embedcode in de HTML van je website op de plek waar je de keuzehulp wilt hebben.

6. Testen, testen, testen! Ziet het er mooi uit en werkt het? Gefeliciteerd, je keuzehulp staat nu live!

‍

💡 Goed om te weten: je hoeft de keuzehulp maar één keer aan je website toe te voegen. Als je daarna iets in je keuzehulp wijzigt zijn de wijzigingen meteen zichtbaar nadat je opnieuw hebt gepubliceerd.