Discord User Widget

User ID

Options

Dark Theme

Show Banner

Show Full Banner

Rounded Corners

Show Discord Icon

Show Badges

Guess whether user has Nitro (for Nitro badge)

Background Colour

Foreground Colour

Preview

HTML

<iframe
    title="Discord user embed"
    width="340"
    height="120"
    frameborder="0"
    sandbox="allow-scripts"
    src=""
></iframe>

postMessage() API

The widget supports some commands via window.postMessage() (Docs on mdn)

To use them, you first need to allow the iframe to execute javascript via sandbox="allow-scripts" (this is already the default if you copied the iframe code from above)

The snippets below assume widget is a variable holding the iframe element.
You can for example do this via const widget = document.querySelector('iframe[title="Discord user embed"]')

Change Theme

Theme: light | dark

widget.contentWindow.postMessage({
    command: "setTheme",
    theme: "dark"
}, "*")

Change Colours

Change the background and/or foreground colour

widget.contentWindow.postMessage({
    command: "setColors",
    backgroundColor: "#000000",
    foregroundColor: "#ffffff",
}, "*")