---
title: "Build an app to display content in the Gong email composer"
slug: "build-an-app-to-display-content-in-the-gong-email-composer"
updated: 2025-07-28T16:57:37Z
published: 2025-07-28T16:57:37Z
canonical: "help.gong.io/build-an-app-to-display-content-in-the-gong-email-composer"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://help.gong.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Build an app to display content in the Gong email composer

The Gong frontend integration allows you to display your HTML content in an iFrame in Gong. To set up this application complete the following steps:

1. Ensure you have credentials to log into your Gong Sandbox
2. Submit details of the integration as described in [Create an app for Gong](/v1/docs/create-an-app-for-gong).
3. Create your app and test it.
4. Update your integration details in Gong if needed.
5. Publish the app in the Gong Collective. Your customers can then install the app on their instance of Gong, and their reps can then embed your HTML content to their emails.

## Terminology

1. Partner: a web application that would like to integrate with Gong
2. Gong user: user with credentials both in Gong and the partner’s system.
3. Gong administrator: Gong user who can set up integrations in Gong
4. Gong Public JavaScript Frontend SDK: Javascript SDK that will be published by Gong and used by the Partner application

## Set up your Gong integration

Provide Gong with information on the integration. Fill in the form as described in [Create an app for Gong](https://help.gong.io/hc/en-us/articles/13944551222157-Create-an-app-for-Gong). To create a frontend integration set the following:

1. Label and image for the button that activates the integration in the composer
2. Domains: the registered domain for the partner application. All origins configured later (here and in the tenant sub domains section) must be under this domain otherwise they will be rejected. Example: partner.com, partner-integration.com
3. iframe Integration: set the toggle to on
4. Check the Email composer checkbox and provide the URL that Gong should use to launch the iframe
5. Allowed origins: a list of https origins that can be loaded inside the iframe. Any other origin will be rejected by Gong. Examples: https://recorder.partner.com, https://recorder.partner.com, https://login.partner-integration.com
  - The wildcard * origin is not allowed
  - 3rd party origins are not allowed
6. If you need to register tenant sub domains, [set up OAuth access](https://help.gong.io/hc/en-us/articles/13944551222157-Create-an-app-for-Gong) and save the `api_base_url_for_customer` string you received when calling the `generate-customer-token` endpoint so that you can provide it when calling the init function.
7. [Publish your app](https://help.gong.io/hc/en-us/articles/4423917279373-Publish-your-app): This uploads your app to the Gong Collective and customers wwill be able to install the app. This step should be done when you've tested your app and it is ready to be used.

## Create your Gong email composer app

Create a web application that will run inside an iframe in the Gong application.

Note: The iframe runs in sandbox mode so the following actions are allowed:

- allow-forms
- allow-scripts
- allow-same-origin
- allow-popups

### Install the Gong SDK in your app

In your app, run

```plaintext
import { init, GongFrontendApi } from "@gong.io/frontend-sdk";
```

### Building the app

The app should be set up as follows:

1. When the iFrame is activated, the Partner page can authenticate the user. The iframe sandbox includes:
  - `allow-popups` token so that the iframe can open a new window
  - `allow-same-origin` token so that the iframe can access cookies for the partner domain
2. The app should run the following functions in order to display data in the email composer:
  1. When ready, call the `ready()` function to notify it loaded successfully
  2. Call the `close()` function to close the iframe without embedding content (e.g. the user canceled)
  3. Call the `closeWithContent()` function, passing the HTML content as string to display the content in the Email composer.
3. Once the Partner page sends back content, the iframe closes. Gong sanitizes the content and embeds it in the email draft.

## Example

```plaintext
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>gong frontend partner sdk example</title>
  </head>
  <body>
    <div>
      <h1>Gong frontend partner sdk example</h1>
      <p>Example of how to use Gong Partner SDK to interact with Gong</p>
      <div class="card">
      <textarea style="width:200px;height:50px" id="textArea">
        <div><p>partner generated content</p></div>
      </textarea>

      <button id="button" onclick="embedContentAndClose()">embed content and close
      </button>
    </div>
  </div>

<script>
  import {
    init,
    GongFontendApi,
  } from "gong-partner-sdk/dist/collective-api";

// STEP1: initialize the Gong Partner SDK passing down reference to the gongWindow
const api = init({
  gongWindow: window.parent,
  });

// STEP2: Call ready method to let Gong know that the app is ready to interact with it
  api
    .ready()
    .then(() => {
       console.log("Gong is ready to interact with the app!");
    })

    .catch((error) => {
    console.error(
    "Gong partner SDK should run inside of Gong application",
    error
    );
  });

// STEP3 (optional): use closeWithContent method to send a message to Gong
function embedContentAndClose() {
  const htmlContent = 
    document.querySelector < HTMLButtonElement > "#textArea".innerText; 
  api.closeWithContent({ html: htmlContent });
}
  </script>
  </body>
</html>
```

### Registering tenant sub domains

If you need to load a different sub domain for each tenant (e.g. acme.partner.com), you can register multiple sub domains per tenant:

1. Make sure OAuth access is set up.
2. The OAuth flow is launched when the integration is activated.
3. Use the access token received when running the generate-customer-token endpoint to call the /integration-settings endpoint to register sub-domains.

## Test the app in your sandbox account

Log in as tech admin to your Gong sandbox account and add the integration.

## Adding data to the email composer

Once you have published the integration, if a Gong user is writing an email via the Gong email composer, they can include your suggested content in the email by clicking the **Integrations** icon ![Icon to display available integrations](https://cdn.us.document360.io/2837c190-3ec8-4120-9116-6d427e774667/Images/Documentation/integration_icon.jpg) and selecting your integration. Gong opens an iFrame with the URL you supplied when creating the application.

![](https://cdn.us.document360.io/2837c190-3ec8-4120-9116-6d427e774667/Images/Documentation/emailComposer.png)

## Troubleshooting: Why my data isn’t displaying

If your data is not being added to the email composer, check the following:

1. The iFrame loads content from origins configured in Gong. 3rd party domains are blocked.
  1. To use a 3rd party domain for authentication it should be opened in a new window.
  2. Dynamic domains (e.g. https://customer.partner.com) must be registered using the Gong Public API. If they are not registered, the domain will be blocked.
2. The HTML content is sanitized. This includes removing any javascript content.
3. The email composer accepts only a subset of HTML elements and has some further restrictions on styling. The content will be sanitized to remove any javascript and elements that are not allowed.

The allowed elements are (this can change in the future): a, br, div, em, hr, img, li, ol, s, span, strong, u, ul