Embedding “ChatBar” AI Search

How to put AI-Search in your website

Simple version in chat bot style

The simplest version of the AI Search service is achieved with the short code snippet shown below. Replace <MY TOKEN> with your website specific token.

 <script src='https://business-landing.com/scripts/bl_ai_search.min.js'></script> <script> document.addEventListener('DOMContentLoaded', async function() { _bl_ai_search.init('<MY TOKEN>'); }); </script>

Note: The code will load javascript and css from the Search AI server at business-landing.com. So if you operate a strict CSP then you might need to adjust the CSP to allow this.

Simple version in client selected style

If you have selected a style from the examples provided by Business Landing then you will need to provide an HTML element that the AI Search will be attached to. In the example below the HTML element has an id of auto_ai_search_bot. Replace <MY TOKEN> with your website specific token.

 <script src='https://business-landing.com/scripts/bl_ai_search.min.js'></script> <script> document.addEventListener('DOMContentLoaded', async function() { var ai_element = document.getElementById('auto_ai_search_bot'); _bl_ai_search.init('<MY TOKEN>', ai_element); }); </script>

Exposing your website specific token has little to no security implications as it only allows queries related to your own website.

Custom version with callbacks

For more flexibility you may call _bl_ai_search.init() and supply your own callbacks to modify the javascript actions to suit your own needs. The bl_ai_search javascript provides 4 callbacks:

  • callback: A standard results callback. This is triggered when the AI response is complete and receives two arguments, the chat message and the answer. AiAnswerCallback(chatMessage, answer);
  • configCallback: This is triggered when the AI Search is configured and ready following page load. It receives zero arguments.
  • searchResultsCallback: This is triggered when search results are available. It receives one argument which is an array of search results: searchResultsCallback(search_results);
  • processingCallback: This is triggered as each chunk of the AI answer is delivered: processingCallback(answer_chunk);

The search results have the following JSON format:

 { "title": "META Title of page", "description": "META Description of page", "image": "URL of the meta image", "source": "URL of the page" }

Supply your callback functions in the following manner:

 <script src='https://business-landing.com/scripts/bl_ai_search.min.js'></script> <script> document.addEventListener('DOMContentLoaded', async function() { var ai_element = document.getElementById('auto_ai_search_bot'); _bl_ai_search.init( '<MY TOKEN>', ai_element, { callback: AiAnswerCallback, configCallback: configCallback, searchResultsCallback: searchResultsCallback, processingCallback: processingCallback } ); }); </script>

AI-Search Results Processing

Using the ChatBar AI searchResultsCallback

Below is some example code that will, if enabled in your configuration, process the search results that are passed back after sending your...

more

Adding a copy/clipboard function

Example of the AI-Search chat completion callback usage

The AI Search callback can be used to modify the AI answer display, or even the answer itself. Here we add the ability to click on a icon in the...

more