Skip to main content

Creating Overlays

Use overlays to drive activation, adoption, self-serve education, and more! Trigger them on page load or from Candu CTAs.

Flora Sanders avatar
Written by Flora Sanders
Updated over 10 months ago

When to use an Overlay

We appreciate that sometimes...

  • You need to be able to shout out about new features, events, and general updates.

  • You need a way to grab their attention during onboarding.

  • You need to be able to block users from your product or premium features until they upgrade.

  • You don't always have the space to embed content like videos, forms, or extra information onto a specific page in your product

So, we built overlays!

You can display content in an overlay on top of your product rather than embedded in-line. You can make them any size or shape and place them anywhere on the page! Plus, you can trigger them from Candu CTAs.

➡️ Need inspiration for what to create? Check out this article on use cases for overlays!


Understanding Overlay Controls

Component

  • Choose whether you want your overlay to be dismissible or not > Select your overlay, head to Component in the toolbox, and make it dismissible!

If your overlay is dismissible, users can click on the 'X' button on a button set to dismiss the overlay or anywhere on their screen - these will be tracked as User Events.

  • Choose whether you want to Hide the Backdrop, e.g., turn your overlay into a Pop-up, and let users interact with the screen behind!

Styles

Element Alignment

  • Use Element Alignment to position your overlay on your page—do you want it in the middle or bottom right corner? There are so many choices!

Overflow

  • Use our Overflow feature to choose whether to show content that "spills over" or hide it:

  • You can enable scroll when the content is longer than the space allows:

Border Radius

  • You can add a border radius to make your overlay more rounded!

Border Width and Color

  • You can add a border width to your overlay and change the color!

Backdrop color

  • Set a backdrop color - make sure you set an opacity, or it will default to a block color!

Overlay Interactions

Using a Button to dismiss your overlay

  • You can set your overlay to dismiss from a button click > add your button and get the interaction to be Dismiss Overlay 🙌


Now that you know what options are available for building overlays, do you want...

Did this answer your question?