How to Embed Messaging Mockups on Your Website

Embedding messaging mockups on your website lets visitors see your product in action without leaving the page. Mock DM's embed feature creates interactive, animated conversations that play directly in your site—perfect for product demos, testimonials, case studies, and landing pages.

Embedding is available on Pro plans (Monthly or Lifetime). Free users can create and export images, but website embeds unlock with a subscription.

Why embed instead of exporting images?

• Interactive: Visitors can watch the conversation animate on your page
• Always up-to-date: Update the mockup in Mock DM and the embed reflects changes automatically
• Better engagement: Animated conversations capture attention better than static screenshots
• Professional: Shows your product in a realistic, native context
• Customizable: Control autoplay, playback speed, and timing

How to create an embed

1. Build your mockup: Create your conversation in Mock DM—select platform, add messages, set timestamps, and customize appearance.
2. Click "Embed in website": Find this button in the export options (Pro feature).
3. Configure settings:
   • Autoplay: Toggle to start animation automatically when the page loads
   • Playback speed: Adjust from 0.25x to 3x to control animation timing
4. Copy the iframe code: Mock DM generates a ready-to-use iframe snippet with your settings
5. Paste into your site: Add the iframe code to your HTML where you want the mockup to appear

Embed configuration options

Autoplay

Enable autoplay to start the animation immediately when the iframe loads. This works well for hero sections and landing pages where you want immediate visual impact.

Playback speed

Control how fast the conversation animates:

• 0.25x–0.5x: Slow, dramatic reveals for important moments
• 1x: Natural conversation pace (default)
• 1.5x–2x: Faster pacing for quick demos
• 2.5x–3x: Very fast for quick previews

Query parameters

You can also control these settings via URL parameters:

• ?play=1 - Enable autoplay
• ?speed=1.5 - Set playback speed (e.g., 1.5x)
• Combine: ?play=1&speed=2 - Autoplay at 2x speed

Best practices for embedded mockups

Placement

• Hero sections: Use autoplay for immediate engagement
• Product pages: Show your app's messaging features in context
• Testimonials: Display customer conversations with realistic timing
• Case studies: Embed mockups that demonstrate specific use cases

Timing

• Keep conversations concise: 10–20 messages work best for embeds
• Space timestamps realistically: 1–5 minute gaps feel natural
• Front-load the hook: Make the first few messages compelling

Design

• Match your site's theme: Use dark mode for dark sites, light mode for light sites
• Consider responsive sizing: The iframe adapts to container width
• Test on mobile: Ensure the mockup looks good on all screen sizes

Example use cases

Product demos

Embed a conversation showing your app's key features in action. Use autoplay and moderate speed (1x–1.5x) so visitors can follow along.

Social proof

Display realistic customer conversations or support interactions. Keep these short and impactful—5–10 messages that tell a clear story.

Marketing pages

Use animated mockups in hero sections to immediately show what your product does. Autoplay works well here to grab attention.

Documentation

Embed mockups in help docs to show users exactly what they'll see in your app. Slower speeds (0.5x–0.75x) help users read along.

Technical details

The embed uses an iframe that loads your mockup from Mock DM's servers. The iframe is:

• Responsive: Adapts to your container width
• Transparent background: Blends seamlessly with your site
• Lightweight: Fast loading with minimal impact on page performance
• Secure: Served over HTTPS with proper sandboxing

Troubleshooting

Embed not showing?

• Check that you're using a Pro account (embedding is a premium feature)
• Verify the iframe code was copied completely
• Ensure your site allows iframes (some security policies block them)

Animation not playing?

• Check autoplay settings in the embed dialog
• Verify playback speed is set correctly
• Some browsers may block autoplay—visitors can click to play manually

Size issues?

• Adjust the iframe width/height attributes in the code
• Use CSS to control container dimensions
• Test on different screen sizes

Ready to embed? Create a mockup and get your embed code in Mock DM. Upgrade to Pro to unlock website embedding along with watermark-free exports, unlimited messages, and access to all platforms.