Installing Shop Bot Pro Live Search On Your Website or Online Store

Login to the control panel.

To install the live search on your own website, first make sure you have imported some content URLs into your data set.  

After you have imported some source content URLs into your dataset, click on the live search button inside your data set manager or on the top NAV menu. 

 

Configure Your Tool & Set The Required Values

You can configure and test your live search directly from inside your live search manager in your control panel.  

The most important settings for your live search are the search form class on your website and the search field name on your website. 

In order for the live search to work on your site, it must know where it's supposed to attach itself on your existing search form

• The search form class on your website is the div that “contains” your search form. 
• The search field name is the form’s keyword input field name.

Both of these values must be entered in the Live search configuration page prior to installing the JS script on your site that loads the Live search tool.  

If you are using WordPress or WooCommerce, the search Field name typically will just be the letter “s”. Another common field name for other CMS systems would be “keyword”. 

Depending on your site theme, the class name for your search form container might be something like “search-container” or “search-form-wrapper”. 

Make sure that you do not include quotes or apostrophes when entering both the class name and field name in your live search configuration. For example, if your search field name is called “s”, enter in just the letter s without the quotes.

If you are unsure of your search form’s container class and/or your search field name, you can use the developer tools in your browser to inspect the element on the page and get the name.

If you're unfamiliar on how to use developer tools in your browser and can’t figure out the name of either your search form’s container class or the search form’s input field name, we can also provide both those values for you if you submit a ticket with the URL of where you want to install the tool.

Copy & Install The JS Script File On Your Website

After you have entered in the required values of the search form class and search field name, and have configured your form with your colors and content, click on the button on the top of the page that says “Install on website”.

Once the live search script install page loads, your script will be automatically generated and saved on our CDN to allow loading from your website.

Please note that you must have your domain or sub-domain set in your dataset before installing the tool or it will not function.

When you are ready to install your Live search, click on the ‘Copy Script Tag’ button to copy the script into your clipboard so you can paste it on to your website.

The copied JS file reference (script tag) will have to be installed (pasted) on your site to load the live search code and attach itself to your existing search form.

Depending on how you are managing your website and which CMS platform you are using, installing the script will typically be done either by pasting the script tag into a plugin that enables third-party JS scripts to load on your site or by adding the script tag directly to your site’s footer or header file through your theme editor.

If you're using WordPress, there are many free plugins available that allow you to add JS scripts directly to your site without any coding. If you are using a different CMS manager, many contain a feature that allows you to add the script directly to your site pages.

If your search form loads on every page of your site (for instance in your header), then you will want to install the Live Search script “globally” where the script will load on every page of the site. However, if you want to only use the live search on a specific page, you may want to simply load the script on that page only.

If you are using a custom-design that is not managed by an online CMS system, you will need to manually add the JS file to a design include file such as a footer or header include. If you are unsure of if you need to manually install the tool or install it using a web-based manager, please contact us for advice.

Getting Help Installing Your Tool

If you need assistance installing the script on your site (for any tool), please click on the ‘Contact Support button’ in the lower left hand of any page in the control panel and request direct assistance with your installation. We can either advise how and where to find your JS script installation function in your specific CMS platform or we can do the installation for you.