Slides Studio for Slides.com

#uuinsome

The Slides Studio Github Page setup tutorial.

Requirements

To use Slides Studio the following pieces are required.

  1. Open Broadcast Studio(OBS)

  2. A Reveal js slide deck

Note

Optionally, create a Slides.com account ($) to create your own presentations.

Configure OBS:

Import the Slide Studio Scene Collection

  1. Download the Slides Studio OBS Scene Collection download link.
  2. In OBS Import the Slides Studio OBS collection
    a. On the file menu click, "Scene Collection" -> "Import"
    Pasted image 20250802193752.png
  3. Select the Scene Collection.
    a. "Scene Collection" -> "Slides.com_Collection"

Enable the OBS WebSocket Server

  1. On the file menu click, "Tools" -> "WebSocket Server Settings"
  2. Check the "Enable WebSocket server" option
    Pasted image 20250802195254.png
  3. Click the "Show Connect Info" button to view the Server Password.

Select a Camera

  1. Select the Scene named "Set Camera"
  2. Double click the Source named "Camera 1" to open the source properties window
  3. Use the "Device" drop down to select a camera.
    Drawing Set Camera.excalidraw.png

Slide Studio Settings

Connect Slides Studio and OBS

Complete the Slides Studio connection form.

Slides Deck

  1. Enter a Slides.com presentation link
    example, https://slides.com/uuoocl/deck-48ea10
Localhost URL Example

http://localhost:3000/slideDeckFolder/slideDeck.html

Open OBS

If OBS is already open, then

  1. enter the port number and password.
  2. click the "connect" button

Add Slide Control Tags

Choose the "Studio" layout

After connecting to the OBS WebSocket server, the Slide Studio view will appear.

  1. Use the "Layout" button and select the "Studio" option.

  2. Enter a name in the "slide deck name" field to save the settings

    1. press the "Load" button to retrieve previously saved setting from local storage

  3. For each slide, click the cell to choose an available option.

    • Slide Position: where the slides appears on the scene
    • camera Position: where the Camera appears on the scene
    • Camera Shape: change the camera from a rectangle to a different shape
    • Scene: OBS scenes that begin with "Scene"
      Drawing add control tags.excalidraw.png

1. Current Slide navigation

Click the ">" button to advance to the next slide, or the "<" button to return to the previous slide.

The keyboard keys left and right arrow keys can navigate the slides forward and back.

2. Slide tags navigation

Click on the slide number in the "Index" column to jump to a specific slide.

Press the keyboard "spacebar" key to advance to the next slide.

slidesStudio navigate slidesexcalidraw.png

Teleprompter

Add notes to slide

Slides Studio uses the Reveal.js notes format. Notes are defined by appending an <aside> element to a slide as seen below .

Pasted image 20250805060851.png

Adjust teleprompter settings

Click the "Layout" button, then select "Teleprompter".

The teleprompter view can set the font size, scroll speed, flip text and play/pause

Pasted image 20250805055539.png

Create Camera Position

Create Slide Position

Create Camera Shape