Integrate a Custom Google Programmable Search Engine on Websites

Submitted by oretnom23 on Thursday, March 16, 2023 - 16:37.

In this tutorial, you can learn how to Integrate a Custom Google Programmable Search Engine for websites using JavaScript. The main purpose of this tutorial is to provide students and beginners with a reference for learning to integrate the google search engine into a website. Here is a simple web page script that demonstrates the integration of the google search engine into a simple website.

What is Google Programmable Search Engine?

The Google Programmable Search Engine was formerly called Google Co-op and Google Custom Search. It is a platform provided by Google that allows web developers to integrate and enhance their website search feature to provide the indexed web pages of their site to their visitors. Google also allows to developers to customize the Search Engine according to the site's needs.

Getting Started

Before we proceed to the coding part, we must create first the custom Programmable Search Engine in Google. To do that follow the instructions below.

How to Create a Google Programmable Search Engine?

Make sure that you have already created a Google Account
Log in to your Google Account in your browser.
Browse https://programmablesearchengine.google.com/
Next, click the Get Start button on the web page.
Next, fill in all the required fields on the form like the following image.
Then, Google will generate a code that you will need for integration.
Click the Customize button if you want to customize the search engine.

How to use the Google Programmable Search Engine generated Code?

We can simply integrate the Google Programmable Search Engine that we created using the generated code that was provided after the successful creation of our Search Engine. The below script demonstrates the usage of the generated code.

Page Interface

Here's the HTML file script known as index.html. It contains the page layout elements and the generated code. Make sure to change the Search engine ID with the one you created.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Google Programmable Search Engine</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
    <script async src="https://cse.google.com/cse.js?cx=03a19a7f685254faf">
    </script>
    <link rel="stylesheet" href="style.css">
 
</head>
<body>
    <div id="wrapper">
        <div class="page-title">Google Programmable Search Engine</div>
        <hr style="margin:auto; width:25px">
        <div id="gpse-wrapper">
            <div class="gcse-search"></div>
        </div>    
    </div>
</html>

Stylesheet

Here's the custom CSS code for the design of the web page. The file is known as

class="text-danger">style.css.

@import url('https://fonts.googleapis.com/css2?family=Courgette&family=Secular+One&display=swap" rel="stylesheet');
:root{
    --secular-font: 'Secular One', sans-serif;
}
*{
    box-sizing: border-box;
}
body *{
    font-family: 'Rubik', sans-serif;
}
/**
Page Design
*/
body,
html{
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}
body{
    background-color: #B9F3E4;
}
/* Page Wrapper */
#wrapper{
    width: 100%;
    padding: 3em 5em;
}
.page-title{
    font-size: 2.5rem;
    font-weight: 500;
    color: #fff;
    letter-spacing: 3px;
    font-family: var(--secular-font);
    text-align: center;
    text-shadow: 0px 0px 3px #2020208c;
}
#gpse-wrapper {
    position: relative;
    width: 720px;
    margin: auto;
    margin-top: 3em;
    background: #fff;
    padding: 2em 2em;
}

Here are the snapshots of the overall result of the script that I provided above.

Google Search Box on the Web Page

Google Search Result on the Web Page

How to Integrate Google Programmable Search Engine using JavaScript?

We can also integrate the Google Programmable Search Engine using JavaScript to place the search engine's search box and result in the custom element or specific area of the page. Check out the sample web page script below to know about how to achieve it using JavaScript.

Page Interface

Here is the HTML file script known as custom.html. It contains the page layout and custom search engine elements.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Google Programmable Search Engine</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
    <!-- Change cx parameter value with your created custom search engine ID -->
    <script async src="https://cse.google.com/cse.js?cx=03a19a7f685254faf">
    </script>
    <link rel="stylesheet" href="style.css">
 
</head>
<body>
    <div id="wrapper">
        <div class="page-title">Google Programmable Search Engine - Custom</div>
        <hr style="margin:auto; width:25px">
        <div id="gpse-wrapper">
            <div id="gpse-custom-search-box"></div>
        </div>
        <div id="gpse-result-wrapper">
            <div id="gpse-custom-result-box"></div>
        </div>
    </div>
    <script src="custom-gpse.js"></script>
</html>

Stylesheet

Here's the CSS file script known as style.css. It contains the CSS code for the design of the page layout and custom search engine elements.

@import url('https://fonts.googleapis.com/css2?family=Courgette&family=Secular+One&display=swap" rel="stylesheet');
:root{
    --secular-font: 'Secular One', sans-serif;
}
*{
    box-sizing: border-box;
}
body *{
    font-family: 'Rubik', sans-serif;
}
/**
Page Design
*/
body,
html{
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}
body{
    background-color: #B9F3E4;
}
/* Page Wrapper */
#wrapper{
    width: 100%;
    padding: 3em 5em;
}
.page-title{
    font-size: 2.5rem;
    font-weight: 500;
    color: #fff;
    letter-spacing: 3px;
    font-family: var(--secular-font);
    text-align: center;
    text-shadow: 0px 0px 3px #2020208c;
}
#gpse-wrapper {
    position: relative;
    width: 720px;
    margin: auto;
    margin-top: 3em;
    background: #fff;
    padding: 2em 2em;
}
#gpse-result-wrapper {
    position: relative;
    width: 720px;
    margin: auto;
    margin-top: 1em;
    background: #fff;
    padding: 2em 2em;
}
#gpse-result-wrapper:has(#gpse-custom-result-box:empty){
    display: none;
}

Rendering Google Programmable Search Engine

Here's the JavaScript file script known as custom-gpse.js. It contains the codes that render the search box and search result to the specific page element.

/** Element Selector */
const SearchBoxHolder = document.getElementById('gpse-custom-search-box')
const SearchResultHolder = document.getElementById('gpse-custom-result-box')
var params = new URLSearchParams(location.search)
 
window.onload = function(){
    if(document.readyState == 'complete'){
        /** Render Google Custom Searchbox  */
        if(SearchBoxHolder !== null)
            renderSearchBox();
 
        /** Render Google Custom Result Box if search query exsits  */
        if(SearchResultHolder !== null && params.has('search') == true){
            renderResultBox();
        }
    }
}
const renderSearchBox = () => {
    /** Rendering Searchbox to custom Element */
    google.search.cse.element.render(
        {
            div: SearchBoxHolder.id,
            tag: 'searchbox-only',
            attributes: {
            resultsUrl: 'https://localhost/google-programmable-se/custom.html?search=gpse'
            }
        }
        );
}
 
const renderResultBox = () => {
    /** Rendering Search Result to custom Element */
    google.search.cse.element.render(
        {
            div: SearchResultHolder.id,
            tag: 'searchresults-only'
        }
    );
}

Here are the snapshots of the overall result of the web page scripts that I provided above.

The search box on the Web Page

Search Result on the Web Page

There you go! I have also provided the complete source code zip file on this site and it is free to download. Feel free to download and modify it. The download button is located below this tutorial's content.

That's it! I hope this Integrate a Custom Google Programmable Search Engine on Websites Tutorial will help you with what you are looking for and will be useful for your current and future website or web application projects.

Explore more on this website for more Tutorials and Free Source Codes.

Happy Coding =)

Add new comment

489 views

Integrate a Custom Google Programmable Search Engine on Websites

What is Google Programmable Search Engine?

Getting Started

How to Create a Google Programmable Search Engine?

How to use the Google Programmable Search Engine generated Code?

Page Interface

Stylesheet

Google Search Box on the Web Page

Google Search Result on the Web Page

How to Integrate Google Programmable Search Engine using JavaScript?

Page Interface

Stylesheet

Rendering Google Programmable Search Engine

The search box on the Web Page

Search Result on the Web Page

Happy Coding =)

Tags

Add new comment