Deze vorm raden we aan als je je keuzehulp op een productdetailpagina of categorie-/listerpagina wilt plaatsen. De sidebar is een moderne integratievorm waarbij de focus ligt op de keuzehulp en de klant tegelijkertijd connectie behoudt met de webshop. Bekijk hoe de sidebar keuzehulp werkt in onze 'nepshop'.

Laten we een voorbeeld geven. De meeste webshops krijgen veel direct verkeer naar productpagina's. Veel van dit verkeer bevindt zich echter nog in de oriëntatiefase: bezoekers weten eigenlijk niet of dit specifieke product aansluit bij hun behoeften. Daarom staat op de productdetailpagina van dit autostoeltje een knop 'Hulp nodig? Probeer de wandelschoenen keuzehulp':

Een klant die niet helemaal zeker weet of dit specifieke autostoeltje de juiste is, kan eenvoudig op de knop klikken. Wanneer erop wordt geklikt, opent een sidebar met de Car Seat Finder keuzehulp. De klant kan nu checken of het product bij zijn behoeftes past en zo niet er direct achterkomen welk product wel een goede match is.

Hieronder een voorbeeld van de code voor de knop

<button
  data-advisor-id="00000000-0000-0000-0000-000000000000"
  data-aiden-mode="sidebar"
  style="
    border: none;
    background: #0090e3;
    border-radius: 0rem;
    padding: 0.75rem 1.25rem;
    color: #ffffff;
    font-size: inherit;
    font-weight: bold;
    cursor: pointer;
  ">
  Start product finder
</button>

‍

Andere opties dan de knop voor een Sidebar keuzehulp in je website

‍

1. Verwerk de knop in een banner afbeelding

Hier zien we een bannerafbeelding die de keuzehulp opent wanneer op de afbeelding wordt geklikt:

<img src="..." data-advisor-id="00000000-0000-0000-0000-00000000" data-aiden-mode="sidebar"/>

Hoe je dit gebruikt:

Implementeer het Aiden script.
Vervang ... met de URL voor de bannerafbeelding die je wilt gebruiken.
Vervang 00000000-0000-0000-0000-00000000 door de advisor ID van je keuzehulp. Deze ID vind je in de embed code.
Plaats de complete code overal waar je de banner op je website wilt weergeven.
De app wordt geopend wanneer een klant op je banner klikt.

2. Verwerk de knop in een onderdeel van je menu

Hier is een voorbeeld van een websitemenu met een navigatie-element dat de app opent wanneer op het tweede menu-item wordt geklikt:

<li class="menu-item">
    <a href="/category/headphones">
        Headphones
    </a>
</li>
<li 
  class="menu-item" 
  data-advisor-id="00000000-0000-0000-0000-00000000" 
  data-aiden-mode="sidebar">
    Headphone Helper
</li>

‍

Hoe je dit gebruikt:

Implementeer het Aiden script.
Voeg een menu-item toe aan het menu van uw website dat de data-advisor-id van je keuzehulp aanroept. Deze ID vind je in de embed code.
De app wordt geopend wanneer een klant op het menu-item klikt.

‍

3. Onderdeel van een image slider

En hier is een voorbeeld van een image slider dat de keuzehulp opent wanneer er op de tweede afbeelding wordt geklikt:

<div class="slider">
    <div class="slide-1">
        <img src="..." />
    </div>
    <div class="slide-2" data-advisor-id="00000000-0000-0000-0000-00000000" data-aiden-mode="sidebar">
        <img src="..." />
    </div>
    <div class="slide-3">
        <img src="..." />
    <div>
</div>

Hoe je dit gebruikt:

Implementeer het Aiden script.
Voeg eenafbeelding aan je slider toe dat de data-advisor-id van je keuzehulp aanroept. Deze ID vind je in de embed code.
De app wordt geopend wanneer een klant op de afbeelding in de slider klikt.

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