Developer Plan

The Developer plan ($79/mo, billed annually) is for teams building mobile apps or platforms that need unlimited scale, REST API access, and the React Native SDK. This page covers what changes at this tier and provides a deeper look at the React SDK features available to all Developer subscribers.

Installation

npm install @relaya-chat/react-native @relaya-chat/core

import { useRelayaAuth, useRelayaChat } from '@relaya-chat/react-native';

const auth = useRelayaAuth({
  serverUrl: 'https://api.relaya.chat',
  stationSlug: 'your-space-slug',
});

What changes at Developer

React SDK — deeper customisation

The React SDK (@relaya-chat/react) is available on both Community and Developer plans. See the Community plan page for basic installation and usage. This section covers additional customisation options that are relevant when building a more deeply integrated experience.

Controlling dark / light mode

By default, the widget reads the prefers-color-scheme media query and follows the visitor's system preference. To force a specific mode regardless of system setting, set the data-theme attribute on the document root:

// Force dark mode for the entire page
document.documentElement.setAttribute('data-theme', 'dark');

// Force light mode
document.documentElement.setAttribute('data-theme', 'light');

This attribute is checked by the widget's CSS and overrides the media query. If your app has its own theme toggle, wire it to set this attribute and the widget will follow.

Opting out of default styles

If you want full control over all widget styles, you can remove the injected default stylesheet entirely:

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

// Call before the first <RelayaChat> render
removeRelayaStyles();

After calling this, you are responsible for all widget styling. All widget class names and the .relaya-root scope boundary are still present — you can write CSS targeting those selectors. This is an advanced option intended for teams building a completely custom visual design.

CSS custom properties reference

The widget exposes its design tokens as CSS custom properties. You can override any token by targeting .relaya-root in your own stylesheet:

/* Override a specific token without removing all defaults */
.relaya-root {
  --relaya-color-accent:      #e91e63;
  --relaya-color-bg:          #1a1a2e;
  --relaya-color-message-bg:  #16213e;
  --relaya-radius-bubble:     16px;
}

Key token categories:

• --relaya-color-* — full color palette (background, text, accents, status)
• --relaya-radius-* — border radii (sm / md / lg / bubble)
• --relaya-font-size-* — type scale (xs / sm / base / lg)
• --sp-* — developer brand variables (set via spaceThemes.ts)
• --header-height, --sidebar-width — layout dimensions

Admin-saved color overrides are applied as inline :root styles and will win over your :root rules. To reliably override an admin-saved color, target .relaya-root instead of :root.

Hiding the admin panel in embed contexts

If you are embedding the widget on a public page where you do not want the admin gear icon visible to non-admins, pass the hideAdmin prop:

<RelayaChat
  spaceSlug="your-space-slug"
  serverUrl="https://api.relaya.chat"
  hideAdmin={true}
/>

This suppresses the ⚙ icon in the chat header for all users on that page instance. If the space admin needs to access admin settings, they can open the space in another context without hideAdmin.

REST API

The Developer plan includes API access to the Relaya server. This lets you build integrations that read messages, manage members, or trigger moderation actions from your own backend — outside the context of the chat widget itself.

React Native SDK

The @relaya-chat/react-native package brings Relaya chat to iOS and Android apps built with React Native or Expo. It provides the same moderated, real-time chat experience as the web SDK, adapted for native mobile rendering — native modal sheets for moderation actions, AsyncStorage-based token management, and App Store–compliant authentication.

When available, the SDK will publish as @relaya-chat/react-native on npm under the @relaya scope. It will share the same space, member, and message data as your existing web embed — a member who signs in on the web will see their history in the mobile app.

Unlimited spaces

The Developer plan places no limit on the number of spaces under a single subscription. This is designed for platforms that provision a space per user, per venue, or per event — scenarios where the number of spaces is determined by your product logic, not an artificial cap.

All spaces share the same subscription. Each space has independent moderation, stickers, theming, and member lists. The 25-moderator and 5-admin limits apply per space.