Set up a Google Custom Search Engine for your IU website

• Overview
• Request a Google Custom Search Engine
• Set up your Custom Search Engine
• Add your Custom Search Engine to your website
• Edit your Custom Search Engine
• Delete a Custom Search Engine

Overview

At Indiana University, you can use Google Custom Search to help people find the information they need on your website(s). You can add a Google Custom Search Engine to your web page(s) by copying and pasting a few lines of HTML, CSS, and JavaScript. You can configure your Custom Search Engine to search whatever site(s) you want, even sites you don't own. People who use the Google Custom Search box on your website will see search results from only the site(s) you choose.

At IU, you can use Google Custom Search on your website without fee as part of the Google at IU service.

Request a Google Custom Search Engine

To request a Google Custom Search Engine for use with your IU website, fill out and submit the Google@IU Custom Search Engine Request form.

On the form, you must provide the following information:

• Name: Enter your full name (first and last name).
• Email address: Enter the IU group account email address used to create your department's shared Google at IU account.
• Phone number: Enter the phone number of a contact person whom the Google at IU administrator can call if any questions or problems arise.
• Username(s) of CSE administrator(s): Enter the IU username (or usernames, comma-separated) of the individual(s) to whom you want to grant administrative rights to your Custom Search Engine.
• "Friendly" name for CSE: Enter a name to identify this search engine (for example, Deathstar.org search) from others your department has created or may create in the future.
• URL of search site: Enter the URL of an initial website to add to the Custom Search Engine (you can add more websites later).

When you're finished, enter your name in the SIGN HERE box, and then select Submit. The Google at IU administrator will notify you when your Custom Search Engine is ready.

Set up your Custom Search Engine

1. Go to Google Custom Search Engine. If you're not already logged into Google at IU with your department's shared Google account, select Sign in To Custom Search Engine, and then log in through IU Login and Two-Step Login (Duo) using the group account credentials associated with your department's shared Google account.
2. Under "Edit search engines", find the search engine you created, and select its name.
3. On the Setup page, on the Basics tab, you can change the name of your search engine, add a description and keywords, and list the URLs of the websites you want the search engine to search. When you're finished making changes, at the bottom of the page, select Update.
4. From the menu on the left, choose Look and feel and use the provided tabs to customize your search engine's appearance:
   • On the Themes tab, you can select one of the provided design themes.
   • On the Customize tab, you can choose the fonts and colors that are used in search engine elements (for example, search box, search button, and search results).
   • On the Layout tab, you can choose one of several layouts that display the search box and search results on the same web page, or choose the layout for displaying the search box and search results on separate pages.
5. When you're finished with Look and feel changes, select Save & Get Code.

Add your Custom Search Engine to your website

The process of embedding Custom Search components (your search box and search results) in your web page(s) involves copying the code you generated by selecting Save & Get Code at the end of the previous section, and pasting it into the HTML of your web page(s). The exact steps you take will depend on the layout you choose. Following are instructions for one of the one-page layouts and the two-page layout.

• Overlay: Choosing the Overlay layout and selecting Save & Get Code generates code for displaying the search results as an overlay on the same page as the search box. The generated code will look similar to this (the value for cx will be a unique ID specific to your search engine):

    <script>
      (function() {
        var cx = 'your_search_engine_ID';
        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>

  Copy the generated code, and then paste it into a single <div> element in the body of your web page(s).

• Two page: Choosing the Two page layout and selecting Save & Get Code generates code for displaying your search box and search results on separate pages. The generated search box code will look similar to this (the value for cx will be a unique ID specific to your search engine):

    <script>
      (function() {
        var cx = 'your_search_engine_ID';
        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:searchbox-only></gcse:searchbox-only>

  Copy the generated code and paste it into a <div> element in the body of the web page(s) where you want your search box to be displayed. To specify the URL of your search results page, add the resultsUrl argument to the <gcse:searchbox-only> element; for example:

    <gcse:searchbox-only resultsUrl="search_results_url"></gcse:searchbox-only>
  

  Back on the "Get code for search box" page, select Next: Get code for search results (beneath the text/code box). On the resulting "Get code for search results" page, copy the generated code and paste it into a <div> element in the body of your search results page.

  Note:

  Alternatively, you can specify the URL of your search results page without manually adding it to your search box code:

  1. On either the "Get code for search box" or "Get code for search results" page, select Search Results Details (above the text/code box).
  2. In the resulting window, enter the complete URL of your search results page. (In the "Specify the query parameter name embedded in the URL" field, either leave the default q or, optionally, change it to query.)
  3. Select Save.

For more about Custom Search elements, see Google's Custom Search Element Control API page.

Edit your Custom Search Engine

To edit the name, description, websites to search, and/or the look and feel options of your Custom Search Engine, return to Google Custom Search Engine and follow the steps (as needed) from the Set up your Custom Search Engine section, above.

To add or remove search engine administrators, email the Google@IU administrator at edshelp@iu.edu.

Delete a Custom Search Engine

To delete a Google Custom Search Engine, email the Google@IU administrator at edshelp@iu.edu.