Home/Docs/Embedding Your Space

Embedding Your Space

This page covers everything included on the Embed plan: getting your iframe code, adding it to your site, and using the built-in admin panel to manage moderation, appearance, stickers, and your community.

Installation

Sign in to your account at relaya.chat/account. Your embed code is shown in the dashboard under your space name. It looks like this:

<iframe
  src="https://chat.relaya.chat/your-space-slug"
  style="width:100%; height:500px; border:none;"
  allow="storage-access"
></iframe>

Replace your-space-slug with your actual slug. The allow="storage-access" attribute is required for the OTP sign-in flow to work correctly in cross-origin iframe contexts on Safari.

Width adapts automatically — the widget fills whatever horizontal space you give it, so width:100% is all you need there.

Height must be set explicitly. Unlike a regular element, an iframe cannot resize itself to fit its content — the browser keeps the inside and outside of the frame separate by design. Without an explicit height, browsers fall back to a default of 150 px, which is too small to use. Set it directly on the <iframe> tag (as in the example above), or on a wrapper element:

<!-- Alternative: set height on a wrapper div -->
<div style="height:500px;">
  <iframe
    src="https://chat.relaya.chat/your-space-slug"
    style="width:100%; height:100%; border:none;"
    allow="storage-access"
  ></iframe>
</div>

The wrapper approach is useful on platforms that strip inline styles from iframe tags (Squarespace is one example). A height between 400 px and 600 px works well for most layouts.

Adding to your website

Paste the iframe code anywhere you want the chat widget to appear. The following notes cover the most common platforms.

Generic HTML

In any HTML page, place the iframe inside a container element that has an explicit height, or set the height on the iframe itself. The widget will fill the available space.

Wix

In the Wix editor, add an HTML iframe element (found under "Embed & Social" → "Embed a Widget"). Paste the full iframe tag into the code field. Resize the element on the canvas to set the widget height. Publish your site for changes to take effect.

Wix sandboxes third-party iframes, which is why the allow="storage-access" attribute matters — include it to ensure the OTP sign-in flow works on Safari-based browsers.

Squarespace

Add a Code Block to your page and paste the iframe tag inside it. Squarespace strips the style attribute in some contexts; if the widget appears without height, use the wrapper div pattern shown above instead.

WordPress

In the WordPress block editor, use a Custom HTML block and paste the iframe tag. On some WordPress hosting configurations, the block editor strips iframes from posts. If that happens, add the embed to a page template or use a plugin that allows raw HTML (such as "Raw HTML" or "Shortcode by WPBeginner").

Other page builders

Look for an "HTML embed," "raw HTML," or "custom code" block in your page builder. Relaya is a plain iframe — it works in any context that allows third-party iframe embeds.

The admin panel

All space management happens directly inside the widget — there is no separate admin website (though you will see both your space chat and the admin panels on one page when you log into your account at relaya.chat). The admin panel is a popup that opens when you click the ⚙️ gear icon in the chat header. The icon is only visible to users who have the admin or moderator role on that space.

When you sign in for the first time with the email address you used to create the space, you are automatically the space admin. From that position you can assign moderators, upload stickers, set theme colors, and access all other admin functions described below.

Moderation

Moderation tools are available on every plan from day one. There is no upgrade required to moderate your community. All enforcement happens server-side — a banned user cannot reconnect, even if they clear cookies or switch devices on the same email address.

Reporting, deleting, and banning

Any signed-in member can report a message. Admins and moderators can delete messages and ban users. To take action on a message, hover over it (or long-press on mobile) to reveal the context menu, then choose from the available options:

  • Report — flags the message for admin review. The reporting member remains anonymous to other members.
  • Delete — removes the message immediately. Deletion is permanent and visible in real time to everyone in the space.
  • Ban user — bans the member's email address from the space. Banned users see an informative message when they attempt to sign in.

The admin panel's Reports tab shows all flagged messages along with the reporter and the message content, so you can review and act on reports in one place.

Managing bans

The Bans tab in the admin panel lists all currently banned email addresses. You can lift a ban from here at any time. Bans are specific to the space — banning a user in one space does not affect their access to other Relaya spaces.

Moderator role

On the Embed plan, you can assign one moderator in addition to the space admin. Moderators can delete messages and ban users, but cannot access configuration settings (stickers, themes, geo restrictions). Assign a moderator from the Moderators tab in the admin panel by entering their email address. They will receive the moderator role the next time they sign in.

Custom stickers

Custom stickers give your community a distinctive, on-brand way to express themselves. Members click the sticker icon in the message input bar to open the sticker picker and send a sticker as a standalone message.

On the Embed plan you can upload up to 20 stickers. To manage stickers, open the admin panel and go to the Stickers tab. From there you can:

  • Upload new sticker images (PNG or GIF, recommended size 200 × 200 px, maximum 2 MB per file)
  • Set a display name for each sticker (shown in the picker tooltip)
  • Delete stickers that are no longer in use

Stickers are stored by Relaya and delivered over CDN. You do not need to host the image files yourself.

Appearance and theming

The chat widget ships with Relaya's default color palette. You can customise the colors through the Theme tab in the admin panel without any coding. Changes are applied immediately and stored server-side — they persist for all visitors across all devices without you touching your website.

The theme panel gives you independent light and dark mode controls for 12 color slots:

  • Chat background
  • Others' message bubbles
  • Your message bubbles
  • Body text
  • Secondary / muted text
  • Message input background and text
  • Send button background and icon
  • Moderator name color
  • Link color and link hover/active color

The widget automatically follows the visitor's system light/dark preference unless overridden. Admin-saved theme colors always take precedence over Relaya's defaults.

Note: On the Embed plan, the header background and some brand accent colors are fixed to Relaya defaults. The Community and Developer plans unlock the full brand layer, including header color and the ability to remove the "Powered by Relaya" badge. See Community Plan for details.

Chat names

Every member gets a default display name automatically — the part of their email address before the @ symbol (for example, sarah from sarah@example.com). There is no prompt on first sign-in.

Members can set a custom chat name at any time by clicking the Set name button in the chat header (or their current name, once set). This opens a short modal where they can enter a display name up to 40 characters. Chat names are per-space — the same person can use a different name in each space they belong to.

Admins and moderators can always see a member's underlying email address in the moderation context menu, regardless of what chat name they have chosen.

Message history

Relaya stores your chat history for 30 days on the Embed plan. Messages older than 30 days are automatically removed from the archive. The message list loads recent history when a member opens the widget, so regular participants can scroll back and see the conversation context.

Chat history export (CSV) is a Community plan feature. On the Embed plan, history is available through the widget UI only.

"Powered by Relaya™" badge

A small "Powered by Relaya" attribution badge appears at the bottom of the chat widget on the Embed plan. This badge is always shown and cannot be removed on this plan. Upgrading to the Community plan hides it.

What is not included on the Embed plan

The following features are available on Community or Developer plans:

  • Removing the "Powered by Relaya" badge
  • Full brand theming (header color, font customisation via the SDK)
  • Country allowlist/blocklist and IP ban controls
  • Chat history CSV export
  • React SDK (npm install @relaya-chat/react)
  • More than 1 moderator or 1 admin
  • More than 1 chat space
  • More than 20 stickers
  • More than 30-day message archive

You can upgrade at any time from your account dashboard. Upgrades take effect immediately.