We recommend this form if you want to place your product finder on a product detail page or category/lister page. The sidebar is a modern integration where the customer focuses on the product finder and at the same time maintains a connection with the webshop. Check out our fake shop to see the sidebar app in action.
Let's give an example. Most online shops get a lot of direct traffic to product pages. However, much of this traffic is still in the orientation phase: visitors don't really know if this particular product fits their needs. Therefore, on the product detail page of this hiking boot, there is a button "Need help? Try our Boot finder":
A customer who is not quite sure if this particular car seat is the right one can simply click the button. When clicked, a sidebar opens with the Bootfinder product finder. The customer can now fully focus on the product finder and thus continue their search for the right product:
Here is an example of the code for the button
<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>
Options other than the button for a Sidebar app on your website
1. Incorporate the button into a banner image
Here we see a banner image that opens the product finder when the image is clicked:
<img src="..." data-advisor-id="00000000-0000-0000-0000-00000000" data-aiden-mode="sidebar"/>
How to use this:
Implement the Aiden script.
Replace
...with the URL for the banner image you want to use.Replace
00000000-0000-0000-0000-00000000with the advisor ID of your product finder. You can find this ID in the embed code.Place the complete code snippet anywhere you want to display the banner on your website.
The app opens when a customer clicks on your banner.
2. Incorporate the button into an element of your menu
Here is an example of a website menu with a navigation element that opens the app when the second menu item is clicked:
<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>
How to use this:
Implement the Aiden script.
Add a menu item to your website's menu that calls the
data-advisor-idof your product finder . You can find this ID in the embed code.The app opens when a customer clicks on the menu item.
3. Part of an image slider
And here is an example of an image slider that opens product finder when the second image is clicked:
<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>
How to use this:
Implement the Aiden script.
Add an image to your slider that calls the
data-advisor-idof your product finder . You can find this ID in the embed code.The app opens when a customer clicks on the image in the slider.
💡 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.