Free Web Development Online Tutorials, Learn to Code
Implement Google Custom Search; Let the user search your content easily

How to add google custom search in website

Google custom search integration example

Set up a google custom search for your website, Do you understand why adding a custom Google search implementation in your website is a good idea ?
Let me give you some scenario to understand "custom search" better.

  • Just think, you got a frequent visitor of your site, user had read some good content on your site during last visit, now visitor has come back to look for that particular information on your site, how do you provide them a quick way to find? One obvious way can be “building a custom content search on your own for your site”, but that’s really not cool idea, when there is something ready to use custom search functionality provided by google, so you can provide the functionality just by adding few lines of ready code.

  • Another thought is, the user may go out of your site just to look for same information, so why to let user go out of your site?

Now let's see how quickly we can add custom search in your site, it's very simple, follow the steps below.

Just log into your google account and
go to developer control panel (https://cse.google.com/cse/all) , as shown picture below

google custom search implementation

Add your website url and name for custom search, you also can add multiple urls, just think if you have multiple sub domains or any other domain, where you want to find the content

add google custom search in website

Once you click on create button your search code is ready, there are some further customization also can be done, you may also turn on image search (recommended)

google custom search implementation

Implement custom search box in your website

Once you click on "Get Code" button, then a popup will give your custom code like below.

< script> (function () {
var cx = '007420403898934477071:ouih7fyyn6i';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
< /script>
< gcse:search>< /gcse:search>

There is another additional object called <gcse:searchresults></gcse:searchresults>, this can be used for "custom search result display" customization.

You can implement this code anywhere on your website and enjoy google custom search functionality

Customise Google Search Box for your Website

Add few additional lines of JavaScript and CSS code to customize Google search matching your website look and feel

Change placeholder and title text using JavaScript
<script>
window.onload = function () {
var searchBox = document.getElementById("gsc-i-id1");
searchBox.placeholder = "WebTrainingRoom";
searchBox.title = "WebTrainingRoom";
}

</script>
<gcse:search></gcse:search>

Now write few CSS class to change the textbox and button look and feel

    button.gsc-search-button {
        display: block;        
        border-width: 0px !important;
        margin: 0px !important;        
        outline: none;
        cursor: pointer;
        box-shadow: none !important;
        box-sizing: content-box !important;
        border: 1px solid #0173af !important;
        background-color: #0173af;
    }
        button.gsc-search-button:hover {
            background-color: #0173af;
        }
        button.gsc-search-button::outside {
            background-color: #0173af;
        }
     #search-box {          
            margin: 0 auto;
            background-color: #0085cc;
            border-radius: 2px;            
        }

Note: above CSS class is just sample, you can modify or add new properties to change look and feel as per your requirement

Comment
Name
Email
Website
Subscribe
You may also read
How to Check Website Traffic and Optimize Website
How to Check Website Traffic
Best web designing technologies and best practice
web designing technologies
 
Add Google Search to Website

SEMrush
Marketing Tips