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.
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>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>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>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: "campaignUuid",
uuid: "YOUR_CAMPAIGN_UUID",
integrationUuid: "YOUR_INTEGRATION_UUID",
customStyles: {
brandBg: '#E395DC',
buttonText: 'Chat with a student',
},
},
];
</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)
