Quick Install
The Quick Installation feature provides a seamless search experience with a dynamic search-as-you-type Widget view. This intelligent widget instantly displays autocomplete search suggestions below the search field as you type, and it also renders the search results list.
This user-friendly integration empowers you to enhance the search functionality of your platform instantly, leading to a more satisfying and productive user experience.
With this enhancement, users can easily find relevant information in real-time as they interact with the search interface. The smooth integration of this feature ensures a more efficient and user-friendly search process, ultimately enhancing the overall user experience on your platform.
Instructions
Once you have selected the required options, your code snippet will be ready for installation in Views.
To integrate into your platform, follow these steps:
- Access the Keyspider dashboard and navigate to the “Views” section.
- Locate the “Install” page, where you’ll find the necessary code snippets.
- Copy the provided code, which consists of two pieces of code.
Step 1:
In the first part of the provided code, you’ll discover three important <div> tags.
- The first
<div>tag corresponds to the search box widget, offering the “suggest-as-you-type” functionality. This dynamic feature provides users with instant autocomplete search suggestions as they type their search queries, enhancing the search experience.
<div class="dashboard-search"></div>2. The second <div> tag is responsible for displaying the search results. Once users enter their search keyword, this <div> section will dynamically render the relevant search results, enabling users to find the desired information efficiently.
<div class="dashboard-search-results"></div>
3. The third <div> is designated for the pagination feature. This element facilitates the navigation of search results, allowing users to browse through multiple pages of search results with ease.
<div class="dashboard-search-pagination"></div> Step 2:
Simply add the following code to the <head></head> tag. This will load the necessary instant search library and empower your platform with search feature.
To establish a connection with your Keyspider account, ensure that you replace “####” with your unique API key.
<script>
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = "https://cdn.jsdelivr.net/gh/keyspidr/Enduser-CDN-JS-library/keyspider-search-js-lib.js";
document.head.appendChild(script);
window.addEventListener("load", function () {
window.searchInit && window.searchInit("###API key###", "###Organization Id###");
});
</script>
Once you have integrated the API key into the script, you can easily incorporate the search widget into your website. To achieve this, simply paste the script into your website’s template or directly into the page’s source code, precisely where you wish the search feature to be displayed.