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:

.zoom body {

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?