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 a week ago

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 that sits on top of your product, rather than embedded in-line in your product. 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


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

Note: If your overlay is dismissible, users can click on the 'X', 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 oveerlay into a Pop-up, where users can interact with the screen behind!


Element Alignment

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


  • 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!


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?