Your pack set up in OBS or Streamlabs, step by step.

Chapter 00

Before you start

Everything runs on your computer: nothing is sent anywhere, the pages work without a connection. Here is what the folder contains.

1. Unzip into a folder that will not move

   Done

   On Windows: right-click the ZIP, “Extract All”, then pick a stable folder, for example Documents\Stream. Always work from the unzipped folder, never from inside the ZIP.

2. Why it must not move

   Done

   Each source in your software points to a file in this folder, by its full path on your drive. If you move or rename the folder, the source can no longer find its page and stays empty: you will have to redo the path of every source (see the Troubleshooting chapter).

3. Keep the structure as it is

   Done

   The polices/ folder must stay next to scenes/, and two levels above elements/onde/, as in the ZIP. Don't take a page out of the folder on its own: the text would change font.

4. Check in your browser

   Done

   Double-click scenes/onde-demarrage.html: the scene opens in your browser and moves. The folder is ready. Then pick your software at the top of the page: every instruction follows that choice.

Chapter 01

Add a full-screen scene

Starting, break, intermission, ending, offline and schedule: 1920 x 1080 pages that cover the whole screen. They all go in the same way, one scene each.

1. Create one scene per screen

   Done

   In the “Scenes” panel, click +, name the scene (for example “Starting”) and confirm.

   OBS Studio

   Scenes

   • Starting
   • In game
   • Just chatting

   +−

   Sources

   • Game Capture
   • Webcam

   +−⚙

   Audio Mixer

   Streamlabs Desktop

   Scenes+

   • Starting
   • In game
   • Just chatting

   Sources+

   • Game Capture
   • Webcam

2. Add a browser source

   Done

   With the scene selected, click + in “Sources” and choose “Browser”. Give it a name, then OK.With the scene selected, click + (Add Source) in “Sources”, choose “Browser Source”, then “Add Source”. Name it and confirm.

   OBS Studio

   Scenes

   • Starting
   • In game
   • Just chatting

   +−

   Sources

   • Game Capture
   • Webcam

   +−⚙

   Audio Mixer

   Streamlabs Desktop

   Scenes+

   • Starting
   • In game
   • Just chatting

   Sources+

   • Game Capture
   • Webcam

   OBS Studio

   Game CaptureImageBrowserSceneVideo Capture Device

   Streamlabs Desktop

   Add Source

   Game CaptureBrowser SourceImageMedia File

   Add Source

3. Pick the screen's file

   Done

   Tick “Local file”, click “Browse” and pick scenes/onde-demarrage.html (or the page of the screen you want, see the table).

   If the “Local file” option does not appear, paste the full address in the “URL” field (chapter 04).

   Properties · OBS Studio

   Local file

   Local file…/scenes/onde-demarrage.htmlBrowse

   Width1920

   Height1080

   Shutdown source when not visible

   Refresh browser when scene becomes active

   CancelOK

   Properties · Streamlabs Desktop

   Local file

   Local file…/scenes/onde-demarrage.htmlBrowse

   Width1920

   Height1080

   Shutdown source when not visible

   Refresh browser when scene becomes active

   CancelOK

4. Width 1920, height 1080

   Done

   The screens are all 1920 x 1080. A source at the right size stays sharp: the page adapts to the size you give it.

5. The useful options

   Done
   • Tick “Refresh browser when scene becomes active”“Refresh browser when scene becomes active”: the entrance animation replays each time.
   • Leave “Shutdown source when not visible” unticked for the screens, ticked for the alerts if you want them to replay.
   • Leave the custom CSS field as it is: the pages already have a transparent background where needed.

6. Confirm and fit the source

   Done

   Confirm. If the source does not fill the screen: right-click the source, “Transform”, “Fit to screen”.Confirm, then fit the source to the screen if needed (right-click the source, transform menu).

7. Repeat for each screen

   Done

   Same thing for onde-pause.html, onde-intermission.html, onde-fin.html, onde-hors-ligne.html, onde-planning.html. The starting screen counts down to the stream time, the break and the intermission count minutes: these settings go in the address (chapter 04).

Chapter 02

In game, just chatting and overlays

These pages go on top of your game capture and your camera. Their background is transparent or cut out: the order of the sources does everything.

The in-game scene

1. Add your game capture and your webcam

   Done

   In your in-game scene, add your game capture (“Game Capture”) and your webcam (“Video Capture Device”), as usual.

2. Add the in-game page on top

   Done

   scenes/onde-en-jeu.html as a browser source, 1920 x 1080, as in chapter 01. Drag it to the very top of the source list: the highest one is in front. Its center is transparent.

   Game Capture

   Webcam

   onde-en-jeu.html

   1. onde-en-jeu.htmlfront
   2. Webcam
   3. Game Captureback

3. Place your webcam under the frame

   Done

   Recommended spot: position 56, 650, size 480 x 270.

   Right-click the webcam, “Transform”, “Edit Transform”, then Position 56 and 650, Size 480 x 270.Drag the webcam under the frame and adjust its size with its handles, until it fills the opening.

   Webcam56, 650 · 480 x 270

   Banner

Just chatting and intermission

1. Add the page and your webcam under it

   Done

   scenes/onde-just-chatting.html (or scenes/onde-intermission.html) at 1920 x 1080. Your webcam goes under the page, at 80, 190, size 1200 x 675: the page background is cut out at that spot.

   Webcam

   onde-just-chatting.html

   Chat

   1. Your chat sourcefront
   2. onde-just-chatting.html
   3. Webcamback

2. The chat box

   Done

   The chat area is reserved on the right: 500 x 675 at 1340, 190 (500 x 400 in the intermission, the timer is below). Put your chat source on top of the page, in that area: for example the free Aghenor.TV chat widget (your username goes in its address with ?channel=your_username), or the Streamlabs Chat Box widget.

   Webcam80, 190 · 1200 x 675

   Chat1340, 190 · 500 x 675

   Banner

The other overlays

1. The webcam frame and the chat box on their own

   Done

   For your own layouts: scenes/onde-webcam.html (1000 x 660) goes over your webcam, and scenes/onde-chat.html (560 x 900) is a chat decoration with a transparent background. At their original size, the chat box's message area is 500 x 720 at 30, 100: your chat source goes on top of it.

2. The lower third

   Done

   scenes/onde-tiers-inferieur.html at 1920 x 1080, at the very top of the sources. It shows your name and your tagline; for a guest, add ?nom=Kestrel&titre=Tonight's guest to the address, and &boucle to make it enter and exit in a loop.

3. The transition

   Done

   scenes/onde-transition.html is not a stinger video: add it at the very top of the arrival scene, at 1920 x 1080, with “Refresh browser when scene becomes active”“Refresh browser when scene becomes active” ticked. It covers the screen on arrival, then pulls back. Add it to every scene where you want to see it.

4. Alerts and goal: at the very top

   Done

   The alerts, the goal bar (scenes/onde-objectif.html, 1000 x 200, place it wherever you want), the lower third and the transition go above everything else. Alerts have their own chapter (05).

Chapter 03

The separate elements

The full-screen scenes stay in scenes/. The elements take pieces of the overlays, with the same look and the same animations, but each one in its own source, at its own size: you place them in your scene wherever you want.

The webcam frame and the chat box are already separate sources: scenes/onde-webcam.html (1000 x 660) and scenes/onde-chat.html (560 x 900).

1. Add the element

   Done

   “Sources”, +, “Browser”.+, “Browser Source”. Tick “Local file” and pick the page in elements/onde/.

2. Give it its exact size

   Done

   Width and height of the element (table above), then confirm. Also tick “Refresh browser when scene becomes active”“Refresh browser when scene becomes active” to replay the entrance.

3. Place it, enlarge it without blur

   Done

   Drag the source where you want it. To make it bigger without blur, change the width and the height in the source properties rather than pulling a corner, keeping the same proportions: the page adapts. Pulling a corner stretches an image that is already drawn.

   Example: elements/onde/tiers-inferieur.html goes from 1640 x 300 to 2460 x 450 to be one and a half times bigger.

   Pulling a corner

   Your usernameSettle in, we're on our way.

   Stretched image: blurry.

   Width / Height

   Your usernameSettle in, we're on our way.

   1640 x 300 becomes 2460 x 450: sharp.

4. Crop with the Alt key

   Done

   In the OBSStreamlabs preview, hold Alt and drag an edge of the source: you crop instead of resizing. Handy to keep only part of the banner.

   Alt

   Your username

Chapter 04

Settings in the address

Some pages read settings at the end of their address: the start time, a timer, a guest's name, an alert. Here are all the ones they recognize.

1. Untick “Local file”

   Done

   The “Local file” box does not allow settings. In the source properties, untick it: the “URL” field appears.

2. Paste the full address

   Done

   It starts with file:/// followed by the file path, with forward slashes, then the settings after the question mark:

   file:///C:/Users/you/Documents/Stream/scenes/onde-demarrage.html?cible=2026-11-02T20:00

   The builder below makes it for you. Confirm: the page reads its settings again at each load.

Spaces go through as they are; if they cause trouble, replace them with %20. The parameter names stay in French: cible = target, duree = duration, nom = name, titre = title, actuel = current, montant = amount, boucle = loop, figer = freeze, and the days lundi, mardi, mercredi, jeudi, vendredi, samedi, dimanche.

Chapter 05

The alerts

Animated alerts in your look: follow, subscription, resub, donation, bits, raid and host. Only the Streamlabs Alert Box receives your channel's real events.

1. Open the Alert Box

   Done

   Go to streamlabs.com, log in, then Widgets (or “All widgets”) > Alert Box. Open the alert type you want.

2. Turn on custom code

   Done

   Scroll down to “Custom HTML/CSS” (or the Custom Code tab) and turn it on.

   streamlabs.com

   streamlabs.com · Alert Box

   • Follows
   • Subscriptions
   • Donations
   • Bits
   • Raids

   Custom HTML/CSS

   HTMLCSSJS

   Alert Duration7

   Text Delay0

   Save Settings

3. Paste the three files

   Done

   HTML tab: delete everything, paste the contents of alertes/streamlabs/<type>/html.txt for the same type. CSS tab: delete everything, paste css.txt. JS tab: delete everything, paste js.txt. The CSS is the same for all seven types (fonts included).

   The alert types and their folders

   Type	Folder	In the Alert Box
   Follow	alertes/streamlabs/follow/	Follows
   Subscription	alertes/streamlabs/sub/	Subscriptions
   Resub	alertes/streamlabs/resub/	Resubs (or the resub variant in Subscriptions, depending on your version)
   Donation	alertes/streamlabs/don/	Donations (or Tips)
   Bits	alertes/streamlabs/bits/	Bits (Cheers)
   Raid	alertes/streamlabs/raid/	Raids
   Host	alertes/streamlabs/host/	Hosts

4. Set the duration and the rest

   Done
   • Alert duration (Alert Duration): 7 seconds. If you pick another one, also change data-duree in the HTML (in milliseconds: 7 s = 7000).
   • Text delay (Text Delay): 0. Streamlabs entrance and exit animation: a simple fade, or none. The alerts already have their own.
   • Alert image: leave it empty (the type's icon shows), or upload your logo: it replaces the icon. The sound is up to you.

5. Save and test

   Done

   Save Settings, then “Test Follow” (or Test Sub, Test Donation...). To see each type right away, open alertes/apercu.html in your browser.

6. Show the Alert Box in OBSStreamlabs

   Done

   On the Alert Box page, copy the widget address (Widget URL). In OBS, add a “Browser” source, untick “Local file” and paste that address in “URL”, 1920 x 1080.In Streamlabs Desktop, + in “Sources”, then the “Alert Box” widget: it is linked to your account. Put it at the very top of the sources. If your source is not the size of your screen, the alert scales by itself.

7. Without Streamlabs: for testing

   Done

   alertes/source-navigateur.html plays a test alert on load (“Browser” source, local file, 1920 x 1080), and scenes/onde-alerte.html does the same in the style of the scenes. Neither one receives your channel's real events: without an alerts service, they are only for testing the look or playing an alert by hand.

Hosting no longer exists on Twitch since 2022: its folder is only useful if your platform or your version of Streamlabs still offers it. Streamlabs tokens and containers can change: if something is missing, run a test again from Streamlabs.

Chapter 06

The fixed visuals

Drawn in the colors and the font of your pack, with your texts, in the language of the scenes: Twitch panels, offline screen, social icons.

1. The Twitch panels

   Done

   640 x 320 (Twitch shows them 320 wide, the double stays sharp), in visuels/onde/. On your Twitch channel, About tab: turn on “Edit Panels”, add an image panel, upload the image, then add the link and the text below it.

   Aboutpanneau-a-propos.jpgChat rulespanneau-regles.jpgSocialspanneau-reseaux.jpgSchedulepanneau-planning.jpgGearpanneau-equipement.jpgSupportpanneau-don.jpgDiscordpanneau-discord.jpgFAQpanneau-faq.jpg

2. The offline screen

   Done

   visuels/onde/ecran-hors-ligne.jpg, 1920 x 1080. On Twitch, it is set in the channel settings (video player banner). In OBSStreamlabs, you can also add it as an “Image” source.

3. The social icons

   Done

   128 x 128, transparent background: icone-twitch.png, icone-youtube.png, icone-instagram.png, icone-tiktok.png, icone-x.png, icone-discord.png, icone-kick.png, icone-facebook.png, icone-site.png. These are generic pictograms (no brand logo): place them in OBSStreamlabs (“Image” source) or on your panels.

Chapter 07

Organize and switch scenes

One scene per moment of the stream, the same sources in the same order: you switch scenes without thinking about it.

This is an example: add onde-transition.html at the top of each arrival scene if you want the curtain.

1. Switch scenes with one click

   Done

   Click the scene in the “Scenes” panel. Studio Mode shows you the next scene before sending it live.

2. Keyboard shortcuts

   Done

   In the OBS settings, Hotkeys section: each scene has its own line to switch to it. Click in the field and press the key you want.In the Streamlabs Desktop settings, Hotkeys section: one key per scene, in the scenes part.

   Keyboard (example)

   F1Starting

   F2In game

   F3Just chatting

   F4Break

   Stream Deck

   StartingIn gameJust chattingBreakIntermissionEnding

3. With a Stream Deck

   Done

   The Stream Deck app offers actions for OBSStreamlabs, including switching scenes: drag the action onto a key and pick the scene.

4. The transition between scenes

   Done

   Keep your software's transition short, a quick fade or a clean cut: onde-transition.html, at the top of the arrival scene, does the curtain.

5. What about automatic switching?

   Done

   The pages in this pack do not switch scenes on their own. Scenes that switch on their own are another Aghenor.TV service: they go through the Streamlabs API, and the OBS version, through obs-websocket, is in the works. How it works.

6. Keep your setup safe

   Done

   Once everything is in place, export your scene collection from the OBS scene collection menu: you get it back after a reinstall.Streamlabs Desktop keeps your scenes in scene collections. In any case, keep the pack folder in the same place: the source paths point to it.

7. Edit or update your pack

   Done
   1. Reopen the Scene Workshop. In the TUTORIEL.html of your own pack, a link reopens it directly with your settings. The logo is not in it: add it again.
   2. Change the colors, the texts or the look, then download the new ZIP.
   3. Unzip the new ZIP over your current folder, replacing the files. The files keep the same names and the same places: your OBSStreamlabs sources stay connected, nothing to set up again.

   If a scene still shows the old version, refresh the source: open its properties and confirm, or hide it and show it again.

Chapter 08

Troubleshooting

The most common problems, and how to fix them.