Documentation

RealTimee architecture and developer guide

This documentation explains the current platform architecture, key pages, and the code paths behind widget embedding, notifications, and tenant security.

Platform overview

RealTimee is a multi-site live chat platform built with Next.js App Router and Supabase. It supports multiple organizations, each managing one or more websites with their own chat widget.

Public website widget scripts are served from `app/widget.js/route.ts`.
Dashboard pages live under `app/(dashboard)` and require authenticated access.
Widget pages and embed flows are located in `app/widget`.
Notifications and email delivery are handled in `lib/notifications`.

Embedding guides

RealTimee can be installed on any site using a simple script snippet. Each guide explains where to add the widget and how to initialize it for your platform.

Plain HTML

Add the widget script to the bottom of your page before the closing </body> tag.

<script src="http://real-timee.vercel.app/widget.js" data-site-token="YOUR_SITE_TOKEN"></script>

Next.js

Use `next/script` in your page or layout so the widget loads after the app renders.

import Script from 'next/script';

export default function Page() {
  return (
    <>
      <Script
        src="http://real-timee.vercel.app/widget.js"
        data-site-token="YOUR_SITE_TOKEN"
        strategy="afterInteractive"
      />
    </>
  );
}

React

Add the widget script to a top-level component or `App` wrapper so it is available across pages.

function App({ Component, pageProps }) {
  return (
    <>
      <script
        src="http://real-timee.vercel.app/widget.js"
        data-site-token="YOUR_SITE_TOKEN"
      ></script>
      <Component {...pageProps} />
    </>
  );
}

Vue

Load the widget in `App.vue` or a global layout component to ensure the script is included once.

<template>
  <router-view />
</template>

<script>
export default {
  mounted() {
    const script = document.createElement('script');
    script.src = 'http://real-timee.vercel.app/widget.js';
    script.dataset.siteToken = 'YOUR_SITE_TOKEN';
    document.body.appendChild(script);
  }
};
</script>

Angular

Add the widget in `app.component.ts` or a global shell component so it loads on every route.

import { Component, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-root',
  template: '<router-outlet></router-outlet>'
})
export class AppComponent implements AfterViewInit {
  ngAfterViewInit() {
    const script = document.createElement('script');
    script.src = 'http://real-timee.vercel.app/widget.js';
    script.dataset.siteToken = 'YOUR_SITE_TOKEN';
    document.body.appendChild(script);
  }
}

WordPress

Add the snippet to a theme footer, custom HTML block, or header/footer script plugin.

<script src="http://real-timee.vercel.app/widget.js" data-site-token="YOUR_SITE_TOKEN"></script>

Laravel

Include the script in a Blade layout, usually before </body>.

<!DOCTYPE html>
<html>
  <body>
    @yield('content')
    <script src="http://real-timee.vercel.app/widget.js" data-site-token="YOUR_SITE_TOKEN"></script>
  </body>
</html>

Key code areas

app/page.tsx — homepage metadata and marketing content.
app/layout.tsx — global metadata and SEO defaults.
lib/seo.ts — canonical URL helpers and site metadata.
lib/notifications/email.ts — email delivery and notification templates.
app/sitemap.ts — sitemap route entries for public pages.

Security and integrations

lib/supabase — client and admin Supabase helpers.
lib/tenant — org and site access rules.
app/robots.ts — crawler directives for public routes.
app/(auth) — account flows and noindex metadata.
app/widget/embed — embeddable iframe widget entry.

Use the feature and integration pages as public entry points for marketing and developer education.

/features - showcases product value.

/integrations - outlines how the platform connects with websites and services.