With Cards, you can create ongoing guidance without fearing your messages might cover other interface components or interrupt users' experience.
Embed up to 4 content blocks anywhere in your app, each with specific content, media, and CTA's that can launch other Tours, Microsurveys, or more dynamic "Actions". Prompt users to deepen their product knowledge and learn more when ready.
Availability & Usage
🔐 Startup: 5 Embeddables
🔐 Growth & Enterprise: unlimited Embedabbles
✚ Pair well with additional Actions
What are Cards?
Cards are embeddable blocks of content that you can place anywhere in your UI and use to drive discovery, adoption, and retention in a non-intrusive way. With Cards, you can help users discover your product, gather feedback, or promote events and content without impacting the user experience.
They are always-on-display messages that appear to users based on the audience you pick and different display rules you set.
For each Card, you can configure:
its Title and Body content
specific media
the Dismiss option
dynamic button Actions
ℹ The Canvas color applies to all 4 Cards. You can style buttons independently on each Card and add Custom CSS to tweak the style of your Cards.
ℹ The Dismiss for Cards does not support "snoozing"; if you add the Dismiss component, users will exit your Card and will not see it again unless you have Recurrence set.
Use cases
You can use Cards for ongoing guidance and promotion without asking users to pick between completing goals or missing out on your guidance. Here are a few examples of how you can use Cards:
to create a visible, self-serve onboarding with key steps users have to complete;
teach users about product enhancements or features by embedding Cards on specific product pages;
to create an ongoing communication section in your product, where you can promote events, share content, or invite users to Betas;
to help users maximize the use of their plan by highlighting unused features.
💡 You can combine Cards with other Chameleon Experiences and resources to help users explore your product in a non-intrusive way.
How do I create a Card?
Start creating your Card from the Dashboard and use the Chameleon Builder to configure it onto your application.
From the Chameleon Dashboard pick Embeddables from the left-side menu and hit the "+ Create an Embeddable" button. Next, pick the "Cards" type and follow the steps in the Dashboard to go live.
👉 You can also create new Cards from your Homepage -- just click the "+ New Experience" button in the top-right corner and under Embeddables, pick Cards.
Build your Card
Next, you'll choose a Template or start from a blank canvas to build your Cards. After you pick the style, specify the URL you want to open the Builder on. Once the Builder opens, you can configure different aspects of each individual Card.
You can set the number of Cards you want to use from the Builder and adjust the configurations on each one.
Simply select the Card you want to edit by clicking into a component (e.g. body, button), or on the whole Card. You can easily keep up with the Card you are currently editing from the Builder Navbar.
ℹ Cards' width is dynamic to create a better user experience as users exit or complete Cards. If you add media, the visual will follow the same rules. If you want a fixed media height, use the Pixel option. If you use the % option, with wider screens the media height will increase too.
You can also configure a "Card Click" that acts as an "additional Action" to launch a Tour, doc, prototype, or other link when users click on the card directly.
ℹ If you set a "Card Click" any button or media Actions will be overridden.
From the Builder, you can also further control the page where your Cards should appear with URL and Element Rules.
Choosing an Environment
If you have your Environments set, next you can choose where you want your Cards to show up, out of multiple domains and subdomains. This is very useful when you have staging and production environments. Or when you have multiple web pages that cater to different audience groups.
By default, your Cards will appear on all domains where Chameleon is installed, but you can pick specific Environments from the dropdown.
👉 Read more about managing Experiences across different Environments.
Pick the audience
Next, you will have to select the audience that you want to display your Cards to. You can combine multiple Segments that you create in Chameleon, and use the AND/OR logic to define the right audience.
ℹ You can create Segments using the data you send to Chameleon, the default Chameleon data, or any data received from integrations.
Choose a recurrence
Next in the Dashboard, you can also pick how often your Cards should repeat after being exited or completed by users. You have multiple recurrence options you can pick from the dropdown.
ℹ Recurrence applies to each individual Card in the stack.
Testing
👀 Control Testing Coming Soon!
Go live
When you're done building your Cardsr and you're ready to go live, you can choose to:
Publish immediately: Cards are immediately live for all targeted users
Schedule publishing: set a date and time for the Cards to start being displayed
Set end date: set a date and time for the Cards to stop being shown to your users; they will switch to a "Draft".
💡 If your Cards aren't showing up as expected, use the Debugger console tool to see detailed information about their configurations and solve the issue.
Whenever you want to make changes to live or drafted Cards you can easily do so, just make sure you apply your edits so users get to see the final version too.
👉 Learn more about the ways you can review changes for live Experiences.
Analyzing Cards data
Once you have live Cards, Chameleon will collect data on how users engage with them. You can then view the results in your Chameleon Dashboard or within your analytics integrations.
👉 Read this article to know which data Chameleon collects and learn more about analyzing your Experiences' performance.