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

Before you create buttons, you have to establish where the button is going to be on your screen and what the button is supposed to do. To design 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 which will give out an aquarium image when clicking the button.

1. Go into your OnSign account and create a Composition with a blue background and an orange area where the button is going to be.

   

2. Next, create a new Campaign with one single Timeline. Add the previously created Composition into the Timeline.

   

3. "Save" the Campaign.
4. The page reloads. Go to the Triggers and Interactivity menu of the Campaign.

   

5. Add a Trigger. The name is optional. Click the + button in the When row and select Touch region. 

   

6. The screen region page will open. Choose Custom Region and draw the screen region over the space you have selected for the button. Confirm with the orange “Select” button on the bottom right.
   

   

7. You will get back to your trigger settings. Fill out the rest of your interactivity trigger:
   

   

• Name: button
• When: Touch Region “Custom Region”
• Action: Play “Aquarium.jpg” in “Playing Loop” for 10s

8. Click on the check mark to the right.
9. Last but not least, publish your Campaign to a Player.

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

Interactive Button for OnSign Player App versions prior to 10.0.0

For player app versions before 10.0.0, you will have to use the legacy interactivity editor. 

After having created the interactive button composition just like above, you can start with creating a Campaign. It will have two timelines. This is the big difference to the procedure from above. 

1. Create a new Campaign. Name the Campaign. Then create a new Custom Layout which 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.
   

   

2. Add the Composition into the large Timeline 1. For Timeline 2, we use a transparent png image. The image of the Aquarium we want to display at the click of the button will come later.
   

   

3. “Save” the Campaign.
4. The page reloads. Go to the Triggers and Interactivity menu of the Campaign. Click on the link at the bottom-right of the page to get to the legacy interactivity editor.
5. This is the last step where you set the rules for the interactive button. Click on "Add Interaction" and fill out the fields as follows:
   
   • Name: aquarium
     This is just for yourself so that you know what is going to happen.
   • 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 in 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
6. Click on the check mark and "Save". You are finished and can publish the Campaign.