Embed the top banner

The top banner: capture attention from the very first moment

The top banner is a horizontal strip displayed at the top of your web page. It's the first element your visitors see and is an excellent way to offer matching as soon as they land on your site. Ideal for homepages and event landing pages.

💡 The banner installation procedure is identical to the widget. It's the integration type chosen in your Magma campaign that determines the visual rendering.

Prerequisites

Access to your website's source code
Your campaignUuid and integrationUuid (section 4 - Integration of your campaign)

Step 1: Add the Magma script

At the end of the <head> tag (just before </head>):

<script src="https://cdn.jsdelivr.net/gh/magma-app/magma-widget@latest/src/widget/initializer.js" async></script>

Step 2: Declare your campaign

At the beginning or end of your <body> tag:

<script>
  window.magma_app = [
    {
      type: "campaignUuid",
      uuid: "xxxx",
      integrationUuid: "xxxx",
    },
  ];
</script>

Step 3: Replace the identifiers

<script>
  window.magma_app = [
    {
      type: "campaignUuid",
      uuid: "YOUR_CAMPAIGN_UUID",
      integrationUuid: "YOUR_INTEGRATION_UUID",
    },
  ];
</script>