Community Plan

The Community plan ($29/mo, billed annually) builds on everything in the Embed plan and adds custom branding, the React SDK, geo restrictions, chat history export, and expanded capacity limits. This page covers what is new at this tier.

Installation

npm install @relaya-chat/react

import { RelayaChat } from '@relaya-chat/react';
import '@relaya-chat/react/styles';

export default function MyPage() {
  return (
    <RelayaChat
      spaceSlug="your-space-slug"
      serverUrl="https://api.relaya.chat"
    />
  );
}

What changes at Community

Here is a concise summary of the upgrades at this tier:

Custom branding

On the Community plan, the "Powered by Relaya™" badge is automatically removed — no admin action required. The widget checks your subscription tier when it loads and simply omits the badge entirely for Community and Developer subscribers. No Relaya attribution appears anywhere in the widget.

Community also unlocks deeper brand theming through the React SDK. The 12-slot color panel in the admin panel (chat background, message bubbles, input colors, etc.) works the same on all plans. What Community adds is a brand layer — available when you use @relaya-chat/react — that lets you set values the admin panel does not expose: the header background, space name color, button styles, avatar colors, and font family. These are configured in the SDK's spaceThemes.ts file (described in the React SDK section below).

Multiple moderators

The Community plan supports up to 5 moderators and 2 admins. As your community grows, having a moderation team means you are not the only person keeping the space healthy.

To add a moderator, open the admin panel, go to the Moderators tab, and enter the person's email address. They receive the moderator role immediately — the next time they sign in to the space they will see the ⚙ gear icon and can access the moderation tools (report review, message deletion, user bans). Moderators cannot access configuration panels (stickers, theme, geo restrictions, export).

A second admin has the same access as the first. To add a second admin, go to the Settings tab and enter their email address.

Geo restrictions and IP bans

The Community plan adds access to the Geo tab in the admin panel, which provides two distinct controls:

Country allowlist and blocklist

You can restrict your space to specific countries (allowlist) or block traffic from specific countries (blocklist). When a visitor's IP resolves to a blocked country, the widget shows a localised "not available in your region" message rather than the chat interface.

Use a blocklist when you have specific countries causing problems and want to block only those. Use an allowlist when your space is genuinely regional and you want to restrict it to a specific set of countries only. You cannot use both simultaneously — choose the mode that fits your situation.

IP bans

In addition to the email-based bans available on all plans, the Community plan adds the ability to ban specific IP addresses. IP bans are useful against persistent bad actors who create multiple email addresses to evade email-based bans. IP ban controls are in the Geo tab alongside the country restriction settings.

Chat history export

The Export tab in the admin panel lets you download your space's full message history as a CSV file. The export includes the message text, the sending member's chat name and email, and the timestamp of each message, for all messages within the 90-day archive window.

Exports are generated on demand — there is no scheduled export or data pipeline to set up. Use the export to run your own analytics, archive messages for compliance purposes, or migrate content.

React SDK

If you are building a React or Next.js site, the Community plan unlocks @relaya-chat/react — a drop-in component that embeds the full Relaya chat experience directly in your React app, without an iframe. This gives you tighter layout control and avoids the cross-origin sandboxing constraints of iframes.

Installation

npm install @relaya-chat/react

The package includes a README.md with complete API reference, prop documentation, and advanced integration notes. Check it after installing: node_modules/@relaya-chat/react/README.md.

Basic usage

import { RelayaChat } from '@relaya-chat/react';
import '@relaya-chat/react/styles';

export default function MyPage() {
  return (
    <RelayaChat
      spaceSlug="your-space-slug"
      serverUrl="https://api.relaya.chat"
    />
  );
}

The component handles authentication, WebSocket connection management, message rendering, moderation controls, and the admin panel — the same feature set as the iframe embed, but rendered natively inside your React component tree.

Authentication

Authentication is handled entirely inside the component — you build none of it. Relaya uses a short-lived access token (held only in JavaScript memory, 15-minute expiry) combined with a rotating refresh token stored in localStorage keyed to the Relaya widget domain — the parent page cannot read it. The refresh token has a 33-day inactivity window: it resets on every use, so active users are never re-prompted. After 33 days of inactivity they see the sign-in prompt again.

There are no cookies, which means your users are not subject to cookie-consent requirements because of Relaya.

For full auth details — including iOS Safari localStorage behavior, sign-out, and security properties — see node_modules/@relaya-chat/react/README-AUTH.md after installing.

Styling the widget in your React app

The widget's CSS is scoped under the .relaya-root class — it will not bleed into your site's styles, and your site's styles will not affect the widget's internals.

Colors configured through the admin panel theme picker apply automatically, just as they do with the iframe. On the Community plan, you can also set deeper brand colors by configuring a SpaceTheme entry in packages/chat-react/src/spaceThemes.ts, keyed by your space slug:

// spaceThemes.ts
const SPACE_THEMES = {
  'your-space-slug': {
    titleBg:           '#2c3e50',   // header background
    spaceNameColor:    'white',     // header text
    buttonBg:          'rgba(255,255,255,0.15)',
    buttonTextColor:   'white',
    ownMsgBg:          '#2c3e50',   // your message bubbles
    ownMsgText:        'white',
    avatarBg:          '#2c3e50',
    avatarTextColor:   'white',
    uiFontFamily:      "'Inter', sans-serif",
  },
};

These values map to CSS custom properties prefixed --sp-* that are applied at runtime when the component mounts. They form the middle layer of a three-layer theming system: Relaya defaults → your brand values → admin overrides. Admin-saved colors always win, which allows space owners to fine-tune the appearance within the brand you set.

Multiple spaces

The Community plan supports up to 3 spaces. Each space has its own slug, embed code, member list, message history, moderators, sticker set, and theme. Spaces are completely isolated — a ban in one space does not carry over to others, and a member's chat name is per-space.

Additional spaces are created from your account dashboard. Each new space goes through the same slug-selection step as your first.