Live Demo

Doungim Embed Widget

This page is a working, copy-pasteable example of the Doungim D&D embed widget. Every card below is a real iframe loaded from doungim.com via a single <div>. View the page source to see exactly how each one is wired up.

← Back to the Embed Widget Guide

How it works

Add the script tag once. Then drop a <div class="doungim-embed"> with data-type and data-slug wherever you want a card.

<script src="https://www.doungim.com/embed.js" defer></script>
<div class="doungim-embed" data-type="spell" data-slug="fireball"></div>

Spell data-type="spell"

Slug matches the URL at /dnd/spells/{slug}.

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

Monster data-type="monster"

Slug matches the URL at /dnd/monsters/{slug}.

<div class="doungim-embed" data-type="monster" data-slug="goblin"></div>
<div class="doungim-embed" data-type="monster" data-slug="ancient-red-dragon" data-theme="dark"></div>

Magic Item data-type="magic-item"

Slug matches the URL at /dnd/magic-items/{slug}.

<div class="doungim-embed" data-type="magic-item" data-slug="aegis-of-the-forgotten-knight"></div>
<div class="doungim-embed" data-type="magic-item" data-slug="amulet-of-the-blind-god" data-theme="dark"></div>

NPC data-type="npc"

Slug matches the URL at /dnd/npcs/{slug}.

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

Constrained width data-width

Pass any CSS width to constrain the card. Useful inside narrow article layouts.

<div class="doungim-embed" data-type="spell" data-slug="healing-word" data-width="400px"></div>