Creating Interruptive Modals

Use interruptive Modals 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 interruptive Modals!

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 interruptive Modals!


Understanding Modal Controls

Component:

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

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

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

Styles

Element Alignment

  • Use Element Alignment to position your Modal on your page - do you want it in the middle, bottom right corner, 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 Modal more rounded!

Border Width and Color

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

Backdrop color

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

Interactions

Using a Button to dismiss your Modal

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


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

Did this answer your question?