Skip to main content

Getting Started

Add script and css tags into the page​

index.html - Remote files importing
<head>
...
    <!--
        Import CSS.
        Insert it inside of the <head> tag
    -->
    <link rel="stylesheet" href="https://code.yesplz.ai/stylefilter/<RETAILER CODE>/latest/stylefilter.css">
</head>
<body>
    ...
    <!--
        Import JavaScript file.
        Prefered location is in the bottom of the body tag following by initialization script.
    -->
    <script src="https://code.yesplz.ai/stylefilter/<RETAILER CODE>/latest/stylefilter.js"></script>
</body>

Initialize and add widgets​

This is the script that you'll use for integration. It can be a <script> tag in the html file with raw javascript in it, your common javascript file with dedicated section or separate file as it presented here.

Start with adding SearchBar or DualSearchBar Widget.

script.js - Initialization script

/**
 * 1. Create TextSearch instance
 */
const textsearch = window.yesplz.textsearch();

/**
 * 2. Add Search Bar Widget to the page
 */
textsearch.addWidget(
  textsearch.widgets.SearchBar({
    container: "#yesplz-search-bar",
    startInput: "#search"
  })
);

This will insert Text Search Bar on the page.