Integrate a Custom Google Programmable Search Engine on Websites

amen541 · 2025-02-27T03:25:08+0000

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"

/

>
<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 =)

Download

You must upgrade your account or reply in the thread to view hidden text.

Integrate a Custom Google Programmable Search Engine on Websites

More options

amen541

449,193

322,229

322,238