How to create interactive buttons

Allow your audience to interact with your campaign at the touch of a button.

*Supported on OnSign TV App for Android 4.2.0+ and Windows App 9.1.1+

Before you create buttons, you have to establish where the button on your screen is going to be and what the button is supposed to do. For designing the image with the button, you can use the Composition creator.

Let's walk through a very easy scenario where you just want to have one button on screen that will give out an aquarium image at clicking it.

  1. Go into your OnSign TV account and create a composition with a blue background and an orange area where the button is going to be. campaign button
  2. Next, create a new Campaign. Name the Campaign and then create a new screen layout that matches the composition you have designed. We have the background area (A) and the button zone (B). The more accurate you are with the position the better. interactive button layout
  3. Now, we add the composition we previously created into the Timeline in area A. For area B, we use a transparent png image. In the Timeline, you will not add the image of the aquarium we want to display at the click of the button interactive button timeline
  4. "Save and Publish" the Campaign.
  5. On the newly loaded page "Publish to These Players", click on interactivity. interactive button interactivity
  6. This is the last step. You need to set the rules for the interactive button. Click on "Add Interaction" and fill out the fields as follows:
    • What: Touch region

      We want the touch of the button to provoke the image change.

    • Which one: Region 2

      This is our button.

    • Action: Replace

      When the button is clicked a new image will display.

    • Destination: Region 1

      The image will be displayed on the main screen area (A).

    • When playing: Any media

      Since we only have one item in area B in the timeline, any media is fine.

    • With media: our Aquarium image
    • Duration: For as many seconds as you like
    • interactive button interactivity rules
  7. Click on the check mark and "Save". You are finished.

Once, you have mastered setting buttons, there are many other fun things you can do with interactivity.

Read also:

How to create an interactive campaign

How to create interactive menus

How to create expanded interactive menus

How to create a carousel slider for photos