Choose the places you want to show your product finder
We recommend making your product finder available on multiple pages within your website. This ensures that a customer can always find the help they need, no matter where they are in their customer journey.
Possible placements:
1. On the category page (lister page) of the corresponding product category. We recommend using the in-page app or sidebar app here.
2. On the product detail page (PDP) of each relevant product. We recommend using the sidebar app for this purpose.
3. On a separate page that a customer can reach through a menu item or from another page. For this, we recommend the full-page app or in-page app.
4. On any relevant campaign pages, SEO pages, blogs, FAQ pages, or manuals. For these purposes, it is best to choose the full-page app or in-page app.
Want to know more? Get inspiration here: ✨ Let your product finder shine in these 8+ spots. Or check out examples in our Fake Shop.
Choose in what form you want to present the product finder to your customers
There are three ways to show your product finder to your customers. We have some more information about each form:
Have you decided where you want to place the product finder and in what form? Then add your product finder in just 2 easy steps!
Step 1 - Add the Aiden script
The Aiden script must be implemented before you can add Aiden product finders to your website:
<script src="https://app.aiden.cx/webshop/build/aiden-embedded.min.js" async=""></script>
The script "listens" for clicks on the page. To be specific, it only listens for clicks on elements with a so-called 'data attribute'. When a user clicks on an element with the data attribute data-advisor-id, the script will grab the value of the attribute (this is the identifier of the product finder) and start the product finder.
💡 Good to know: We recommend placing the Aiden-script in the <head> of your website. This ensures that your product finders always works properly and are not affected or overwritten by other scripts on your website.
Are you using an e-commerce CMS? Here you will find helpful instructions from different platforms for adding scripts:
Step 2 - Add the embed code from your product finder
Once the script is implemented, you can add one or more product finders anywhere on your website.
1. Go to the Embed section.
2. Choose "Yes, I've already set up the script."
3. Choose where you want to place the product finder, e.g. the Product detail page (PDP).
4. Then choose the form in which you want to display the selection aid, e.g. As a sidebar app.
5. You will now see the embed code. Adjust the button text or menu bar height in the code as necessary.
6. Copy the embed code by clicking om the Copy embed code button.
View an example of the sidebar embed code
View an example of the sidebar embed code
<!-- do not use this example code, always copy the code from the embed-page 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>
View an example of the pop-up embed code
View an example of the pop-up embed code
<!-- do not use this example code, always copy the code from the embed-page 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>
View an example of the in-page example embed code
View an example of the in-page example embed code
<!-- do not use this example code, always copy the code from the embed-page 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>
View an example of the full-page example embed code
View an example of the full-page example embed code
<!-- do not use this example code, always copy the code from the embed-page 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>
7. Paste the embed code into your website's HTML where you want to show the product finder.
8. Test, test, test! Does it look nice and does it work? Congratulations, your product finder is now live!
Repeat these steps for the other places where you want to place the product finder.
💡 Good to know: you only need to add the product finder to your website once. After that, if you change anything in your product finder, the changes are immediately visible after you republish.
Step 3 — Add the Impact script to your website
The Impact Dashboard works by forwarding customer purchases to Aiden. To do this, you place the Impact Script - a small piece of JavaScript - on the order confirmation page.
This is how you activate the Impact Dashboard:
Log in to your Aiden account
Go to one of your apps
Go to Analytics
On the Impact tab, click Set up and follow the steps in this article!