SOURCE_URL: https://majikah.solutions/products/majik-universal-id/docs/muid-embed

---
title: "Embedding Your Majik Universal ID on Your Website"
id: "muid-embed"
group: "majik-universal-id"
type: "products"
version: "0.0.1"
lastUpdated: "2026-04-20T00:00:00.000Z"
difficulty: "Beginner"
time: "5–10 minutes"
tags: [embed, iframe, widget, website, integration, muid, identity, verification, public-profile, signature]
---

# Embedding Your Majik Universal ID on Your Website

> How to generate your MUID embed code and add a live signature verification widget to any website

## Overview
Add a live Majik Universal ID verification widget to any website or platform. Visitors can drop a file directly onto the widget to verify signatures against your identity — no account required, no file ever leaves their browser.

### What Is the MUID Embed?

The Majik Universal ID embed is a self-contained iframe widget that displays your public identity — your display name, verification tier, and bound signing keys — alongside a live drag-and-drop file verification zone. Anyone visiting a page where the widget is installed can drop a signed file onto it to instantly verify whether the file was signed by your Majik Key. The verification runs entirely in the visitor's browser using your published Ed25519 and ML-DSA-87 public keys. No file data is ever sent to any server.

> **NOTE:** You need an active Majik Universal ID to generate an embed. If you have not created one yet, see How to Create a Majik Universal ID first.

### Step 1 — Generate Your Embed Code

1. **Open the Embed Generator**
   *id.majikah.solutions/id → Embed tab*
   - Log in and navigate to id.majikah.solutions/id.
   - In the Universal ID panel toolbar, click the Embed button to open the embed generator side panel.
   - Alternatively, visit the embed generator directly at id.majikah.solutions/id/embed.

2. **Configure the Widget**
   *Adjust appearance to match your site*
   - Your MUID Key is pre-filled automatically. If you are generating an embed for a different identity, paste its MUID key into the field (format: muid_xxxxxxxxxxxxxxxx).
   - Choose a Theme: Light, Dark, or Auto (follows the visitor's system preference).
   - Pick an Accent color to match your brand. This tints the interactive elements inside the widget.
   - Adjust the Corner radius slider (0–32 px) to match your site's design language — square corners for minimal sites, rounded for softer aesthetics.
   - Toggle Show footer to show or hide the 'Verified by Majikah' attribution bar at the bottom.
   - Toggle Show Public Key to show or hide the truncated public key string below your display name.

3. **Preview the Widget**
   *See changes in real time*
   - The Live Preview panel on the right updates instantly as you change any setting.
   - The preview renders the actual embed iframe — what you see is exactly what your visitors will see.
   - Click Open embed ↗ in the configuration panel header to open the embed URL directly in a new tab.

4. **Copy the Embed Code**
   *Get the HTML snippet*
   - Click Copy code in the Embed Code section at the bottom.
   - The copied snippet includes a self-sizing <iframe> and a small inline <script> that automatically adjusts the iframe height as the widget content changes.
   - The code is ready to paste — no build step, no npm package, no dependencies.


### Step 2 — Add the Widget to Your Site

1. **Plain HTML or Static Site**
   *Paste directly into any HTML page*
   - Open your HTML file and paste the copied snippet wherever you want the widget to appear — inside a <div>, in a sidebar, or in a footer section.
   - No additional scripts or stylesheets are required. The widget is fully self-contained.
   - Example placement: <div class="about-sidebar">[paste here]</div>

2. **WordPress**
   *Use a Custom HTML block*
   - In the WordPress block editor, add a Custom HTML block to the page or post where you want the widget.
   - Paste the embed snippet into the block.
   - Click Preview to confirm it renders, then publish or update.
   - For sidebars or footers, go to Appearance → Widgets, add a Custom HTML widget, and paste the snippet.

3. **Notion, Webflow, Framer, or Similar Builders**
   *Use the platform's embed or code block*
   - Notion: Use the /Embed block and paste the embed URL (from the Open embed ↗ link) rather than the full HTML snippet, as Notion does not support inline script tags.
   - Webflow: Add an Embed element from the Add panel, paste the full HTML snippet, then save and publish.
   - Framer: Insert a Code component and paste the snippet, or use the Embed component with the iframe URL directly.
   - For platforms that strip <script> tags, the widget will still display and verify files correctly — the script is only needed for automatic height adjustment. You can set a fixed height on the iframe as a fallback (recommended: 450px).

4. **React or Next.js**
   *Use dangerouslySetInnerHTML or an iframe directly*
   - The simplest approach is to render the iframe directly, pulling the embed URL from the generator:
   - <iframe src="https://embed.majikah.solutions/muid/{muidKey}?theme=system&accent=%23ea7f05&radius=16&footer=true&id=true" width="460" style={{'{{'} border: 'none', borderRadius: 16 {'}'}} title="Majikah signature verifier" />
   - For automatic height resizing, add a useEffect that listens for window.addEventListener('message', ...) events with type === 'majikah-embed-resize' and updates the iframe's height accordingly.
   - Avoid wrapping the raw HTML snippet in dangerouslySetInnerHTML on a component that re-renders frequently, as this remounts the iframe on every render.


### Embed URL Parameters

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| theme | light | dark | system | system | Color theme of the widget. 'system' follows the visitor's OS preference. |
| accent | hex color (URL-encoded) | #ea7f05 | Accent color for interactive elements. Encode # as %23. |
| radius | number (0–32) | 16 | Border radius of the widget card in pixels. |
| footer | true | false | true | Show or hide the 'Verified by Majikah' footer bar. |
| id | true | false | true | Show or hide the truncated public key below the display name. |

*Caption: All parameters supported by the embed URL*

### Example Embed URL

```plaintext
https://embed.majikah.solutions/muid/muid_abc123xyz?theme=dark&accent=%23ea7f05&radius=16&footer=true&id=true
```

### Example Embed Snippet

```html
<!-- Majikah Signature Verifier -->
<iframe
  id="majikah-embed-muid_abc1"
  src="https://embed.majikah.solutions/muid/muid_abc123xyz?theme=system&accent=%23ea7f05&radius=16&footer=true&id=true"
  width="460"
  style="border:none;border-radius:16px;display:block;"
  title="Majikah signature verifier"
  allow="clipboard-read; clipboard-write"
></iframe>
<script>
  window.addEventListener("message", (e) => {
    if (e.data?.type !== "majikah-embed-resize") return;
    const el = document.getElementById("majikah-embed-muid_abc1");
    if (el) el.style.height = e.data.height + "px";
  });
</script>
```

### Automatic Height Resizing

The embed widget posts a majikah-embed-resize message to its parent window whenever its content height changes — for example, when a visitor drops a file and the verification result panel appears. The inline &lt;script&gt; in the embed snippet listens for this message and adjusts the iframe height automatically, preventing scrollbars or clipped content. If your platform strips script tags, set a fixed height of at least 450px on the iframe to ensure the result panel is not cut off.

### Content Security Policy

> ⚠️ **WARNING:** If your site uses a Content Security Policy (CSP), you must allow embed.majikah.solutions as a valid frame-src. Add frame-src https://embed.majikah.solutions to your CSP header, otherwise the browser will block the iframe from loading. For the resize script to work, you also need script-src 'unsafe-inline' or a nonce-based allowance for the inline script.

### Privacy & Security

The embed widget never sends visitor-uploaded files to any server. All signature verification is performed locally in the visitor's browser using your published Ed25519 and ML-DSA-87 public keys. The widget only loads your public MUID profile data — display name, verification tier, and public keys. No private information is ever exposed through the embed.

> **NOTE:** Once your widget is live, share your profile link alongside it so visitors can also view your full public ID page. See Sharing Your Majik Universal ID for how to copy and distribute your public profile URL.