Designer Courses / Getting Started

Interactions and Hotspots

In this lesson, we are going to explore how to set up Hotspots and Interactions in a Ceros experience. Hotspots are the area a user can interact with, and interactions are what happens when the user interacts with that hotspot. For context, we are going to use a semi-finished experience which has a bunch of assets and buttons laid out for you already. We have outlined the basic steps to create the interactions in this experience below, however, for additional context be sure to check out the video lesson above.

Page 1 – Toggle Interaction

  • Select the “On Click Button” folder
  • Draw a hotspot over top of the “On Click” button and rename it “Toggle Mountain Folder”
  • Navigate to the interactions panel and apply:
    • “On Click” Trigger > “Toggle” action > “Mountain” folder as the target
    • Click “Add”
  • Ensure the visibility of the entire “Mountain” folder is toggled off

On click toggle content

 

Page 2 – Show & Hide Content

  • Select the “Show Button” folder
  • Draw a hotspot over top of the “Show” button and rename it “Show Mountain Popup”
  • Navigate to the interactions panel and apply:
    • “On Click” Trigger > “Show” action > “Mountain Popup” folder as the target
    • Click “Add”
  • Select the “Mountain Popup” folder
  • Draw a hotspot over the “X” icon and rename it “Hide Popup”
  • Navigate to the interactions panel and apply:
    • “On Click” Trigger > “Hide” action > “Mountain Popup” folder as the target
    • Click “Add”
  • Ensure the visibility of the entire “Mountain Popup” folder is toggled off

 Show hide content

 

Page 3 – Lightbox URL

  • Select the “On Click Button” folder
  • Draw a hotspot over top of the “On Click Button” and rename it “Lightbox URL”
  • Navigate to the interactions panel and apply:
    • “On Click” Trigger > “Open URL in Lightbox” action > “www.ceros.com” as the URL target
    • Click “Add”

 Lightbox URL

 

Page 4 – Go to URL

  • Select the “On Click Button” Folder
  • Draw a hotspot over top of the “On Click Button” and rename it “Go to URL”
  • Navigate to the interactions panel and apply:
    • “On Click” Trigger > “Go to URL” action > “www.ceros.com” as the URL target
    • Toggle “Opens in new window” to “On”
    • Click “Add”

Go to url

 

Page 5 – Fullscreen

  • Select the “On Click Button” Folder
  • Draw a hotspot on top of the “On Click” button and rename it “Go Fullscreen”
  • Navigate to the interactions panel and apply:
    • “On Click” Trigger > “Fullscreen” action
    • Click “Add”

 

Page 6 – Rollover Button

  • Select the “Hotspot” Folder
  • Draw a hotspot on top of the “Off” button and rename it “Show Popup”
  • Navigate to the interactions panel and apply:
    • “On Hover” Trigger > “Show” action > “On Button” as the target
    • Click “Add”
    • Add an additional interaction to same hotspot of “On Click” > “Show” action > “Mountain Popup”
  • Select the “Mountain Popup” Folder
  • Draw a hotspot over top of the “X” icon, and rename it “Close Mountain Popup”
  • Navigate to the interactions panel and apply:
    • “On Click” Trigger > “Hide” action > “Mountain Popup” Folder as the target
    • Click “add”

 

 

If you have any questions or comments during this build, be sure to reach out to us in the chat widget and we’ll be happy to help.

Interactions and Hotspots