We appreciate that you only sometimes 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 create Candu content such as a card, image, or button and trigger an overlay to appear after a user interacts with/clicks the Candu component. This is a great opt-in UX for users, as they can get all the information they need without having to leave your product.
Some use cases for click-to-trigger overlays
Nesting in-app help content such as videos, FAQs, or tutorials without a user having to leave your product ✅
Nesting onboarding checklists or getting started content ✅
Nesting feedback forms or surveys ✅
Offering calls or demo booking forms ✅
Adding release notes or product updates ✅
Overview of Overlays (Video)
For a quick overview of Overlays, please take a look at this short 3-minute introduction.
Building an overlay triggered from a Candu CTA
Firstly, you'll need to decide what kind of experience you would like to create to trigger an overlay to appear. Overlays can be triggered from:
Cards
Buttons
Images
Then, you're ready to begin creating 🚀
You have to create your embedded content first as Inline content:
In this example, we'll use this banner below:
Your second content will need to be created as an Overlay:
In this example, we'll have the overlay contain the video below:
➡️ Deep dive into creating your pixel-perfect overlay here!
ℹ️ Please note that you can set the size of your overlay. If no size is set, it will automatically default to 640 px width.
Once you have published your overlay content, you can set it up to trigger from your banner! All you need to do is go to your banner content > select the image > head to Interactions > Select Trigger a Overlay > and then select your overlay from the dropdown:
ℹ️ Please note that you cannot currently preview click to trigger overlays via the Candu Chrome Extension but you can preview via the Share link before making your content live!
... and voilà
If set to be dismissible, your users can click the dismissible X in the overlay or click anywhere outside of the overlay to exit it.
We capture this as a User Event. You can then use this data to personalize content, for example, after a user sees an overlay they don't want to see anymore, you could create a segment for users who have seen it and show them something else or nothing.
If you have any questions, please feel free to reach out! We'd also love to see any of your finished designs 😍