Discord User Widget

Options

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", }, "*")

Source Code

GitHub Repo