Embed profile cards

Display your ambassadors directly on your site

The "Block" integration (profile cards) allows you to display your ambassador profiles in a specific area of your web page. Unlike the widget or banner, the block integrates into the flow of your content: your visitors see the available ambassadors even before launching the matching.

💡 This integration is ideal for "Meet our students" or "Our ambassadors" pages, where you want to concretely show who is available for a conversation.

Prerequisites

Access to your website's source code
Your campaignUuid and integrationUuid
An identified location in your page for the block

Step 1: Add the Magma script

At the end of the <head> tag (just before </head>):

<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:

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

Step 3: Replace the identifiers

<script>
  window.magma_app = [
    {
      type: "campaignUuid",
      uuid: "YOUR_CAMPAIGN_UUID",
      integrationUuid: "YOUR_INTEGRATION_UUID",
    },
  ];
</script>

Step 4: Define the display area

This is the step specific to the Block integration. Place the following div at the exact location on your page where you want the profile cards to appear:

<div id="magma-app_block" style="width: 100%; height: 350px;"></div>

⚠️ Make sure this div is not nested inside elements that restrict its size or visibility. Adjust the width and height to match your site's layout.