Merlin AI In-App Template Generator

Generate responsive, accessible in-app message templates from text prompts using Merlin AI, or edit existing HTML templates with Edit in Merlin.

The Merlin AI Template Generator allows you to create In-App message templates using text prompts. You can create HTML designs that are accessible, responsive, and equipped with standard tracking capabilities. You can also use Edit in Merlin to change an HTML template that is already in the code editor, such as a saved template, a duplicated campaign, or HTML you uploaded.

​

Use Cases

Merlin AI can be used to generate various types of In-App templates. You can use Merlin AI to:

• Create gamified templates: Build interactive components like “Spin the Wheel” to drive user participation and reward distribution.
• Highlight time-sensitive offers: Generate countdown timers to emphasize sales deadlines or registration windows.
• Capture user leads: Design pop-ups with input fields to collect information such as email addresses or phone numbers.
• Collect customer feedback: Build multi-option survey forms to track user preferences or net promoter scores (NPS).
• Announce product updates: Create full-screen or partial pop-ups to communicate new feature launches or seasonal sales.
• Edit an existing template: Change the colors, text, or layout of an HTML template you already use, without editing the code by hand.
• Reuse a duplicated campaign: After you duplicate a campaign for a different audience, ask Merlin AI to update the offer, copy, or CTA.
• Update your own HTML: Upload HTML built outside MoEngage, then ask Merlin AI to adjust it.

For industry-specific examples and ready-to-use prompts, see In-App Template Use Cases by Industry.

Feature Specifications

• Tracking: Automatically includes event tracking for close buttons, form submissions, and primary CTA clicks.
• Responsiveness: Templates adapt to both portrait and landscape orientations by default.
• Accessibility: Designs follow accessibility standards for inclusive user interaction.

​

Generate a Template

To generate an In-App template with Merlin AI, follow these steps:

1. Navigate to the Content step of the In-App campaign creation flow.
2. In the Merlin AI template generator section, click + Create new.
3. Specify your requirements using one of the following methods:
   • Select a Suggestion: Choose a pre-defined use case, such as a Spin the wheel pop-up or Survey form.
   • Custom Prompt: Enter technical or design requirements in the input field.
   • Reference Image: Click the Add image with your prompt icon next to the prompt field to attach a PNG reference (for example, a screenshot or a Figma export). For more details, see Use a reference image.
     
4. Click the Send icon to generate the template.
5. Review the generated design using the preview tools:
   • Device Preview: Click the Phone icon to view the layout on a mobile screen.
   • Preview: Click the Eye icon to preview the generated template.
   • Code Inspector: Click the Code icon to view the underlying HTML code.
6. To refine the design, provide additional instructions in the prompt field (for example, “Change the ‘Submit’ button color to green” or “Add a ‘Skip’ option at the bottom”).
7. Each iteration creates a new Version card in the chat history.
   • Preview Versions: Click any version card (for example, Version 0, Version 1) in the chat to view that specific design in the preview pane.
   • Edit a Version: Click the Pencil icon on a version card to select it as the base for further prompt-based edits.
8. Click Use this to apply the generated HTML to your campaign.

​

Edit an Existing Template

Use Edit in Merlin to change the HTML that is already in the Code View editor. Merlin AI uses that HTML as a reference, so your prompts change the current template instead of creating a new design. This works for any HTML in the editor, including templates generated earlier, saved templates, duplicated campaigns, and HTML you uploaded.

To edit an existing template with Merlin AI:

1. Navigate to the Content step of the In-App campaign creation flow and make sure the Code View editor contains the HTML you want to change.
2. In the Code View section, click Edit in Merlin. The Merlin AI chat opens with the current HTML attached as Reference HTML.
3. Enter the change you want (for example, Change the color to blue), and then click the Send icon. Merlin AI may ask clarifying questions before it makes the change.
4. Review the updated design in the preview pane. Each change creates a new version card in the chat, and you can click any version card to compare it with earlier versions. For more details, see step 7 in Generate a Template.
5. Click Use this to replace the HTML in the Code View editor with the updated design.

To make more changes later, click Edit in Merlin again. Merlin AI picks up the HTML currently in the editor, including any edits you made by hand. If you navigate away during the session, click Resume in the Merlin AI template generator section to return to the conversation. For more details, see Navigation Actions.

​

Use a Reference Image

You can attach a reference image alongside your prompt to generate a template that mirrors an existing design. This is useful when you want to replicate a screenshot, recreate a template you’ve seen elsewhere, or convert an approved design from a tool like Figma into an In-App template.

To generate a template from a reference image:

1. In the Merlin AI chat, click the Image icon next to the prompt field.
2. Upload a PNG file of the design you want to replicate.
3. Enter a prompt describing what you want (for example, Create a similar template).
4. Click the Send icon. Merlin AI generates an HTML template based on the reference image and your prompt.
5. Refine the output using follow-up prompts, the same way you would with a text-only generation.

Image Upload Limits

• You can attach one image per prompt.
• You can upload up to 10 images per session.

For tips on using a Figma export as your reference, see the FAQs at the bottom of this page.

​

Prompt Guidelines

To ensure accurate output, provide specific details on the layout and components. Refer to the following structure:

Template Type: Full-screen, Nudge, or Bottom sheet.

Use Case: Lead generation, Promotional, or Feedback survey.

Core Components: Input fields, countdown timers, or interactive wheels.

Functional Elements: Specific CTA text, hex color codes, and close button placement.

​

Example: Structured Prompt

The following is an example of a comprehensive prompt for a “Spin the Wheel” campaign:

Type: Fullscreen

Use Case: Lead Gen

Core Component: Spin wheel with 6 slices containing the following prizes:

• Slice 1: 10% Off (Coupon Code: SUMMER10)
• Slice 2: 20% Off (Coupon Code: SUMMER20)
• Slice 3: Free Shipping (Coupon Code: FREESHIP)
• Slice 4: 15% Off (Coupon Code: SUMMER15)
• Slice 5: Buy 1 Get 1 50% Off (Coupon Code: SUMMERBOGO)
• Slice 6: Better Luck Next Time (No coupon code)

Other Components:

• Dismiss button (X) in top-right corner.
• Email input field for lead capture before spinning.
• Winning overlay screen: prize name, coupon code, and a “Shop Now” button.
• Losing overlay screen: “Better Luck Next Time” text with a “Browse Anyway” button.

Theme: Clean Summer Sale theme.

CTA: Spin to Win.

Action Logic: On clicking “Spin to Win,” the wheel spins and lands on a random slice. If the user wins, display the winning overlay with store redirection. If the user loses, display the losing overlay with “Browse Anyway” redirection.

​

Template Management

​

Save for Future Use

Generated templates can be saved for use in other campaigns:

1. To transfer the generated design to the HTML editor, click Use this.
2. On the Content page, click the three dots menu.
3. Click Save Template. The Save as template for future use dialog box appears.
4. In the Save as box, enter a desired name for your template.
5. Click Save.

Note

Merlin AI chat data is volatile and persisted for the current session only. Refreshing the browser, closing the application tab, or selecting Restart chat will permanently delete the conversation history and any unsaved designs.

​

Navigation Actions

• Resume: Returns to the active generation session if you have navigated to other parts of the dashboard within the same session.
• Restart Chat: Clears all current session data to initiate a new prompt sequence.

​

FAQs

How do I use a Figma design as a reference for the template?

If your design team works in Figma, you can use the exported design as a reference image:

1. In Figma, select the frame containing your In-App design.
2. Export the frame as a PNG file.
3. In the Merlin AI chat, click the Add image with your prompt icon and upload the exported PNG.
4. Enter a prompt such as Create a similar template and click the Send icon.

The same workflow applies to designs exported from other tools such as Photoshop or Sketch — Merlin AI accepts any PNG reference.

What image formats and limits apply to reference uploads?

Reference images must be PNG files. You can attach one image per prompt, and up to 10 images per session.

Where can I find prompt examples for my industry?

See In-App Template Use Cases by Industry for ready-to-use prompts across retail and e-commerce, BFSI, entertainment and media, and travel and hospitality.

Can I use Merlin AI to edit a template I didn't create with Merlin AI?

Yes. Load the template into the Code View editor, either by opening a saved template, duplicating a campaign, or uploading your HTML, and then click Edit in Merlin. Merlin AI uses the HTML in the editor as a reference for your prompts. See Edit an Existing Template.

Are my generated templates saved automatically?

No. Merlin AI chat data is persisted for the current session only. To keep a generated template for reuse, click Use this, then save it from the Content page using Save Template. See Save for Future Use.