The in-page product finder is opened on the page itself, pushing down the rest of the page content. Here is an example where our Car Seat Finder is displayed at the top of the car seat category page.
The highlighted header and introduction on the 🏁 Start screen are displayed on the page by default, along with the start button:
However, you can also omit the header and introduction text and just show the start button. A good solution for when you already have some text at the top of your category/lister page or want text about your product finder indexed (for SEO purposes). You turn off the header and introduction text in one go with the following button in Embed > As an in-page app:
When the start button is clicked, the product finder opens on the page itself and pushes down the list of car seats.
Customers who don't need help can simply ignore the start button, while customers who do need help will have a more native assistant experience.
Below is an example of the code.
<iframe
src="https://app.aiden.cx/webshop/?advisorId=a1798edb-3531-4cdd-9684-bee972a1c084&mode=inpage&layout=vertical&transparent=true"
id="aiden-a1798edb-3531-4cdd-9684-bee972a1c084"
scrollOffset="-100"
loading="lazy"
style="
border: none;
width: 100%;
min-height: 400px;
"
></iframe>
⚠️ Note: don't forget to implement the Aiden script.
💡 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.