Frontend

Workflow

1. Include the library

   Add the Visidea JavaScript library from our CDN and initialize it before the closing </body> tag.

   Configuration parameters:

   • [website]: Your website name
   • [public_token]: The public token from your Visidea dashboard
   • [language]: Language code (2-character ISO 639-1 format, e.g., "en", "fr", "it")
   • [market]: Target market identifier (optional parameter)

<script src="https://cdn.visidea.ai/js-visidea/js-visidea-3.11.0.min.js"></script>
<script>
    window.onload = function() {
        window.visidea("[website]","[public_token]","[language]","[market]");
    };
</script>

2. Add the search modal

   Insert the search modal component where you want it to appear (typically before the closing </body> tag).

   Required parameters:

   • [language]: Language code (2-character ISO 639-1 format)
   • [user_id]: The user ID from your CMS

<div class="visidea-search-bar" language="[language]" user_id="[user_id]"></div>

Optional: Programmatic search popup control

If you want to open the search popup programmatically (e.g., when a user clicks a custom button), you can use these JavaScript methods:

• To open the image search popup:

window.visidea.openPopup({ searchType: 'image' });

• To open the text search popup:

window.visidea.openPopup({ searchType: 'text' });

3. Add recommendations widget to home page

   Insert the recommendations widget on your home page to display personalized product suggestions.

   Required parameters:

   • [language]: Language code (2-character ISO 639-1 format)
   • [user_id]: The user ID from your CMS

<div class="visidea-recommendations" language="[language]" page="home" user_id="[user_id]"></div>

4. Add recommendations widget to product page

   Insert the recommendations widget on product detail pages to show related or complementary products.

   Required parameters:

   • [language]: Language code (2-character ISO 639-1 format)
   • [user_id]: The user ID from your CMS
   • [item_id]: The current product ID from your CMS

<div class="visidea-recommendations" language="[language]" page="product" user_id="[user_id]" item_id="[item_id]"></div>

5. Add recommendations widget to cart page

   Insert the recommendations widget on the cart page to suggest additional items or cross-sell products.

   Required parameters:

   • [language]: Language code (2-character ISO 639-1 format)
   • [user_id]: The user ID from your CMS

<div class="visidea-recommendations" language="[language]" page="cart" user_id="[user_id]"></div>

6. Add recommendations widget to checkout page

   Insert the recommendations widget on the checkout page for last-minute purchase suggestions.

   Required parameters:

   • [language]: Language code (2-character ISO 639-1 format)
   • [user_id]: The user ID from your CMS

<div class="visidea-recommendations" language="[language]" page="order" user_id="[user_id]"></div>

7. Track product page views

   Add view tracking on product detail pages to improve recommendation accuracy and analytics.

   Required parameters:

   • [user_id]: The user ID from your CMS
   • [item_id]: The current product ID from your CMS

<meta class="visidea-interaction" type="item" user_id="[user_id]" item_id="[item_id]" />