How it works and what features are available within this overlay?

It a browser based source file which can be added in OBS software to display a bunch of stuff.

Let's take each section and see what this amazing project can do 😎

1. Header section

- avatar image in the left side which can be changed via Interact OBS interface. Supported file types? SVG, GIF, PNG, JPEG

- user name is also editable via Interact OBS interface. Simply type in your text

2. Side Menu

- shows 4 buttons triggering additional sections. Games, Stats, Team, Social

2.1 Games

Once triggered from side menu a custom section show up displaying 8 "slots" with changeable image and editable text visually defied by Game Name here

Animated by CSS. Upon hover of Games box, the perspective and position of the box changes. To close this box, click on X button or simply navigate to other tab from Side Menu

2.2 Stats

visibility triggered from Side Menu and will display 2 icons (non editable/can't be changed via OBS interface) and 6 editable Achievements slots with editable hours

To close this box simply click on X or trigger another box from Side Menu

2.3 Team

Shows editable text-based content and 3 generic images which can be changed. Simply click on top of the image to swap it with yours. SVG, GIF, PNG, JPEG file types supported. Default are using SVGs.

2.4 Social

by now you've already figured out, it is triggered by the Side Menu link and shows a box with a bunch of SVG icons and editable text. 9 icons can be hidden or not if click on (X) icon from left side of the slots

3. Bottom Bar

3.1 - from left to right, 2 arrow icons used to change between to backgrounds

3.2 - type field. Looks like a message box and can hold your own (short text)

3.3 - clock. Shows your local time. Can't be edited

3.4 - on click of eye icon, the Side Menu visibility is set to on/off

3.5 - panel icon is triggering visibility for the Away Screen (on/off)

4. Away Screen

4.1 - left editable box . Type to change text

4.2 - right box is showing (by default) an image which can be changed

4.3 - below right box there's a toggle icon. On click display or hide clock

The original version had more animations to show off but I had to optimize as much as possible these SVG animations because they were using CSS instead of repeatCount="indefinite" . One optimization solved.

This overlay is also using javascript in the same HTML page. Used to allow image change, trigger buttons show/hide elements. Unfortunately I'm not a programmer so this programming language is something I can't optimize, but feel free to give it a try

Install Instructions

1. For downloaded version

1. Open OBS, click the + button/icon from Sources manager window
2. Select the Browser option from the available options panel
3. Select Local file checkbox , browse button and select the html file provided
4. Set up the width and height of the overlay (it depends on what the overlay is showing)
5. Select the Refresh checkbox
6. Tweak the position of the installed overlay by dragging the red lines or corners
7. To trigger overlay visibility use the eye icon to show or hide

1.2 Simplified install:

Simply drag and drop the html file into Preview window inside OBS

2. Hosted version:

1. Open OBS, click the + button/icon from Sources manager window
2. Select the Browser option from the available options panel
3. Go to online (hosted) version showing this overlay and copy the full URL path
4. Paste the URL in related field on OBS and click Apply.
5. To trigger overlay visibility use the eye icon to show or hide

How to use

Almost all text-based elements are editable via Interact OBS functionality

In Interact window click and type to interact with on-window elements

All editing is done in real time and it will render in live stream

Upon refresh of the browser source all editing will revert back to default

This overlay is not automatically triggered by external event or action

Links:

Go for image editing using PSD source file or simply use the graphics provided with this download.

• Gamer 369
• bonus / off screen
• YouTube video
• general install OBS overlays