Embed Widget Guide

Drop Doungim D&D content into any blog, wiki, Substack post, Reddit-embeddable site, or teaching site. One script tag, one <div> per card. The widget loads a compact iframe view of a spell, monster, magic item, or NPC with a brand bar at the top and an attribution link at the bottom. Doungim is a TTRPG gaming console for D&D and other tabletop role-playing games.

Live demoSee the embed widget in actionWorking HTML example with real spell, monster, magic-item, and NPC cards — both light and dark themes. View the page source to copy the markup.→

Quick start

Add the script tag once, anywhere on the page (the defer attribute keeps it from blocking your render):

<script src="https://www.doungim.com/embed.js" defer></script>

Then drop a div anywhere in your HTML:

<div class="doungim-embed" data-type="spell" data-slug="fireball"></div>

When the page loads, the script scans the DOM for every .doungim-embed element and replaces it with a sized iframe that loads the card.

Supported types

data-type="spell" — slug from /dnd/spells/{slug}
data-type="monster" — slug from /dnd/monsters/{slug}
data-type="magic-item" — slug from /dnd/magic-items/{slug}
data-type="npc" — slug from /dnd/npcs/{slug}

Options

Attribute	Value	Notes
data-type	spell \| monster \| magic-item \| npc	Required.
data-slug	any canonical slug	Required. Same slug as the public page URL.
data-theme	light \| dark	Default light. Pick dark for dark-mode blogs.
data-width	any CSS width	Default 100% of the parent.

Examples

<!-- Spell, dark theme, 400px max -->
<div class="doungim-embed"
     data-type="spell"
     data-slug="counterspell"
     data-theme="dark"
     data-width="400px">
</div>

<!-- Monster -->
<div class="doungim-embed"
     data-type="monster"
     data-slug="ancient-red-dragon">
</div>

<!-- Magic item -->
<div class="doungim-embed"
     data-type="magic-item"
     data-slug="aegis-of-the-forgotten-knight">
</div>

<!-- NPC -->
<div class="doungim-embed"
     data-type="npc"
     data-slug="alexis-human-arms-merchant">
</div>

How the resize works

The iframe's content posts a message with its measured height back to the parent page every time the size changes. The host script listens for that message (origin-checked against https://www.doungim.com) and resizes the iframe to fit. No fixed pixel heights, no scrollbars.

SPA support

If you add embed elements dynamically (e.g. a React route change), call window.DoungimEmbed.mount() after the new DOM is in place to rescan and replace new .doungim-embed elements.

Attribution and SEO

Every embed card includes a Doungim brand bar and an attribution footer that links to the canonical Doungim page. This satisfies the CC-BY-4.0 requirement automatically — no extra credit line needed in your prose, though more is always welcome.

The iframe's outbound link uses a normal href with rel="noopener", so search engines see your page citing Doungim as a source — which is a positive signal for E-E-A-T topics, not a negative one.

Privacy

The widget does not set its own cookies, store anything in localStorage, or fingerprint visitors. The host script and the iframe only exchange a postMessage for resizing — no identifiers. The iframe content does inherit Doungim's site-wide analytics on initial page load (Google Analytics, Meta Pixel), so if you embed in a strict-consent market you may want to wrap the widget behind your own consent gate.