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.
👇 Check out an interactive demo of building Embeddable Cards.
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 the different display rules you set.
For each Card, you can configure:
its title and body content
specific media
the Dismiss option
dynamic button Actions
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 Cards?
Start creating your Cards 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 Cards
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.
Canvas settings (padding, color, background style, border, etc.) are shared between Cards; you can update an individual Card in the set or apply changes to all Cards. In the Canvas panel, you can switch between editing all Cards or a specific Card.
Adjusting the Media position
You have multiple options to choose how to position an image or video in your Cards. In the Media panel, you can choose the Media to be positioned relative to the:
Body -- top, bottom, left, right
Canvas -- top left, top right, top, bottom, left, right
ℹ For some of the Canvas options (top, bottom, left, right), you can also set the image ratio and whether it should be full-width. The "auto" image ratio option respects the aspect ratio of the image, while the "cover" option will fill the media container. Full-width will show the image across the whole container, and if the full-width option is disabled, it will respect the Canvas padding.
ℹ For top and bottom positions, you can control the media height, and for left and right positions, you can control the media width.
You can customize other aspects of your Cards' Canvas to ensure a perfect fit or create a custom layout:
the gap between multiple Cards in a set
Cards' width (including setting the max/min width)
ℹ Cards' width is dynamic to create a better user experience across different screens. 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.
ℹ You can disable individual Cards from the Dashboard and Builder -- this will "hide" your Card from the set while retaining its content and configurations. You can enable it anytime without having to start from scratch again.
You can also reorder individual Cards from your Dashboard with a simple drag and drop. The newly updated order will be reflected in the Builder.
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 should see your Cards. 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 a set.
Testing
👀 Control Testing Coming Soon!
Go live
When you're done building your Cards, 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.