Deze vorm raden we aan als je je keuzehulp op een productdetailpagina of categorie-/listerpagina wilt plaatsen. Ontdek in onze 'Nepshop' hoe de Pop-up keuzehulp werkt.

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 'Probeer de autostoelzoeker':

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 pop-up met de Car Seat Finder keuzehulp. De klant kan nu volledig focussen op de keuzehulp en daarmee zijn zoektocht naar het juiste product voortzetten:

Hieronder een voorbeeld van de code voor de knop

<button  
    data-advisor-id="4d2dfbee-abc1-44f2-9640-cac4596c973c" 
    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 product finder
</button>

‍

Andere opties dan de knop voor een Pop-up 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="fc9ac063-19cf-4045-bd95-2c78b1cc332e"/>

Hoe je dit gebruikt:

Implementeer het Aiden script.
Vervang ... met de URL voor de bannerafbeelding die je wilt gebruiken.
Vervang fc9ac063-19cf-4045-bd95-2c78b1cc332e door de advisor ID van je keuzehulp. Deze ID vind je in de embed code.
Plaats het complete codefragment 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="fc9ac063-19cf-4045-bd95-2c78b1cc332e">
    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="fc9ac063-19cf-4045-bd95-2c78b1cc332e">
        <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.