Ouvrir un module de la Plateforme Broadsign dans une Iframe

L'utilisation de la Plateforme Broadsign en tant que produit autonome est la méthode par défaut et la plus appropriée. Cependant, il est possible d'intégrer un ou plusieurs modules de la Plateforme dans une iframe pour des intégrations personnalisées dans d'autres outils.

Une iframe (abréviation de inline frame) est un élément HTML utilisé pour intégrer un autre document HTML (ou une page web) à l'intérieur du document actuel. Voyez cela comme la création d'une fenêtre de navigation séparée et autonome à l'intérieur de votre page web principale.

Une iframe crée un contexte de navigation imbriqué indépendant. Cela signifie que le contenu chargé à l'intérieur de l'iframe est essentiellement un document distinct du document principal (parent), possédant son propre :

  • Historique de session
  • Document Object Model (DOM)
  • Styles CSS
  • Environnement JavaScript

Pour plus d'informations sur la création et l'utilisation des iframes, reportez-vous à la page Inline Frame element.

Modules de la Plateforme pris en charge dans une iframe

Vous pouvez utiliser les modules et outils suivants de la Plateforme Broadsign dans une iframe :

Module/Outil URL
Guaranteed Campaigns https://app.broadsign.com/campaigns
Gestion des contenus créatifs https://app.broadsign.com/creative-management/bundle-editor
Outil de création de campagne https://app.broadsign.com/campaigns/create
Liste des lignes de diffusion https://app.broadsign.com/campaigns/line-items

Note : Certaines différences d'interface peuvent être visibles lors de l'utilisation d'un module de la Plateforme Broadsign dans une iframe.

Utilisez l'option de connexion par fenêtre contextuelle lors de l'intégration de modules de la Plateforme Broadsign dans une iframe. Cette méthode est le choix par défaut et le plus sûr, ne nécessitant aucune configuration supplémentaire.

Pour utiliser la connexion par fenêtre contextuelle :

  1. Créez une iframe et intégrez-y l'URL du module de la Plateforme que vous souhaitez utiliser.

    2. Pour plus d'informations, consulter Qu'est-ce qu'une iframe ?.

    Par exemple, l'URL du module Guaranteed Campaigns est : https://app.broadsign.com/campaigns.

    Consultez Modules de la Plateforme Broadsign pris en charge dans une iframe pour obtenir une liste d'URL.

  2. Ouvrez l'iframe et cliquez sur le lien du module de la Plateforme que vous avez intégré.

    3. Lors de la première ouverture du module, l'iframe affiche une page de connexion.

  3. Cliquez sur le bouton Login.

    4. La fenêtre de connexion Broadsign s'ouvre.

  4. Saisissez vos identifiants.

    5. Une fois la connexion validée, vous êtes redirigé vers la page demandée.

Si vous ne pouvez pas utiliser l'option de fenêtre contextuelle par défaut pour ouvrir un module de la Plateforme Broadsign dans une iframe, Broadsign propose une méthode alternative utilisant une clé API de la Plateforme Broadsign ou un jeton Salesforce.

Vous devrez ajouter un paramètre de requête dans l'URL du module de la Plateforme pour qu'il puisse s'identifier : iframe-login-token.

Pour utiliser une clé API de la Plateforme ou un jeton Salesforce :

  1. Créez une clé API de la Plateforme comme décrit dans Créer une clé d'API.

    2. Avertissement : Une fois générée, la clé API n'est visible qu'une seule fois; veillez donc à la copier ou à la noter avant de fermer cette fenêtre.

  2. Envoyez une requête à l'API Utilisateur avec la clé API de la Plateforme que vous avez créée ou votre jeton Salesforce.

    3. L'API renvoie le paramètre iframe-login-token.

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

    Note : Le jeton iframe-login-token est valide pendant 12 heures.

  3. Créez une iframe et intégrez-y l'URL du module de la Plateforme que vous souhaitez utiliser. Ajoutez le jeton généré à l'URL du module de la Plateforme Broadsign.

    4. Pour plus d'informations, consulter Qu'est-ce qu'une iframe ?.

    Par exemple, utilisez l'URL suivante pour ouvrir le module Guaranteed Campaigns :

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

    Voir Modules de la Plateforme Broadsign pris en charge dans une iframe pour obtenir la liste des URLs.

    Une fois la connexion validée, vous êtes redirigé vers la page demandée.

Voici un exemple vous permettant d'ouvrir le module Guaranteed Campaigns et l'outil de gestion de contenu créatif à l'intérieur d'une iframe :

Copier 
<!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>