Using a custom search form embedded in your web site

This article provides step by step explanation for adding a Custom Search Widget to your web page. 

Note: We will provide you a set of code files for the Search Widget which will include the HTML Code, CSS & JavaScript.

Below is the folder structure for the widget provided. You will just need to place each folder into your website’s root path.



Steps to follow-

1. Copy the HTML Code from the widget.html file and paste the piece of code on the page where  you need to show the search widget. For example - You will need to copy & paste the below into the body tag of your web page. 



2. Now save the “.js” files into the existing JS folder present in your website root.  You can find this folder on your existing server where your website is hosted. In case, if you do not have any JS folder, please create a new folder and save the files.

3. Now save the “CSS” files into the existing CSS or Style folder present in your website root. You can find this folder on your existing server where your website is hosted. In case, if you do not have any CSS or Style folder, please create a new folder and save the files.
Note: You can customize the CSS file as per your website styling.

4. Same as Step 2 & 3, save all the Image files & Font files into the existing Image & Fonts folders present in your website root.  You can find these folders on your existing server where your website is hosted. In case you do not have any Image & Fonts folder, please create two separate folders and save the files.