Embed Docs

Developer docs

Embed

A complete, Vortex-styled chat for your site in one iframe. People sign in with Vortex in a popup, and you control the look from your dashboard without touching code.

No backend No client secret 40+ style options

Add it to your page

  1. In your guild dashboard, set the integration type to Embed and make sure your site is allowed under Where it works (see Site access).
  2. Paste the iframe where you want the chat to appear:
<iframe
  src="%ORIGIN%/embed/vtx_your_client_id"
  title="Chat"
  referrerpolicy="no-referrer-when-downgrade"
  allow="clipboard-write"
  style="width: 100%; height: 600px; border: 0; border-radius: 12px"
></iframe>

Or, use a direct link:

%ORIGIN%/embed/vtx_your_client_id

That's it. The embed loads your channels, shows a sign-in screen to new visitors and connects live once they sign in.

How the embed knows which site it's on

Vortex only shows your chat on sites you allow, so it needs to know which page the iframe is on. Browsers tell it automatically through the referrer, the address of the page that loaded the iframe. In most cases you don't need to add anything to the URL.

Your Where it works setting What Vortex needs What you do
Any website Nothing Nothing. Paste the iframe.
Domains or Server IPs Your site's domain Nothing. Browsers always send the domain.
Site tag The exact page, so it can look for the tag Keep referrerpolicy="no-referrer-when-downgrade" on the iframe. Without it, browsers only send the domain and Vortex looks for the tag on your homepage instead.

If your site hides referrers

The referrerpolicy attribute on the iframe overrides your site's own Referrer-Policy, so keep it in the snippet and the browser sends the page address even on sites that normally hide it.

If something still strips it, like a privacy extension, Vortex can't tell where the chat is. It then only appears on sites written out in your Domains list, so add any domain you rely on there.

Vortex only trusts what the browser itself reports, which websites can't fake. There's no URL setting for the page address, so nobody can claim to be your site through the URL. The site tag itself can still be copied onto another site, though. See Site access for when to use Domains or Server IPs instead.

Sizing

  • The embed fills its iframe. Give the iframe a height; 500 to 700px works well on desktop.
  • Below 520px wide, the channel list turns into a dropdown in the header.
  • For a full-height chat, use height: 100vh or put the iframe in a flex container with flex: 1.

Signing in

Visitors see your login screen (title, message and button text are all customizable). The button opens a centered Vortex window where they confirm the guild and the site they're on. The first time someone signs in, they join your guild with its default role.

  • Sessions are stored by the embed itself and refresh automatically. Visitors stay signed in for up to 30 days of inactivity.
  • The sign-in window opens on the same Vortex domain the embed was loaded from, so people already signed in there don't have to sign in again.
  • The embed's account menu has a Log out button.
  • If popups are blocked, the embed asks the visitor to allow them.
  • Browsers that block third-party storage keep the session per site, so signing in on one site doesn't sign people in on another.

Styling

Open your guild dashboard and go to Embed Style. Pick a preset (Vortex, Midnight, Light, Glass or Terminal), then fine-tune anything. The live preview updates as you edit, and you can switch it between mobile and desktop. Changes apply to every page using your embed as soon as you save.

Empty options fall back to your guild's settings: the title uses your guild name, the accent uses your theme color, and the logo is always your guild icon.

Every style option

Loading options...

Listening to events

The embed posts messages to your page so you can react to what happens inside it, for example to show an unread badge on a chat button.

window.addEventListener("message", (event) => {
  if (event.origin !== "%ORIGIN%") return;
  const { type, ...data } = event.data || {};

  if (type === "vortex:message" && data.mention) {
    showBadge();
  }
});
Event Data When
vortex:ready None The embed has loaded.
vortex:login username Someone signed in, or a saved session was restored.
vortex:logout None The visitor logged out or their session ended.
vortex:channel channelId, name The visitor switched channels.
vortex:message channelId, mention A new message arrived in another channel, or while the embed isn't focused. mention is true if it pings the visitor.

Always check event.origin. Event data never includes message content, only what's needed for notifications.

Moderation and reports

  • People with moderator roles in your guild see extra options on each message: Delete, and Moderate to time someone out or ban them. Manage members, roles and the ban list from the Moderation section of your guild dashboard.
  • Everything sent from the embed appears in your guild and follows its permissions, slowmode, bans and profanity filter.
  • Visitors can report any message from its hover menu. Reports go to Vortex staff. You are still expected to moderate your guild to maintain the Vortex community guidelines.
  • The footer has a small Report link so visitors can report the guild itself.
  • Links in messages are shown as plain text and can't be clicked.

Using it in a web proxy

If your visitors browse through a web proxy like Scramjet, give them the chat URL. They paste it into the proxy like any other site, and the chat opens as a full page.

%ORIGIN%/embed/vtx_your_client_id
  • There's nothing to set up. The chat isn't inside another site, so your Where it works setting doesn't apply.
  • If %HOST% is blocked on a network, any other Vortex domain works the same way: swap the domain and keep /embed/vtx_your_client_id.
  • Signing in opens a small window. If the proxy blocks popups, the chat tells visitors to allow them.
  • You can copy it from Your embed URL in the Setup section of your dashboard.

Troubleshooting

"This site can't show this chat yet"

The page isn't allowed. Open Where it works → Sites using this in your dashboard to see the reason, then add the site tag, the domain or your server IP, or approve the site. Make sure the iframe still has referrerpolicy="no-referrer-when-downgrade".

"This chat doesn't exist" or "has been disabled"

Check the client ID, that the integration type is Embed, and that the integration is enabled.

The login popup does nothing

The browser is blocking popups. The embed shows a message asking the visitor to allow them for your site.

The chat is blank or refuses to load

Your site's Content-Security-Policy must allow framing Vortex. Add frame-src %ORIGIN%. If it's blank only on some sites, those pages probably hide their referrer. Check the iframe still has referrerpolicy, or put the domain in your Domains list.