Skip to main content

How to Create Desktop and Mobile Versions of the Same Message

Learn how to build and customize desktop and mobile versions of your Triptease Message using the Creative Builder.

Updated this week

Overview

Creating separate mobile and desktop versions helps you tailor content, design, and behavior to each experience. You’ll learn how to:

  • Choose the right message template

  • Toggle and edit device-specific versions

  • Customize layout, placements, and styles per device

  • Preview and test your message before launching

Step-by-Step Instructions

1. Choose your template

  • Click More details to view supported devices.

  • Select a template optimized for both desktop and mobile.

  • Click Use template to get started.

2. Toggle between devices

  • Use the mobile and desktop icons at the top of the Creative Builder to switch views.

3. Turn off device sync (important)

  • Go to Settings → Sync devices.

  • Disable sync if you want different content or layouts on each device.

Note: When sync is on, changes apply to both versions.

4. Set message placement per device

  • Adjust settings like placement or behavior independently:

    • Desktop: Center placement

    • Mobile: Bottom placement

5. Edit the mobile version

  • Use the mobile view to make layout changes:

    • Rearrange or remove elements

    • Resize the container

    • Adjust spacing or font size

  • Can’t click an element? Use the sidebar content tree to select it.

  • Always click Save before previewing.

If the mobile version doesn’t fill the screen:

  • Go to Styles → Size

  • Set Width = Full

  • Click Save again

6. Add to campaign

  • Once both versions are complete, click Add to campaign.

7. Preview the message

  • Click the eye icon and enter your webpage URL.

  • The desktop version loads by default.

8. Preview on mobile using Inspect tool

On Mac (Safari/Chrome):

  1. Right-click the page → Inspect

  2. Click Toggle device toolbar

  3. Refresh the page (⌘ + R)

On Windows (Chrome/Edge):

  1. Right-click the page → Inspect

  2. Click Toggle device toolbar

  3. Refresh the page (Ctrl + R)

Tip: If the preview doesn’t switch correctly, refresh again.

9. Save and exit

  • When everything looks right, click Save and exit.

10. Finalize targeting and campaign settings

  • Set your targeting, triggers, and frequency in Refine Targeting

  • Give your campaign a name and set start/end dates.
    ​

11. Launch your campaign

  • Click Publish to go live.

Pro Tips

  • Always preview on both devices before publishing.

  • Keep mobile designs concise - less space means fewer distractions work best.

FAQs / Troubleshooting

Q: Why do changes apply to both desktop and mobile?

A: Device sync is likely still enabled. Go to Settings → Sync devices to turn it off.

Q: My message doesn’t fill the mobile screen. What should I do?

A: Set Width = Full in Styles → Size for the mobile version.

Q: How do I test a message without launching it?

A: Use the Preview tool with a live webpage URL and the browser’s Inspect mode to simulate mobile.

Did this answer your question?