How to use
Because this OBS overlay runs local resources (from your laptop/pc) the install process is simple and doesn’t need hosted images (unless you want to use images from internet).

1. In Sources management section click the plus icon [+]
2. Select the Browser option

Next

1. Click the check-box for the Local file option
   Optional, name the new source. If you run multiple sources, its better to keep track of them
2. Browse for downloaded file in your desktop/laptop and select the OBS overlay (CGC_obs_overlay_winter_brb.html available on zip folder)
3. Set the width and height of the overlay as you see fit. On my screenshot I wanted to cover the entire screen so I keep edit those values until it looks as I want
4. When you’re done, click the OK button and test the overlay

If you need to make changes, simply click on cog icon and settings for selected source will show up.

How to Edit via OBS
Having difficulties in manually edit the OBS source markup? Well, OBS’s Interact option comes to the rescue.

This Interact feature allows you to interact with a browser page like click events or hover interactions… a nice feature.

Usually web pages are not editable from front-end but I’ve added the contenteditable="true" to all editable text boxes and also a way to change the default image with your own

Please note that these changes are not permanent and it will not be permanently saved

How to use the Interact OBS feature?
Change text via Interact feature

(full details in documentation file)
Change image via Interact feature

(full details in documentation file)

Video – preview / install process and live editing

GitHub documentation | Dowload OBS overlay