Developer Portal
Quick StartsComposition scriptingAPIs and SDKsSupport
  • Portal overview
  • Quick start
  • REST API
    • Introduction
    • Rate limits
    • Authorization
    • How-to guides
      • Get a control app's API token
      • Get a composition's sub-composition IDs and names and their payload structures
      • Get a control app's model
      • Get a control app's metadata
      • Update a sub-composition's content
      • Update a sub-composition's animation state
      • Update a sub-composition's content and animation state in one call
      • Update multiple sub-compositions in one call
    • API reference
      • Get control app details
        • Get a control app's metadata
        • Get a control app's model
        • Get a control app's control data
      • Send data to a control app
        • Update a control app's content
        • Update a control app's animation state
      • Take out all of an app's output
  • Data stream API
    • Introduction
    • Rate limits
    • Authorization
    • How-to guides
      • Create a data stream
      • Link a data stream to a composition
      • Send data to an app using the data stream API
    • API reference
  • Composition scripting
    • Introduction
    • Overview
    • Quick start
      • Find sub-compositions and widgets
      • Read and update control nodes
      • Set text widget text properties
      • Read and update widget properties
      • Read control nodes and update widget properties
      • Set image widget URL property
      • Set table widget content property
    • Cheat sheets
      • Fundamentals
      • Interactive overlays
      • Best practices
    • Use cases
      • Read control nodes and generate HTML text
      • Read control nodes, generate HTML text with background
      • Text Ticker - Start ticker on "In" animation
    • Composition script editor reference
  • Software development kits
    • Graphics SDK
      • Getting started
      • Reference
        • SDK functions
        • Composition object
        • Sequencer object
      • Guides and examples
        • Load a composition with its token
        • Load a composition with its URL
        • Get the composition URL of an app instance
        • Sequencer VOD example
        • Control local preview of app
        • Load app instance output
    • Overlay SDK
      • Getting started
      • SDK functions
      • Use case examples
    • Widget SDK
      • Preparing your environment
      • Getting started
      • Reference
        • Widget UI definition
        • Widget callback functions
        • Time control object
        • Composition instance
      • Guides and examples
        • Widget example: CSS patterns
    • App SDK
  • Singular Basics
    • Overview of Singular
    • Managing overlays in the Dashboard
      • How to create a new composition
      • How to open a new app template
      • How to create an app for a composition
      • How to extract a composition from an app
      • How to find an app's shared app token and shared API URL
      • Dashboard reference
    • Building overlays in Composer
      • How to build a composition
      • How to set up layer logic to automate overlay transitions
      • How to set up control nodes to make widget properties available to a control app
      • Animating overlays
        • How to create timeline animations
        • How to create behavior animations
        • How to create update animations
      • How to make overlays interactive
      • How to adapt overlays to various screen sizes
      • Composer reference
    • Controlling overlays in Studio and UNO
      • How to use Studio
      • Studio reference
      • UNO reference
  • Support
    • Singular status
    • Support resources
    • Singular terminology
    • Performance Testing
Powered by GitBook
On this page
  • 1. Download and open the template used in this guide
  • 2. Choose an interactive object
  • 3. Add an event
  • 4. Deactivate the Send Message to Composition tool
  • 5. Activate the event
  • 6. Select the controlled graphic
  • 7. Select the mode
  • 8. Test it
  • 9. Set up the other three buttons
  • 10. Output the overlays using an embed code

Was this helpful?

  1. Singular Basics
  2. Building overlays in Composer

How to make overlays interactive

PreviousHow to create update animationsNextHow to adapt overlays to various screen sizes

Last updated 2 years ago

Was this helpful?

Making overlays is one thing. Making interactive overlays is another.

This guide shows how to make interactive overlays with buttons that toggle their corresponding graphics on and off.

Interactive overlays only work if you prepare and set up embed codes on your website.

1. Download and open the template used in this guide

  • Navigate to the Dashboard > Templates > Resources and download and open the Interactive Example template.

For help, see .

This template has four pre-built graphics: A, B, C, D, and four pre-built buttons: A Button, B Button, C Button, D Button.

2. Choose an interactive object

  1. In the composition tree, double-click the A Button sub-composition.

  2. Select the mainBase widget to add the interactivity.

3. Add an event

The event tool allows you to assign interactivity to a widget.

  1. Navigate to the event tab in the property panel and select Mouse Down from the drop-down menu.

  2. Click Add.

You can perform eight different actions in the output window to control a sub-composition (you can test the swipe options on a touchscreen):

  • Mouse down

  • Mouse up

  • Mouse enter

  • Mouse leave

  • Swipe left

  • Swipe right

  • Swipe up

  • Swipe down

4. Deactivate the Send Message to Composition tool

  • Deselect Active in the Send Message to Composition Script box.

This tool is for advanced users.

5. Activate the event

  • Select Active in the control sub-composition box to activate the interactivity.

6. Select the controlled graphic

  • In the Composition dropdown menu, select A, which is the sub-composition that will be controlled by the A Button.

7. Select the mode

  • Select Toggle so the A Button toggles the A Graphic on and off.

You can assign three modes to a sub-composition:

  • In

  • Out

  • Toggle

8. Test it

You've just added your first event.

To test whether it worked

  • Click A Button in the output window.

The green graphic should toggle off.

9. Set up the other three buttons

Repeat steps 3-8 to set up the other three buttons and their corresponding graphics.

If you want to specify the cursor type your viewers see while interacting with the output, see the Mouse Pointer event property setting.

When you add events to a composition, make sure the bounding box is tight around the area you want as a button. When an event is added to a widget, the corresponding bounding box will control the overlay.

10. Output the overlays using an embed code

When outputting interactive overlays, you must use Singular embed codes on your website. If you output via the standard process of combining overlays with your video production software, the overlays won't be interactive.

How to open a new app template
Downloading the Interactive Example template
Selecting the mainBase widget
Adding a "mouse down" event
Deactivating the composition script tool
Activating the event
Selecting the composition A graphic
Selecting Toggle mode
Testing interactivity in the output window