Add it to your page
- In your guild dashboard, set the integration type to Embed and make sure your site is allowed under Where it works (see Site access).
- 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: 100vhor put the iframe in a flex container withflex: 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.