Get started

Follow these steps to add the Domains widget to your site:

1. Set up your account

Contact Google Domains to apply to be a partner. Once approved, we set up a new account that you need to configure. When you configure your account, you set a template which determines the behavior of domains registered through your widget. This template includes the following:

  • Resource records that you'd like automatically added to new domains. For example, you can set A, AAAA, CNAME, and MX, records to have your web service automatically configured by default.
  • The domain you want to use the widget on. You may also choose to include subdomains.
  • Any relevant fields you want to pass to Domains.

2. Import the API source

Add the following script source to the head element of your website document:

<script src="https://apis.google.com/js/api.js"></script>

3. Invoke the widget API

Add the following JavaScript skeleton to the head element of your website document:

    <script type="javascript">
    gapi.load('domains', function() {
        gapi.domains.searchAndBuy(
        {
            partnerId: /*RQ*/,
            successUrl: /*RQ*/,
            cancelUrl: /*RQ*/,
            defaultQuery: /*Opt*/,
            defaultTlds: /*Opt*/,
            template: { /*RQ if using multiple templates*/
                templateId: /*RQ*/,
                vars: {
                    /*Opt*/
                },
            },
            hints: { /*Opt*/
                additionalServices: ["email"], /*Opt*/
            }
        });
    });
    </script>

4. Create a wrapper function

Add the following JavaScript to the head element of your page:

    function showGoogleDomainsFlow() { /*Defined function*/
        gapi.load('domains', function() {
            gapi.domains.searchAndBuy({
                ....
            });
        });
    }

5. Invoke the function

Add this button to invoke the function that you created:

    <button onclick="showGoogleDomainsFlow()">Buy a domain </button>

The end result should look like the following:

    <head>
        <script src="https://apis.google.com/js/api.js"></script>
        <script type="javscript">
        function showGoogleDomainsFlow() {
            gapi.load('domains', function() {
                gapi.domains.searchAndBuy({
                    ....
                });
            });
        }
        </script>
        ....
    </head>

    <body>
        ....
        <button onclick="showGoogleDomainsFlow()">Buy a domain</button>
        ....
    </body>