> ## Documentation Index
> Fetch the complete documentation index at: https://docs.nudj.cx/llms.txt
> Use this file to discover all available pages before exploring further.

# Universal Embed Widget

> The cross-platform website embed widget with an admin customisation panel, for any site that isn't running Shopify.

PR #1971 shipped a **universal website embed widget** plus an admin-side customisation panel. This is the recommended embed path for any surface that isn't a Shopify storefront (CMS, custom sites, partner portals).

<Frame caption="Branding & Appearance panel: theme mode, logos, and brand assets configured here.">
  <img src="https://g0cvqggimgcfezpr.public.blob.vercel-storage.com/pr-screenshots/NUDJ-0000-docs-audit-enterprise-1776495079502/admin-branding.png" alt="Organisation branding and appearance settings" />
</Frame>

## What it is

A small embed script you drop into your site. The script finds a placeholder `<div>` and injects a Nudj widget wired to your community. The widget is styled from the [community theme](/enterprise/white-labeling) and respects the embed configuration created in the admin panel.

## Setup

<Steps>
  <Step title="Configure the widget in admin">
    Open the admin panel's embed customisation panel (PR #1971). Choose the widget layout, theme overrides, and the authentication mode — [OIDC SSO](/enterprise/sso-authentication) or [API Link](/enterprise/api-link-user-authentication) token handoff.
  </Step>

  <Step title="Copy the embed snippet">
    The customisation panel surfaces a ready-to-paste snippet. It looks something like:

    ```html theme={null}
    <div id="nudj-widget"></div>
    <script async src="https://your-org.nudj.cx/embed.js"
            data-nudj-community="your-community-id"></script>
    ```
  </Step>

  <Step title="Drop the snippet onto your page">
    Paste the snippet anywhere on the page. The widget renders into the placeholder div on first paint.
  </Step>

  <Step title="Authenticate the user">
    * **OIDC flow** — the user clicks "Sign in" inside the widget and is redirected through your identity provider and back.
    * **API Link flow** — your server issues a Nudj token and your page passes it to the widget (see [API Link](/enterprise/api-link-user-authentication) for the protocol).
  </Step>
</Steps>

## CSP allowlist

PR #2333 opened the Nudj user app's CSP `frame-ancestors` directive so the universal embed can render on arbitrary third-party domains without the browser blocking it. This matters because the widget ships as an iframe under the hood — without the CSP change, every new embedding host would have needed a manual allowlist entry.

## When to pick the universal embed

| Your surface                              | Best fit                                                                                                              |
| ----------------------------------------- | --------------------------------------------------------------------------------------------------------------------- |
| Shopify storefront                        | [Shopify storefront widgets](/enterprise/shopify/storefront-widgets) — richer block catalog, theme editor integration |
| Any other ecommerce / CMS / custom site   | Universal embed widget (this page)                                                                                    |
| Native mobile app                         | [Mobile webview](/enterprise/embedding-integration)                                                                   |
| You host the full user app on your domain | Iframe + CNAME ([white-labeling](/enterprise/white-labeling))                                                         |

## Differences from the Shopify widget

The universal embed and the Shopify theme app extension share the same underlying Nudj user app. What differs:

* **Distribution** — the Shopify widget is a theme app extension merchants add from the theme editor; the universal embed is a script tag you host.
* **Configuration surface** — Shopify widgets are configured per-block in the theme editor; the universal embed is configured once in the admin panel.
* **CSP** — Shopify storefront domains are allowlisted by PR #1638; universal embed uses the wider allowance from PR #2333.

## Next steps

<CardGroup cols={2}>
  <Card title="Embedding modes overview" icon="window" href="/enterprise/embedding-integration">
    Compare all four embedding modes.
  </Card>

  <Card title="Custom domains + theming" icon="palette" href="/enterprise/white-labeling">
    Theme the embedded widget to match your brand.
  </Card>
</CardGroup>

> Last reviewed: 2026-04 · Related PRs: #1971, #2333, #1638