---
title: "Dokumentation – Relyo"
description: "Co-Browsing für den Support in Websites und Flutter-Apps einbauen: Schnellstart, Ablauf einer Session, Server und Projekt-Keys."
lang: de
canonical: https://relyo.de/docs/
---

# Dokumentation

Relyo (gesprochen /rɪˈlaɪ.oʊ/, „ri-LAI-o“) bringt [Co-Browsing](/co-browsing) für den Support in deine Website oder Flutter-App. Der Nutzer tippt auf „Support“ und nennt einen Code, du siehst seinen Bildschirm live, zeigst und zeichnest und steuerst nach einer zweiten Zustimmung.

## So läuft eine Support-Session

1. **Support antippen.** Der Nutzer tippt in deiner Website oder App auf „Support“. Das SDK verbindet sich mit dem Server und zeigt einen 6-stelligen Code, 10 Minuten gültig und nur einmal verwendbar.
2. **Code nennen.** Der Nutzer nennt dir den Code am Telefon oder im Chat. Du gibst ihn auf [relyo.de](/) ein, ganz ohne Konto.
3. **Freigeben.** Auf dem Gerät des Nutzers erscheint ein Dialog mit „Freigeben“ und „Ablehnen“. Erst nach „Freigeben“ werden Bildschirminhalte übertragen.
4. **Live helfen.** Du siehst den Bildschirm, zeigst mit einem Pointer und zeichnest Pfeile und Kreise. Während der Session zeigt das SDK eine Statusanzeige mit „Beenden“, die sich nicht ausblenden lässt.
5. **Steuern, wenn nötig.** Auf Wunsch fragst du die Steuerung an. Der Nutzer muss sie in einem zweiten Dialog erlauben; jede eigene Eingabe beendet sie sofort.

Passwortfelder, Zahlungsdaten und Bereiche, die du markierst, werden schon auf dem Gerät maskiert. Bildschirminhalte werden nur live weitergeleitet, nicht gespeichert.

## Server: relyo.de oder selbst betrieben

Das SDK verbindet sich mit einem Relyo-Server (Relay). Du hast zwei Möglichkeiten:

- **relyo.de**, der kostenlose Demo-Dienst: `relayUrl: 'wss://relyo.de'`. Nutzbar, wie er ist, ohne Gewährleistung, mit Limits für gleichzeitige Sessions und Dauer (siehe [Nutzungsbedingungen](/nutzungsbedingungen)). Bindest du Relyo für die Nutzer deiner eigenen Website oder App ein, gilt der [Auftragsverarbeitungsvertrag](/avv).
- **Selbst betrieben**: ein Container mit Relay, Konsole und SDK, zum Beispiel hinter einem Cloudflare Tunnel. Für den produktiven Einsatz ist das der empfohlene Weg.

> **Projekt-Key:** Der offene Dienst ohne Anmeldung ist auf relyo.de noch nicht freigeschaltet. Bis dahin braucht jede Website und App einen Projekt-Key (`projectKey`), der an ihre Adressen gebunden ist (Origins wie `https://example.com`). Einen Key bekommst du per E-Mail an [mail@jochen-maurer.com](mailto:mail@jochen-maurer.com?subject=Relyo%20Projekt-Key). Ist der offene Dienst aktiv, lässt du `projectKey` einfach weg.



Self-Hosting folgt, sobald das Repository öffentlich ist.

## Schnellstart Web

Ein Script und ein Link genügen. Das SDK verbindet sich erst, wenn jemand auf „Support“ tippt.

```html
<a href="#" id="support">Support</a>

<script src="https://relyo.de/sdk/relyo.js"></script>
<script>
  const relyo = Relyo.init({
    relayUrl: 'wss://relyo.de',
    projectKey: 'pk_deinprojekt', // entfällt im offenen Dienst
  });
  document.querySelector('#support').addEventListener('click', (event) => {
    event.preventDefault();
    relyo.showCode();
  });
</script>
```

Hat deine Seite eine Content-Security-Policy, ergänze `https://relyo.de` und `wss://relyo.de`. Wie du das SDK erst beim Klick lädst, wie es in React und Next.js aussieht und was die CSP genau braucht, steht unter [Websites](/docs/web).

## Schnellstart Flutter

Abhängigkeit eintragen, `Relyo.init` vor `runApp` aufrufen, die App in `RelyoScope` legen und einen Support-Eintrag anbieten, zum Beispiel in den Einstellungen.

```dart
import 'package:relyo_flutter/relyo_flutter.dart';

void main() {
  Relyo.init(
    relayUrl: 'wss://relyo.de',
    projectKey: 'pk_deineapp', // entfällt im offenen Dienst
    connect: RelyoConnect.lazy, // erst bei „Support“ verbinden
  );
  runApp(RelyoScope(child: const MyApp()));
}

// In den Einstellungen:
TextButton(
  onPressed: () => Relyo.instance.showCode(context),
  child: const Text('Support'),
)
```

Abhängigkeit, Maskierung, Router und Plattform-Hinweise stehen unter [Flutter-Apps](/docs/flutter).

## Was der Supporter sieht

- **Websites:** den Browser-Tab mit der Seite, live als Seitenstruktur (kein Video), dazu Mauszeiger, Klicks, Scrollen und die aktuelle Adresse. Andere Tabs und Programme nicht.
- **Apps:** die Flutter-Oberfläche der App als Bildfolge, bis zu 10 Bilder pro Sekunde, dazu Berührungen und die aktuelle Route. Andere Apps, System-Dialoge und die Tastatur nicht.
- **Nie:** Inhalte von Passwortfeldern und maskierten Bereichen. Sie verlassen das Gerät nicht im Klartext.

## Für Coding-Agents

Jede Seite dieser Dokumentation gibt es als Markdown unter derselben Adresse mit `.md` (zum Beispiel [/docs/index.md](/docs/index.md)), dazu eine Übersicht unter [/de/llms.txt](/de/llms.txt). Gib deinem Agent am besten diese Adressen statt einer Zusammenfassung. Fertige Prompts zum Kopieren stehen unter [Websites](/docs/web#mit-einem-coding-agent-einbauen) und [Flutter-Apps](/docs/flutter#mit-einem-coding-agent-einbauen); Agents mit Skill-Unterstützung finden die Anleitung unter [/.well-known/agent-skills/](/.well-known/agent-skills/index.json).