Login
    Contents x
    Build an app to display content in the Gong email composer
    • 4 minute read
    • Contributors
    • Dark
      Light
    Contents

    Build an app to display content in the Gong email composer

    • 4 minute read
    • Contributors
    • Dark
      Light
    Article summary

    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.

    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. 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 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: 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

    npm i @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

    <!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 integration_icon.jpg and selecting your integration. Gong opens an iFrame with the URL you supplied when creating the application. 

    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

    Was this article helpful?
    What's Next
    Change password!
    Changing your password will log you out immediately. Use the new password to log back in.
    Change profile
    Success!
    First name must have atleast 2 characters. Numbers and special characters are not allowed.
    Last name must have atleast 1 characters. Numbers and special characters are not allowed.
    Enter a valid email
    Enter a valid password
    Your profile has been successfully updated.
    Logout
    ESC

    Eddy AI, a genAI helper, will scrub our help center to give you an answer that summarizes our content. Ask a question in plain language and let me do the rest.