This repository contains all the instructions for the widget(s) integration.
- at the end of the
<head>tag (just before</head>) add the following line:
<script
src="https://cdn.jsdelivr.net/gh/magma-app/magma-widget@latest/src/widget/initializer.js"
async
></script>- at the begining of your
<body>tag, add one of the 2 following lines.
If you want to let the candidate choose the campaign he wants to join, you should use the following line
<script>
window.magma_app = [
{
type: "organizationUuid",
uuid: "xxxx",
integrationUuid: "xxxx",
},
];
</script>If you have set only one campaign on your admin dashboard or if you want to directly redirect to a campaign, you should add the following line
<script>
window.magma_app = [
{
type: "campaignUuid",
uuid: "xxxx",
integrationUuid: "xxxx",
},
];
</script>- replace "xxxxx" with the organization uuid or the campaign uuid
To find YOUR organization/campaign uuid and your integration uuid, please refer to the information on you admin dashboard. If you can't find it, please contact us directly to hi@magma.app or chat with us on Magma.
- Sign-in to specific campaign (
type: "campaignUuid")
<script>
window.magma_app = [
{
type: "campaignUuid",
uuid: "YOUR_CAMPAIGN_UUID",
integrationUuid: "YOUR_INTEGRATION_UUID",
},
];
</script>- Let the candidate choose which campaign to sign into (
type: "organizationUuid")
<script>
window.magma_app = [
{
type: "organizationUuid",
uuid: "YOUR_ORGANIZATION_UUID",
integrationUuid: "YOUR_INTEGRATION_UUID",
},
];
</script>- you want to add different multiple widgets on the same page, by doing the following:
<script>
window.magma_app = [
{
type: "campaignUuid",
uuid: "FIRST_CAMPAIGN_UUID",
integrationUuid: "FIRST_INTEGRATION_UUID",
},
{
type: "campaignUuid",
uuid: "SECOND_CAMPAIGN_UUID",
integrationUuid: "SECOND_INTEGRATION_UUID",
},
{
type: "organizationUuid",
uuid: "YOUR_ORGANIZATION_UUID",
integrationUuid: "THIRD_INTEGRATION_UUID",
},
// and so on...
];
</script>- it's done! Now your campaigns are accessible to your website's visitors :)
For embedding the Magma Widget, you'll need to designate a specific area of your webpage. This area is marked by a container element, such as a div, with a specific id attributed to it. Follow the steps below:
- Inside your
<body>HTML tag, where you want the block integration to appear, insert an emptydivelement with theid="magma-widget_block"
<div id="magma-app_block" style="width: 100%; height: 350px;"></div>-
Ensure that this
divis not nested within other elements that might restrict its size or visibility. -
The widget is designed to be responsive, adapting to the size of its container
div. It is recommended to set an appropriate width and height to suit the layout of your page.
Responsiveness: a breakpoint is set at 768px width; the widget UI will adjust for optimal display on mobile devices versus larger screens as follows:
Magma's widget tool is owned and maintained by Magma S.A.S. If you have any problems, you can contact us directly to hi@magma.app or chat with us on Magma.
Ce dépôt contient toutes les instructions pour l'intégration du(des) widget(s).
- À la fin de la balise
<head>(juste avant</head>), ajoutez la ligne suivante :
<script
src="https://cdn.jsdelivr.net/gh/magma-app/magma-widget@latest/src/widget/initializer.js"
async
></script>- Au début de votre balise
<body>, ajoutez l'une des deux lignes suivantes.
Si vous souhaitez laisser le candidat choisir la campagne à laquelle il souhaite participer, utilisez la ligne suivante :
<script>
window.magma_app = [
{
type: "organizationUuid",
uuid: "xxxx",
integrationUuid: "xxxx",
},
];
</script>Si vous avez défini une seule campagne sur votre tableau de bord administrateur ou si vous souhaitez rediriger directement vers une campagne, ajoutez la ligne suivante :
<script>
window.magma_app = [
{
type: "campaignUuid",
uuid: "xxxx",
integrationUuid: "xxxx",
},
];
</script>- Remplacez "xxxxx" par l'UUID de l'organisation ou de la campagne.
Pour trouver votre UUID d'organisation/campagne et votre UUID d'intégration, veuillez vous référer aux informations sur votre tableau de bord administrateur. Si vous ne pouvez pas le trouver, veuillez nous contacter directement à hi@magma.app ou discuter avec nous sur Magma.
- Connectez-vous à une campagne spécifique (
type: "campaignUuid")
<script>
window.magma_app = [
{
type: "campaignUuid",
uuid: "VOTRE_UUID_CAMPAGNE",
integrationUuid: "VOTRE_UUID_INTEGRATION",
},
];
</script>- Laissez le candidat choisir la campagne à laquelle il souhaite s'inscrire (
type: "organizationUuid")
<script>
window.magma_app = [
{
type: "organizationUuid",
uuid: "VOTRE_UUID_ORGANISATION",
integrationUuid: "VOTRE_UUID_INTEGRATION",
},
];
</script>- Si vous souhaitez ajouter plusieurs widgets différents sur la même page, faites ce qui suit :
<script>
window.magma_app = [
{
type: "campaignUuid",
uuid: "PREMIER_UUID_CAMPAGNE",
integrationUuid: "PREMIER_UUID_INTEGRATION",
},
{
type: "campaignUuid",
uuid: "DEUXIEME_UUID_CAMPAGNE",
integrationUuid: "DEUXIEME_UUID_INTEGRATION",
},
{
type: "organizationUuid",
uuid: "VOTRE_UUID_ORGANISATION",
integrationUuid: "TROISIEME_UUID_INTEGRATION",
},
// et ainsi de suite...
];
</script>- C'est fait ! Maintenant, vos campagnes sont accessibles aux visiteurs de votre site web :)
Pour intégrer le Widget Magma, vous devrez désigner une zone spécifique de votre page Web. Cette zone est marquée par un élément conteneur, tel qu'une balise div, avec un id spécifique qui lui est attribué. Suivez les étapes ci-dessous :
- À l'intérieur de votre balise
<body>HTML, où vous souhaitez que l'intégration en bloc apparaisse, insérez un élémentdivvide avec l'id="magma-widget_block"
<div id="magma-app_block" style="width: 100%; height: 350px;"></div>-
Assurez-vous que ce
divn'est pas imbriqué dans d'autres éléments qui pourraient restreindre sa taille ou sa visibilité. -
Le widget est conçu pour être réactif, s'adaptant à la taille de son conteneur
div. Il est recommandé de définir une largeur et une hauteur appropriées pour s'adapter à la mise en page de votre page.
Réactivité : un point de rupture est défini à une largeur de 768 pixels ; l'interface utilisateur du widget s'ajustera pour un affichage optimal sur les appareils mobiles par rapport aux écrans plus grands comme suit :
L'outil de widget de Magma est détenu et maintenu par Magma S.A.S. Si vous rencontrez des problèmes, vous pouvez nous contacter directement à hi@magma.app ou discuter avec nous sur Magma.