Multiple integrations on one page

Why display multiple integrations on the same page?

Some pages on your website target varied profiles. A programme overview page, for example, might target Bachelor, Master and work-study candidates simultaneously. Rather than redirecting each visitor to a different page, Magma lets you display multiple campaigns on a single page.

Each campaign can correspond to a different programme, course or profile type. The visitor interacts with the integration that matches their needs, directly from your site.

💡 Typical use cases: a "Our programmes" page with a matching widget per programme, an event landing page with multiple referral campaigns, or a homepage with matching + review collection.

Prerequisites

Before starting, make sure you have:

Access to your website's source code (or your CMS)
Created the relevant campaigns in your Magma dashboard
The campaignUuid and integrationUuid for each campaign (available in section 4 - Integration of each campaign)

Step 1: Add the Magma script

At the end of the <head> tag (just before </head>), add the Magma initialisation script:

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

⚠️ This script should only be added once per page, even if you display multiple integrations. It loads the Magma engine and manages the display of all your campaigns.

Step 2: Declare your campaigns

At the beginning or end of your <body> tag, add a <script> block containing your campaigns list. The window.magma_app array accepts as many entries as needed.

For 2 integrations:

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

The principle is simple: each object in the array corresponds to one campaign. Add as many as needed following the same format.

Best practices

Test on different devices: check that multiple widgets display correctly on both mobile and desktop.
Don't overload the page: beyond 3–4 simultaneously visible integrations, user experience may degrade. Prefer a targeted approach.
Mix integration types: you can combine a matching widget with a referral banner on the same page to address different objectives.
Check your UUIDs: an error in a campaignUuid or integrationUuid will prevent that integration from displaying, without blocking the others.