Once you've created your Programmable Search Engine, you can add the Programmable Search Element code to your site. To do this, you'll need to copy some code and paste it into your site's HTML where you want your search engine to appear.
- From the list of search engines, select the search engine you want to implement on your site.
- Click Overview, under Basic on the right hand side, you will find Code.
- Click Get code
- Copy the code and paste it into your site’s HTML source code where you want your search engine to appear.
- Paste the code in every page where you want a Programmable Search Engine box. You can paste the code anywhere within the
<body></body>tag of your webpage. - If you've chosen the "Two page" layout option, you'll need to copy and paste two snippets of code:
- Paste the first code snippet where you want the search box to appear.
- Paste the second code snippet where you want the search results to appear.
- For two-page layout, type the URL of the webpage that will show the results for your search engine. Type the query parameter name embedded in the url, which is parsed by the search results page.
- If you've chosen the "Two column" layout option, insert the code for the search box in one column and the code for the results in another column.
- If you've chosen the "Results only" layout, insert the code snippet in the webpage where you want the search results to appear.
Note
- The
<div class="gcse-search"></div>element is a placeholder - this is where the search element (both search box and search results) will be rendered. - If you are using hover effects for your Search element, your HTML page must use a supported doctype such as
<!DOCTYPE html>. For the most cross-browser compatibility, it is recommended that your HTML pages use a supported doctype such as<!DOCTYPE html>.