This is what you need to do to integrate a social wall in your OBS live-stream (for both Mac & Windows):

Set up your social wall

  • First things first, set up a wall with your desired content.

  • In Settings, go to Design and choose the theme Fluid.

  • Turn off Show header.

In Color scheme choose the option Custom and the Customize color scheme panel will appear. There, make the background color #00ff00 (green).

If you’re using the social wall elsewhere, just go to Design>CSS and add this code there:

body.zoom  {
background-color: #00ff00;
background-image: none;
}

Then add the class to your wall URL like in this example: https://walls.io/WallsioStories?class=zoom&show_header=0

Activate automatic scrolling

Go to Behavior and activate automatic scrolling.

Set up your OBS

#1 Video Capture Device: choose your webcam here.

#2 Browser: simply enter the URL of your wall here, and adjust the size etc.

Above Browser click Filters, add a Chroma-Key filter, and choose the colour #00ff00 in Key Colour.

  • The Browser Source should be stacked above the Video Capture Source so the wall overlays the video.

  • Now, in the main menu click Start Virtual Camera. Done!


Social media live ticker Beta feature for Premium users

If you prefer a social media live ticker, we got you! This is how to set up a Walls.io live ticker with OBS:

  • Install OBS- https://obsproject.com/

  • Make sure that you have a Premium Walls.io account since you will need an API token for trying this feature. You can find your API token under Settings>API. If you already have the API access enabled, you will see it already, if not, you will just have to activate it.

  • Create new Scene, with two Sources by clicking +:

#1 Video Capture Device: choose your webcam here.

#2 Browser: simply enter the below URL, replacing the "yourapitoken" part with your access token with the one of your wall and adjust the size etc.

https://diesocialisten.github.io/wallsio-widget-ticker/?access_token=yourapitoken_duration=7000&limit=20

  • The Browser Source should be stacked above the Video Capture Source, so that the ticker overlays the video.

  • Now, in the main menu click Start Virtual Camera.

In Zoom, you can now choose OBS Virtual Camera as a source.

In case you have further questions, don't hesitate to contact the support team via the chat or support@walls.io!

Did this answer your question?