Installation — OpenOverlay Docs

1

Télécharger OpenOverlay

Télécharge le ZIP et extrais-le dans un dossier sur ton ordinateur. C'est ce dossier que tu déposeras sur Netlify.

→
Clique sur le bouton ci-dessus pour télécharger le ZIP
→
Extrais le ZIP — tu obtiens un dossier openoverlay
→
Ne renomme pas les fichiers ni les dossiers

2

Déployer sur Netlify

Netlify héberge ton overlay gratuitement et fournit une URL publique. La méthode la plus simple : glisser-déposer le dossier directement.

☁️ Netlify Drop — glisser-déposer Recommandé

→
Crée un compte gratuit sur app.netlify.com
→
Ouvre app.netlify.com/drop
→
Glisse le dossier openoverlay extrait dans la zone de dépôt
→
Netlify déploie en quelques secondes → une URL t'est attribuée
→
Optionnel : renomme le site dans Site configuration → Site details pour avoir une URL mémorisable

Note bien l'URL attribuée — tu en auras besoin à l'étape suivante.

Ton URL https://ton-site.netlify.app

🐙 Alternative — connecter un repo GitHub privé (pour l'auto-redéploiement)

Cette option est utile si tu veux que chaque mise à jour du ZIP soit déployée automatiquement.

→
Crée un nouveau repo privé sur ton compte GitHub
→
Pousse le contenu du dossier openoverlay dans ce repo
→
Dans Netlify → Add new site → Import an existing project, connecte ce repo
→
Le netlify.toml est détecté automatiquement — ne touche pas aux paramètres de build

3

Créer une application Twitch

OpenOverlay a besoin d'une "app Twitch" pour se connecter à ton compte. C'est une étape officielle et gratuite — tu ne partages rien de sensible.

💜 Créer l'app sur dev.twitch.tv

→
Ouvre dev.twitch.tv/console/apps/create
→
Name : choisis un nom (ex : mon-overlay)
→
OAuth Redirect URLs : colle l'URL de ton Netlify suivie de /auth.html
https://ton-site.netlify.app/auth.html
→
Category : sélectionne Application Integration
→
Clique Create, puis New Secret
→
Note ton Client ID et ton Client Secret

⚠️

Ne partage jamais ton Client Secret publiquement. Ne le pousse pas dans le repo GitHub.

4

Ajouter les variables d'environnement

Ces deux clés permettent à Netlify de communiquer avec l'API Twitch. Sans elles, l'overlay ne peut pas se connecter.

⚙️ Dans Netlify → Site configuration → Environment variables

Variable	Valeur
TWITCH_CLIENT_ID	Le Client ID copié depuis dev.twitch.tv — utilisé aussi bien côté serveur que par le dashboard (auto-détecté)
TWITCH_CLIENT_SECRET	Le Client Secret généré à l'étape précédente

💡

Scope des variables : All contexts. Après avoir ajouté les variables, redéploie le site (Deploys → Trigger deploy → Deploy site).

5

Premier lancement — le dashboard

L'interface d'administration te guide à travers la configuration initiale. Tout se fait depuis le navigateur.

🚀 Ouvre le dashboard

Dashboard https://ton-site.netlify.app/admin/

1
Client ID auto-détecté — le dashboard lit automatiquement ton TWITCH_CLIENT_ID depuis les variables d'environnement. Vérifie qu'il apparaît bien dans la section "App Twitch" du guide de démarrage.
2
Connexion Twitch — clique sur "Se connecter" et autorise l'accès à ton compte Twitch
3
Modules — configure les modules built-in (logo, alertes, séries…) à ton goût

✅

Une fois connecté, le dashboard devient ton panneau de contrôle pour tout régler avant tes streams. Ta config est sauvegardée en ligne automatiquement.

6

Ajouter l'overlay à ton logiciel de stream

L'overlay est une page web avec fond transparent. Elle s'ajoute comme une "Browser Source" dans ton logiciel de streaming mobile.

URL Overlay https://ton-site.netlify.app/overlay/

📱 Compatibilité

✓

OBS Mobile (iOS / Android) — Ajoute une Browser Source, colle l'URL, règle la résolution sur 1280×720, active fond transparent.
✓

Moblin — Dans Scene → Add widget → Browser, colle l'URL.
✓

Streamlabs Mobile — Widgets → Browser Source → colle l'URL.
✓

OBS Desktop (tests avant le live) — Browser Source, 1280×720, "Control audio via OBS" décoché, "Shutdown source when not visible" décoché.

💡

Pour tester les alertes sans être en live, ouvre le dashboard et l'overlay dans deux onglets du même navigateur — les boutons "▶ Tester" fonctionnent instantanément.

✓

C'est prêt 🎉

Ton overlay est configuré, connecté à Twitch, et prêt pour ton prochain IRL.

🔄

Token expiré ? Il se rafraîchit automatiquement. Si besoin, reconnecte-toi depuis https://ton-site.netlify.app/auth.html.

💬 Commandes chat utiles

→
!serie <clé> — active une série sur l'overlay
→
!titre Mon titre — change le titre du stream depuis le chat
→
!alerte follow [Pseudo] — déclenche une fausse alerte de test
→
!clear — vide la file d'alertes et remet le logo

Guide d'installation

Un compte GitHub (optionnel)

Un compte Netlify

Un compte Twitch