Rich Media Cards

What Are Rich Media Cards?

Rich media cards are structured, interactive UI components embedded within chat streams, enabling delivery of compelling multimedia content and actionable elements directly inside conversations. Unlike plain text messages, rich media cards bundle images, GIFs, videos, titles, subtitles, and buttons—offering users visually engaging and actionable experiences. These cards function like mini landing pages within chat, capable of driving actions, collecting information, and enhancing both usability and conversion rates.

Rich media cards transform conversational interfaces from simple text exchanges into dynamic, interactive experiences supporting product discovery, lead generation, customer support, booking, surveys, and content delivery across web chat, social messaging platforms, and enterprise solutions.

Anatomy of Rich Media Cards

Rich media cards comprise several standard components serving functional and visual purposes:

Media Element: Images (JPEG, PNG, GIF), animations, videos (MP4, M4V, WebM), or PDFs (platform-dependent) attracting attention, illustrating products, or adding character

Thumbnail: Custom or default icon preview for media files, especially larger files or PDFs, optimized under 100 KB for fast loading

Title: Headline or main label, typically up to 200 characters (platform-dependent), concise and informative

Subtitle/Description: Supporting text, often up to 2,000 characters, providing context, benefits, or call-to-action information

Action Buttons: Clickable elements triggering actions—web navigation, postbacks, phone calls, downloads—with limits varying by platform

Suggested Replies: Predefined user responses as chips or buttons, steering conversation down optimal paths

Optional Interactive Elements: Carousels (scrollable card groups), forms (data capture), quick replies, list pickers, custom payloads

How Rich Media Cards Work

Conversational Engagement

Rich media cards enhance chatbot interactions by making conversations more actionable, expressive, and visually appealing.

Common Use Cases:

Product Recommendations: Showcase product imagery, pricing, “Buy Now” buttons for streamlined purchasing

Lead Generation: Embed forms capturing user details within chat for frictionless data collection

Customer Support: Present step-by-step troubleshooting guides with actionable “Did this help?” buttons

Booking/Scheduling: Display available time slots or services as cards with instant booking buttons

Surveys & Feedback: Request ratings, comments, or selections directly through card elements

Interactive FAQs: Navigable help topics with expandable/collapsible cards for browsing support content

Multi-Platform Support

Rich media card support varies across messaging platforms:

Web Chat Widgets: Full card, carousel, and form support; customizable layouts (Intercom, Drift, Kommunicate)

Social Messaging:

• Facebook Messenger: Card templates, carousels, quick replies, up to 10 cards per carousel
• WhatsApp: Limited list and button templates (no carousels), up to 3 buttons per message
• Apple Business Chat: Advanced card types, Apple Pay, forms, list pickers
• Telegram, Viber, Slack: Varying support for cards, buttons, and media

Enterprise Solutions:

• Microsoft Dynamics 365, Salesforce: Adaptive Cards (JSON-based), carousels, custom data collection
• Custom APIs: Programmable payloads and UI rendering

Technical Implementation

Card Structure (JSON)

Rich media cards are typically defined in structured formats like JSON:

Example Product Card:

{
  "type": "card",
  "title": "Wireless Headphones",
  "subtitle": "Noise-cancelling, 20h battery life",
  "image_url": "https://example.com/img/headphones.png",
  "buttons": [
    {
      "type": "web_url",
      "title": "Buy Now",
      "url": "https://example.com/buy/headphones"
    },
    {
      "type": "postback",
      "title": "More Info",
      "payload": "INFO_HEADPHONES"
    }
  ]
}

Carousel Implementation

Carousels present multiple cards horizontally for product discovery or option selection:

Example Carousel:

{
  "type": "carousel",
  "cards": [
    {
      "title": "Product 1",
      "image_url": "https://example.com/img/p1.png",
      "buttons": [...]
    },
    {
      "title": "Product 2",
      "image_url": "https://example.com/img/p2.png",
      "buttons": [...]
    }
  ]
}

Supported Card Types (Microsoft Bot Framework)

HeroCard: Large image, text, and buttons

ThumbnailCard: Smaller image, text, and buttons

AnimationCard/VideoCard/AudioCard: Embedded media playback

ReceiptCard: Structured receipts with items, prices, totals

SignInCard: OAuth or third-party authentication flows

AdaptiveCard: Highly customizable cards with rich UI elements, layouts, forms

Platform-Specific Constraints

Implementation Notes:

• Compress images and videos for mobile performance
• Respect platform-specific character limits
• Test interactivity across devices and channels
• Use analytics for button clicks, card views, user actions

Key Benefits

Higher Engagement

Rich media cards consistently outperform text-only messages:

• Image-rich conversations drive 2–3x higher engagement
• Visuals and buttons capture attention and encourage interaction
• Frictionless: users act with single tap (buy, book, reply)

Improved Conversion Rates

• Chatbots with rich media deliver up to 85% higher conversion rates versus text-only bots
• Interactive forms, carousels, CTAs streamline user journey and reduce drop-off
• Direct action buttons eliminate navigation friction

Enhanced Brand Experience

• Cards reinforce brand identity through custom images, colors, tone
• More memorable and enjoyable, leading to higher brand recall
• Humanizes chatbot with GIFs, emojis, or video personality

Operational Efficiency

• Reduces customer support workload by guiding users to self-serve answers
• Standardizes responses ensuring consistency and accuracy
• Automates routine interactions freeing agents for complex issues

Advanced Tracking

Rich media cards enable comprehensive analytics:

• Button click-through rates
• Card view counts
• Drop-off points and funnel analysis
• Goal completion rates
• User engagement patterns

Real-World Applications

E-Commerce Product Discovery

Implementation: Messenger bot sends carousel of bestsellers with product images, prices, “Buy Now” buttons

Results: Streamlined browsing and purchase boost conversion, reduce cart abandonment

Lead Generation

Implementation: Website chatbot presents service carousel with “Inquire” buttons, captures contact info in-chat

Results: Frictionless data capture increases lead volume and quality

Customer Support

Implementation: Bot presents troubleshooting steps as cards with “Did this help?” buttons

Results: Reduces agent workload, increases resolution speed, improves CSAT

Appointment Booking

Implementation: Bot displays available time slots as cards; user taps to confirm

Results: Simplifies scheduling, reduces abandonment, increases bookings

Content Delivery

Implementation: Media bot sends news articles as cards with thumbnails, headlines, “Read More” buttons

Results: Increases content consumption and engagement

Best Practices

Design and Content

Prioritize Clarity: Limit cards per carousel (3–10 depending on platform), use concise text, high-quality images

Optimize Performance: Keep images/videos under 1MB; prefer 50–100KB for thumbnails; host on fast CDNs

Mobile-First Approach: Ensure buttons are large and touch-friendly; avoid dense layouts

Action-Oriented Buttons: Use clear, specific CTAs (e.g., “Book Now”, “Get Quote”); limit to 3–5 actions per card

Personalization: Tailor card content based on user context, history, or preferences

Accessibility and Testing

Add Accessibility: Descriptive alt text for images; screen-reader friendly button labels

A/B Testing: Experiment with card order, visuals, messaging; iterate based on real usage

Cross-Platform Testing: Verify formatting and functionality across all target platforms

Analytics and Optimization

Track Comprehensively: Card impressions, button clicks, drop-offs, goal completions

Use Dashboards: Funnel visualization for optimization; identify bottlenecks

Segment Analysis: Compare performance across user segments, channels, time periods

Brand Consistency

Visual Standards: Use brand-approved colors, logos, typography

Tone Alignment: Ensure messaging matches brand voice

Quality Control: Regular content reviews and updates

Common Pitfalls to Avoid

• Overloading cards with text or too many buttons
• Neglecting image optimization causing slow load times
• Using generic or irrelevant visuals
• Ignoring platform-specific limits and constraints
• Inconsistent branding across cards
• Missing analytics implementation

Analytics and Measurement

Key Performance Metrics

Total Users: Unique users interacting with bot

Active/Engaged Users: Users beyond welcome message interaction

Card Views: Times card displayed to users

Button Clicks/CTA Engagement: Click-through rate for each action

Drop-Off Rate: Points where users abandon conversation

Goal Completion Rate: Percentage completing desired action

Self-Service Rate: Issues resolved without human intervention

Deflection Rate: Inquiries handled by bot reducing human workload

CSAT/NPS: Customer satisfaction scores from survey cards

Optimization Strategies

Funnel Analysis: Track user movement through carousels/cards, identify drop-off points

Content Optimization: Refine images, titles, CTAs based on card-level analytics

A/B Testing: Experiment with card order, button placement, CTA wording

Personalization: Leverage analytics to segment users and deliver targeted cards

Platform-Specific Resources

Google RCS Business Messaging: Rich card capabilities, media formats, implementation guides

Microsoft Bot Framework: Card types, channel support matrix, adaptive card designer

Facebook Messenger Platform: Template documentation, carousel implementation

WhatsApp Business API: Message templates, button limitations

Apple Business Chat: Advanced features, Apple Pay integration

Frequently Asked Questions

What’s the difference between rich media cards and standard messages?
Standard messages are plain text. Rich media cards include images, videos, carousels, buttons enabling interactive, visually engaging experiences.

Do I need design skills to create rich media cards?
Most chatbot platforms offer visual builders with drag-and-drop card creation. Minimal design skills needed, though attention to clarity and branding important.

Will rich media slow down my chatbot?
Optimized images and videos (preferably under 1MB) prevent slowdowns. Compress all media; use CDN hosting for large files.

Can I track user interactions with rich media cards?
Yes. Most platforms provide analytics for button clicks, card views, drop-offs, goal completions.

Are rich media cards supported on all messaging apps?
Support varies by platform. Web chat, Messenger, Apple Business Chat offer robust support; WhatsApp and SMS have limited capabilities.

How do I choose between carousel and single cards?
Use carousels for product discovery, comparisons, or multiple options. Single cards work better for focused actions or detailed information.

What’s the optimal number of cards in a carousel?
3–10 cards depending on platform. Fewer cards (3–5) typically perform better on mobile.

References

• Google RCS Business Messaging: Rich Cards
• Microsoft Bot Framework: Add Rich Card Attachments
• Sprinklr: Chatbot Analytics
• Tars: Improve Chatbot Conversion Rate Using Rich Media
• Kommunicate: Best Chatbot Practices
• Quickchat: Chatbot Analytics Deep Dive
• Adaptive Cards Designer
• Facebook Messenger Platform Templates
• WhatsApp Business Messaging Templates
• Sendbird: What is Rich Media?
• Madgicx: Rich Media Ads
• Conferbot: Rich Media Features