Embed the widget at organisation level

One integration for all your campuses

By default, a Magma integration is attached to a campaign. If your organisation has several campuses, you can install the integration at organisation level: the widget then displays the campaigns of all your campuses, without declaring each campaign individually.

Prerequisites

• Access to your website's source code (<head> and <body> tags)
• Your organisation's UUID
• The integrationUuid of each integration you want to install (widget, gallery)

Step 1: Add the Magma script

At the end of the <head> tag (just before </head>), add the initialisation script. It is the same as for a standard integration:

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

Step 2: Declare your organisation

At the beginning or end of your <body> tag, add the following block. Each object in the array corresponds to one integration: here, the widget. Add one entry per integration you want to install.

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

Step 3: Replace the identifiers

Replace the "xxxx" placeholders with your actual identifiers. If you add several entries, the organisation UUID stays the same; only the integrationUuid changes:

<script>
  window.magma_app = [
    { // WIDGET
      type: "organizationUuid",
      uuid: "YOUR_ORGANISATION_UUID",
      integrationUuid: "YOUR_WIDGET_INTEGRATION_UUID",
    },
  ];
</script>

Step 4: Place the gallery on your page (optional)

If you are installing the gallery or the profile cards, place the div wherever you want it to appear on your ambassadors page:

<div id="magma-app_gallery"></div>

OR

<div id="magma-app_block"></div>

Configuration options (for the widget)

Disable the automatic popup on arrival

To prevent the widget from automatically opening when visitors land on the page, add the autoPopup: false parameter:

<script>
  window.magma_app = [
    {
      type: "organizationUuid",
      uuid: "YOUR_ORGANISATION_UUID",
      integrationUuid: "YOUR_WIDGET_INTEGRATION_UUID",
      autoPopup: false,
    },
  ];
</script>

Customise the button text and banner colour

You can customise the widget's appearance directly from the code using the customStyles object. Two parameters are available:

• brandBg: the banner background colour (hex code)
• buttonText: the text displayed on the call-to-action (CTA) button

<script>
  window.magma_app = [
    {
      type: "organizationUuid",
      uuid: "YOUR_ORGANISATION_UUID",
      integrationUuid: "YOUR_WIDGET_INTEGRATION_UUID",
      customStyles: {
        brandBg: '#E395DC',
        buttonText: 'Chat with a student',
      },
    },
  ];
</script>

Best practices

• Test the display on mobile and desktop after installation
• Check that the campaigns of all your campuses appear
• Check your UUIDs: an error in an identifier will prevent the corresponding integration from displaying