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...