The widget: the simplest and most popular integration
The Magma widget is a floating button that appears on your web pages. On click, it opens the matching form and allows your visitors to be connected with an ambassador in seconds. It's the ideal integration to make Magma accessible across your entire site without deeply modifying your layout.
💡 The widget also works for banners (top and bottom). The installation procedure is identical — only the visual rendering changes based on your campaign configuration in the Magma dashboard.
Prerequisites
- Access to your website's source code (
<head>and<body>tags) - Your
campaignUuidandintegrationUuid(available in section 4 - Integration of your campaign)
Step 1: Add the Magma script
At the end of the <head> tag (just before </head>), add the 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 plan to add more integrations later.
Step 2: Declare your campaign
At the beginning or end of your <body> tag, add the following block:
<script>
window.magma_app = [
{
type: "campaignUuid",
uuid: "xxxx",
integrationUuid: "xxxx",
},
];
</script>Step 3: Replace the identifiers
Replace the "xxxx" placeholders with your actual campaign identifiers:
<script>
window.magma_app = [
{
type: "campaignUuid",
uuid: "YOUR_CAMPAIGN_UUID",
integrationUuid: "YOUR_INTEGRATION_UUID",
},
];
</script>✅ Done! The widget now appears on your page. Your visitors can be connected with your ambassadors in one click.
Configuration options
Disable the automatic popup on arrival
You can add a parameter to prevent the widget from automatically opening when visitors land on the page:
<script>
window.magma_app = [
{
type: "campaignUuid",
uuid: "YOUR_CAMPAIGN_UUID",
integrationUuid: "YOUR_INTEGRATION_UUID",
autoPopup: false,
},
];
</script>Best practices
- Test the display on mobile and desktop after installation
- The widget is non-intrusive: it doesn't impact your page loading speed
- You can customise the widget's appearance from your Magma dashboard (colours, position, hook text)
