Creating Buttons and Popups

With Ceros, you can reveal additional content when a user takes an action in your experience. To get started with this lesson, go ahead and upload the build-along experience to your account.

As you can see in this final experience, we have a simple button object that changes color when you hover over it – and changes back when you mouse away. To create this effect, we’re actually just showing and hiding certain layers when the user takes an action.

To start, make a copy of the “off button” group – which is made up of a square shape and text – and rename this duplicate “On button”. To get the effect we want, let’s change the square shape in this group to be white, and the text to be a darker blue color.

Make sure the visibility of the “on button” is toggled off by default, and now we’re ready to create the interaction.

  1. Specify where the user can interact by drawing a hotspot on your canvas. Be sure this hotspot is sitting above all of the other layers in your layers panel to ensure it’s not accidentally covered up.
  2. With the hotspot still selected, let’s apply an interaction trigger of ‘On Hover’, with a Show action, and the “On button” group as the target. Hit save.  
  3. Preview your experience and observe how when you hover over the button hotspot, the on group toggles on – and when we mouse away – the button group turns off.

Now we can build off of this button to add an On Click option to show a popup group. Make sure that your popup image’s visibility is turned off by default, and then select the button hotspot.

Click on the interact tab and the plus icon to add a new action. Apply an “On Click” trigger with a “Show” action, and then choose “Popup group” as the target.

To give your user a way to exit the window, turn the visibility of the popup group back on, and add a hotspot over the “Close” icon. On this hotspot we can apply an interaction that says “On Click”- “Hide”- “Popup group”.

Once you’ve finished, go ahead a turn off the visibility of the popup and then navigate back over to your preview to see if your effect works as intended.

Lastly, let’s take a look at the difference between the Go to URL and Open URL in Lightbox interactions. Be sure to download the build along experience to your account.

On the build along experience, select the hotspot on page 1 and navigate to the Interact tab. Choose an “On Click” trigger and “Go to URL” as the action. Here you can enter any URL that you want to link to.

The second option keeps your users within the Ceros experience, so go ahead and set up the interaction the exact same way, but choose Open URL in Lightbox as the interaction.

Taking a look at the preview, you can see how both of these actions can fit the different needs of your content. If you have any questions on the interactions in this lesson, please feel free to reach out via the support chat within Ceros.