Frontend

Learn how to seamlessly integrate Visidea with your custom frontend using our JavaScript library. This guide covers all essential steps, configuration options, and best practices.

1. Include the Library

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

Configuration Parameters:

Parameter	Description	Example
`[website]`	Your website name (as registered in Visidea)	"myshop"
`[public_token]`	Public token from your Visidea dashboard	"abc123"
`[language]`	Language code (ISO 639-1, 2 characters)	"en", "it"
`[market]`	(Optional) Target market identifier	"EU"

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

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

Required Parameters:

Parameter	Description
`[language]`	Language code (ISO 639-1, 2 characters)
`[user_id]`	The user ID from your CMS

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

You can open the search popup programmatically (e.g., on a custom button click) using the following methods:

Open the image search popup:

Open Image Search Popup
window.visidea.openPopup({ searchType: 'image' });

Open the text search popup:

Open Text Search Popup
window.visidea.openPopup({ searchType: 'text' });

You can also pass optional filters to restrict results. The filters parameter accepts a string containing a JSON object in the filtering specification format. See the Visidea filtering spec for full details and examples: https://docs.visidea.ai/docs/custom/api#filtering-specifications

Open the text search popup with filters:

Open Text Search Popup with Filters
// `filters` must be a stringified JSON object that follows the filtering spec
window.visidea.openPopup({
  searchType: 'image',
  filters: JSON.stringify({
    page_ids: ['1', '2', '3'],
  })
});

4. Add Recommendations Widgets

Display personalized product suggestions by adding the recommendations widget to key pages:

Home Page

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

Product Page

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

Cart Page

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

Checkout Page

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

5. Track Product Page Views

Improve recommendation accuracy and analytics by tracking product detail page views. Add the following meta tag to your product pages:

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

Required Parameters:

Parameter	Description
`[user_id]`	The user ID from your CMS
`[item_id]`	The current product ID from CMS

6. Tips & Best Practices

Always use the latest version of the Visidea library from the CDN.
Place all Visidea components before the closing </body> tag for optimal loading.
Use meaningful values for user_id and item_id to ensure accurate personalization.
For SPA (Single Page Application) frameworks, re-initialize Visidea components on route changes if needed.
Refer to the Visidea Dashboard for your public token and advanced configuration options.

For further assistance, contact Visidea Support.

Frontend

Table of Contents​

1. Include the Library​

2. Add the Search Modal​

3. Programmatic Search Popup Control​

4. Add Recommendations Widgets​

Home Page​

Product Page​

Cart Page​

Checkout Page​

5. Track Product Page Views​

6. Tips & Best Practices​

Table of Contents