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

Installation Summary Steps

  • Configure Your Embedded Search Tool Inside Your Control Panel

  • Add Your Site’s Destination Container Class for The Embedded Display And Optional Existing Search Field Name Values On The Configuration Page For the Embedded Search

  • Copy And Paste The Install JS File (Script Tag) On Your Website Via Your CMS Manager.

Installation Details

Login to the control panel.

Add content (URLs) Into Your Dataset First

To install the embedded search tool 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 'Embedded 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 embedded search tool directly from inside the manager in your control panel.  

The most important setting for the Embedded Search tool is  'Target Class For Embedded Search Form & Results Display:' 

The "Target Class For Embedded Search Form & Results Display" value is the class name of the div (section) where you would like to append the embedded search form and/or embedded results display on your page(s). 

The other settings will be determined by which type of Embedded Search you will be integrating on your site. 


The Three Types of Embedded Search

The embedded search can configured for use in three different scenarios:
  1. Stand-alone Segmented Content Search
  2. Summary Results List Only
  3. Primary Site Search & Search Results system.

Stand-Alone Segmented Content Search

The stand-alone embedded search scenario is typically used when you want to search a subset of your site's content such as knowledge base documents or some other type of segmented business documents that are located in their own specific section on your site.
IMPORTANT: If you install the Embedded search results as a stand-alone search feature, make sure that "Show Form (Stand-Alone Search Page)" is selected as the option for the "Search Form Setting" on the Embedded Search configuration page in the control panel. If this setting is set to any other option, the user will not be able to initiate a search on your documents.
If you will using the embedded results as a stand-alone content search function, the 'Current Search Field "Name" On Website' field can be left with the default value (or any value) since it will not be used in this scenario.

Summary Results List Only

The embedded summary results only display option is used when you want to show an AI-optimized list of site links based on the user's search query that is submitted by the site's primary search form. The embedded list can be displayed above, below or adjacent to your current search results display.
 
The "results-only" method is used to always provide some relevant search results to the user and, more importantly, provide much more accurate results that what will be returned by your site's current search listings. 
 
This method also ensures that your user will get some results even if your primary search results are empty.
 
If you will be using the Embedded Search AI tool to only provide a summary results list based on the search that is sent into your current search results page, you typically will want to DISABLE THE SEARCH FORM and only display the results list.  
 
To disable the search form, select "Hide Form (Embedded Results Only)" on the 'Search Form Setting' drop-down on the configuration page in the control panel.
 
The value you enter in the "Target Class For Embedded Search Form & Results Display" on the Embedded Search configuration page in the control panel will determine where the AI-optimized, embedded results display will appear on your current search results page. 
 
Since the Enbedded Results needs to process the search based on the query sent into your primary results, you will need to enter in the name of your site search's form input field (keyword field) name in the configuration setting. Enter the name of your current search form's keyword input field in the setting for 'Current Search Field "Name" On Website'.
 
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”. 
 

Make sure that you do not include quotes or apostrophes when entering both the target class name and the field name in your embedded 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 target container class name 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 results page target 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.

Primary Site Search & Results System

Note: This scenario typically requires the most configuration and/or customization on your site and depending on your experience with your site's existing structure and search function, you may want to consult with our support for assitance in the integration process.
If you will be using the Embedded Search Tool as your primary site search solution you will want to need to have a "landing" page (results page) on your site where the embedded results display will be shown when somebody submits a keyword or question based search on your content.

If you have an existing search form and results page on your site, you can disable your current search results display and use the Embedded Results as the primary results list (instead of the above scenario where the AI embedded results list are a supplementary display to your primary results).
Regardless of how you set up your search results landing page, you will need to specify the container class (div/section) where you want the embedded results to appear by entering that class name in the "Target Class For Embedded Search Form & Results Display" on the Embedded Search configuration page in the control panel.

If you have an existing search form that will be sending in the queries into your search results landing page, you should enter the name of the keyword input form field as the Current Search Field "Name" On Website' value in the Embedded Search configuration page in the control panel.

The embedded search tool can use any form field name that you specify as your site's keyword search field. However, you need to make sure that your search form is targeting the page where you install the embedded search results display. 
 
If you are simply replacing your current search results display with the embedded results display, that will not be an issue since that page URL for your results will already be set on your search form. 
 
However, if you are creating a custom search form to send queries into the search results landing page, you will need to make sure that you specify the "action" value of the form as the URL of your results landing page and the form method as "get". If you don't not know what these terms mean or you need need to create a custom search form, please contact support for assistance and we can set it up for you.
 
The two other critical settings in the configuration screen, if you will be using the embedded search tool as your site's primary search function, are to select "Primary Search Solution" as the option under the 'Search Form Settings' drop-down and also enter in the URL of your search results landing page. These two required settings allow the Embedded search to send in requests to your results page for searches that are submitted from that page itself and not just from other pages on your site.
 

Using the Embedded Search Tool as your site's primary search and results display requires the most configuration and experience with web design but we can directly assist you in the integration process if you do not have the knowledge or a developer who can help you with the process. Direct support for integration of our tools is included on all plans, including the free trial.

Copy & Install The JS Script File On Your Website

After you have entered in the required values and setting for your Embedded Search based on the integration method you require (Stand-Alone, Results-Only or Primary Site Search), 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 Embedded 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 Embedded 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 Embedded Search code and attach itself to your result's page target div container.

Note: Unlike the Live Search Install, the Embedded Search Install Script only needs to be added the the page or pages where you will be displaying the embedded search results.

Depending on how you are managing your website and which CMS platform you are using, installing the script will typically be done by pasting the script tag into a plugin that adds the script tag to your specific search results landing page.

If you're using WordPress, there are many free plugins available that allow you to add JS scripts directly to a page 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 results page to load the embedded display.

You can also simply paste the script tag into your page's content HTML editor if it allows you to paste or insert JS files directly to the page using the WYSIWYG editor.

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 your results landing page. 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.



Search Shop Bot Pro Knowledge Base | Help Docs

▲