Open a Broadsign Platform Module in an Iframe

Using the Broadsign Platform as a standalone product is the default and best way to use it. However, it is possible to integrate one or more Platform modules in an iframe for custom integrations in other tools.

An iframe (short for inline frame) is an HTML element used to embed another HTML document (or web page) within the current document. Think of it as creating a separate, self-contained browsing window inside your main web page.

An iframe creates an independent nested browsing context. This means the content loaded inside the iframe is essentially a separate document from the main (parent) document, having its own:

  • Session history
  • Document Object Model (DOM)
  • CSS styles
  • JavaScript environment

For more information on how to create and work with iframes, refer to the Inline Frame element page.

Supported Platform Modules in an iframe

You can use the following Broadsign Platform modules and tools in an iframe:

Module/Tool URL
Guaranteed Campaigns https://app.broadsign.com/campaigns
Creative Management https://app.broadsign.com/creative-management/bundle-editor
Campaign Builder https://app.broadsign.com/campaigns/create

Note: Some interface differences might be visible while using a Broadsign Platform module in an iframe.

Use the pop-up login option when embedding Broadsign Platform modules within an iframe. This method is the default and safer choice, requiring no additional configuration.

To use pop-up login:

  1. Create an iframe and embed the Platform module URL that you want to use inside it.

    2. For more information, see What is an Iframe?

    For instance, the URL for the Guaranteed Campaigns module is: https://app.broadsign.com/campaigns.

    See What Broadsign Platform Modules and Tools Can be Used in an Iframe? for a list of URLs.

  2. Open the iframe and click the Platform module link that you have embedded.

    3. When opening the module for the first time, the iframe displays a login page.

  3. Click the Login button.

    4. The Broadsign Login window opens.

  4. Enter your credentials.

    5. Once the login is validated, you are redirected to the requested page.

If you cannot use the default pop-up option to open a Broadsign Platform module in an iframe, Broadsign offers an alternate way by using a Broadsign Platform API Key or a Salesforce token.

You will need to add a query parameter in the Platform module URL to identify itself: iframe-login-token.

To use a Platform API Key or Salesforce token:

  1. Create a Platform API key as described in Create an API Key.

    2. Warning: The API key is generated and visible only once, so make sure to copy or write it down before closing this window.

  2. Send a request to the User API with the Platform API Key that you have created or your Salesforce token.

    3. The API returns the iframe-login-token parameter.

    Copy 
    POST https://api.users.broadsign.com/iframe-login
    Request
    {
      "ApiKey": "{PLATFORM_API_KEY or SALESFORCE_TOKEN}"
    }
    Response
    {
      "token": "{IFRAME_LOGIN_TOKEN}"
    }

    Note: The iframe-login-token is valid for 12 hours.

  3. Create an iframe and embed the Platform module URL that you want to use inside it. Add the generated token to the Broadsign Platform module URL.

    4. For more information, see What is an Iframe?

    For example, use the following URL to open the Guaranteed Campaigns module:

    https://app.broadsign.com/campaigns?iframe-login-token=[token]

    See What Broadsign Platform Modules and Tools Can be Used in an Iframe? for a list of URLs.

    Once the login is validated, you are redirected to the requested page.

The following is an example that allows you to open the Guaranteed Campaigns module and Creative Management tool within an iframe:

Copy 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Platform iframe Pop Up Example</title>
</head>
<style>
    iframe {
        width: 100%;
        height: 90vh;
        border: none;
    }
    .menu {
        display: flex;
        justify-content: center;
        gap: 20px;
        margin: 20px;
    }
</style>
<body>
    <div class="menu">
        <button onclick="document.getElementById('inlineFrameExample').src='https://app.broadsign.com/campaigns'">
            Load Guaranteed campaigns</button>
        <button
            onclick="document.getElementById('inlineFrameExample').src='https://app.broadsign.com/creative-management/bundle-editor'">
            Load Bundle Editor</button>
    </div>
    <iframe class="iframe" id="inlineFrameExample" title="Inline Frame Example"
        src="https://app.broadsign.com/campaigns">
    </iframe>    
</body>
</html>