Frontend

Workflow

Include the library

Add the library from our CDN and instantiate it before the end of the body tag. Replace [website], [public_token] and [language] with the website name, the public token retrieved from the Visidea dashboard, and the langage code (2 characters ISO 639-1) you want to use.

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

Insert the search modal where you want to display (usually before the end of the body)

Replace [language] with the langage code (2 characters ISO 639-1), [user_id] with the user ID from your CMS.

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

Optional: Open the search bar popup from a custom element

If you want to open the search bar popup programmatically (for example, when clicking a custom button), you can use the following JavaScript methods:

To open the image search popup:

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

To open the text search popup:

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

Insert the recommendations widget on the home page

Replace [language] with the langage code (2 characters ISO 639-1), [user_id] with the user ID from your CMS.

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

Insert the recommendations widget on the product detail page

Replace [language] with the langage code (2 characters ISO 639-1), [user_id] with the user ID and [item_id] with the product ID from your CMS.

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

Insert the recommendations widget on the cart page

Replace [language] with the langage code (2 characters ISO 639-1), [user_id] with the user ID from your CMS.

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

Insert the recommendations widget on the checkout page

Replace [language] with the langage code (2 characters ISO 639-1), [user_id] with the user ID from your CMS.

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

Track a view on the product detail page

Replace [user_id] with the user ID and [item_id] with the product ID from your CMS.

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

Frontend

Workflow​

Workflow