Create a Pop-up (window)

pop-up

Want to make it pop? The Pop-up (window) component allows you to display more information on a state as it's playing. You can use it to get users to switch to a full-screen display, to give them information tied to a specific element or for any other use you may think of!

 

1. Editing the pop-up (window)

Click on the Pop-up icon in the Component menu and find all options in the Properties window.

pop-up-properties.png

  • Edit pop-up: your pop-up is made of states. By clicking on this button, you can create and manage different states (also available by double-clicking on this component). You can add an independent state or a dependent one. Not sure what a state is? Read create animations with states.
  • User interaction: this option allows your user to enjoy all the features of this component (here, automatically launch the pop-up). By default, this option is always checked. If you uncheck this option, your users won’t be able to see the pop-up launch automatically.

  • Background: lets you define a background color

  • Options: to configure the Background blur and its radius.

  • Default state: use this to select the state that will be displayed when the pop-up loads. If you don't define anything and you return to the pop-up, it will continue to show the state that was last displayed.

 Note: for now on, a pop-up window is displayed only in full-screen mode. But we’re fine-tuning this to let you choose how big you want it and where you want it to appear – stay tuned!

 

2. Creating interactivities

By default, this pop-up is automatically opened when the user taps the transparent zone: it's that simple! And it's closed when the user taps the screen again (no need to define a specific interactivity).

However, based on our users' feedback and to make things easier for those not 100% familiar with tablets, we recommend you also insert a cross at the top-right of the window and make it interactive, associating a Single Tap trigger with the action Define actions on a component(pop-up) / Close pop-up.

If you haven’t learned about actions on components yet, check out the article Create an interactive action.

Exception: if you've inserted an HD Zoom component in the pop-up, then it won’t be able to close automatically, because your user actions will be impacting the image, not the pop-up. 
To close it, you'll need to create a specific action associated with the closing action (see above).

Was this article helpful?
0 out of 0 found this helpful

Create today your interactive content

Easy-to-use ∗ Free ∗ No installation

START NOW!