Dokumentation

Relyo (gesprochen /rɪˈlaɪ.oʊ/, „ri-LAI-o“) bringt Support per Bildschirmfreigabe 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 oben eine Leiste 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). Bindest du Relyo für die Nutzer deiner eigenen Website oder App ein, gilt der Auftragsverarbeitungsvertrag.
  • 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 [email protected]. 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.

<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.

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.

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.

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), dazu eine Übersicht unter /de/llms.txt. Gib deinem Agent am besten diese Adressen statt einer Zusammenfassung.

Diese Seite als Markdown