Add your product finder to your website

Choose the places you want to show your product finder

We recommend making product finder available on multiple pages within your Web site. 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, sidebar app or pop-up app here.

2. On the product detail page (PDP) of each relevant product. We recommend using the sidebar app or the pop-up 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 7 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:

Once you have 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 is 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. Click on the form you want to use:

3. Adjust the button text or the height of the menu bar as necessary.

4. Copy the embed code by clicking om the Copy embed code button.

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

<!-- 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

<!-- 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

<!-- 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>

5. Paste the embed code into your website's HTML where you want the product finder.

6. Test, test, test! Does it look nice and work? Congratulations, your product finder is now live!

‍

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