Be Right Back SplitCam overlay and Top Tippers list

This overlay is a Browser-based source layer showing a full screen overlay with custom side image, editable texts and Top Tippers custom section.

Runs locally from your laptop/pc and doesn't require external or online-hosted resources.

Install process is fast and easy so follow the install instructions steps and I'll mention about how to customize it later

1. Download and unzip the content od the folder
2. Open SplitCam Sofware and click the + button next to Media Layers library
3. Select Browser as source layer.
4. Go back to downloaded folder and click the be-right-back-splitcam-overlay.html to open it in your defeault browser.
5. Copy the full URL path from address bar and paste it on SplitCam's drop-down URL box. Click Add button
6. If necessary, resize, drag to re-position the layer overlay to cover the entire screen

Editing & Customization
Right now SplitCam Software is not ready to allow interaction between the source overlay and user via their interface (function available on OBS) but there are ways to be able to edit and customize the content of this overlay.

Option One. Edit side image and text but don't refresh the page
The browser page is coded in such way to allow you to be able to click on the side image and replace it with your own photo, click on texts to change them py typing your own texts but here's the catch... don't refresh the page or close it, all editing will revert back to default. So once you have the page edited in your default browser copy the full path URL and paste it in SplitCam (step 5 mentioned above)
This is a basic feature using contenteditable="true" attribute to some elements to allow editing front-end. Do this editing before adding the browser source in SplitCam

Option Two. Dig into source markup
If you're not afraid to get your hands dirty, you can use the source editor tool to view, edit and save the web page.
The download is providing a very basic source editor which allows uou to upload the html file, view and edit the source markup. When you're done editing the source code, click the Preview button to render the page and use the Save button to save the file. Save your new html file in the same folder so your images will have the same URL path, otherwise, broken images will showup

Option Three. Pay for customization
Well, that's one option too
If you don't want to waste your time and doing this by yourself, the option of "paying someone" is on the table.

Things you might want to know:

Downloaded folder includes all images used for this design, this documentation with install / editing and of course the overlay file

Runs locally, meaning no external resources (codes, links, images)

Compatible with OBS too