Trigger Modals

Trigger Modals are overlays that appear on top of your website’s pages to highlight important messages, prompt actions, or showcase campaigns. LOOP includes a variety of settings to implement these alongside your marketing campaigns for maximum impact.

Key Features and Benefits

• Highlight Campaigns: Draw attention to special offers, events, or VIP packages.
• Encourage Actions: Nudge users to subscribe to newsletters, book tickets, or explore specific pages.
• Customisable Options: Configure modals for specific pages, sections, or the entire site.

(note this is sped up 30% but if you'd like the original that's here on Loom)

‍

How to Set Up Trigger Modals

Step 1: Create a Modals Repository (if you don't already have one)

1. Go to Settings in the CMS content tree.
2. Look for the Modals Repository. If it doesn’t exist:
   • Hover over Settings and click the dots menu.
   • Select Create Modals Repository and name it (e.g., "Modals").
   • Save and publish.
3. The repository acts as a container for all modals on your site.

Step 2: Add a New Modal

1. Within the Modals Repository, hover over it and click the dots menu to create a new modal.
2. Add the following:
   • Title: The main heading displayed at the top of the modal.
   • Image (optional): Upload or select an image (e.g., for offers or campaigns). Use the full-width option for better visual impact.
   • Intro Text: Briefly explain the purpose of the modal.
   • iFrame (Optional): Embed forms, videos, or external widgets (e.g., newsletter forms or YouTube videos).
   • Footer Text and CTA: Include a call-to-action with links, headings, or formatted text.
3. Save and publish.

Step 3: Configure Modal Settings

1. Page Validity: Choose where the modal should appear:
   • All Pages: Display site-wide.
   • Exclude Specific Pages: Choose pages where the modal won’t appear.
   • Include Specific Pages: Target specific sections or areas of your site.
2. Enable/Disable Modals: Toggle modals on or off as needed.
3. Scheduling: Set a start and end date for time-sensitive campaigns.
4. Frequency Settings:
   • Session-based: The modal will appear once per session unless changed.
   • Expire After X Days: Specify how often a user sees the modal.
5. Trigger Delay: Set a delay (e.g., 8–10 seconds) before the modal appears to avoid disrupting user flow.

Step 4: Apply Themes

• Use Block Themes to style modals with custom colours, fonts, or layouts to align with your brand.
• Access themes via the cog settings icon in the modal.

Best Practices

• Limit Modal Use: Focus on 3–5 key messages to avoid overwhelming users.
• Test for Mobile: Ensure modals fit well on mobile screens and display essential information clearly.
• Prepare Predefined Modals: Store frequently used modals (e.g., rainy day messages) for quick activation.
• Delay Triggers: Use an 8-second delay for modals to improve engagement without frustrating users.

Advanced Features

• iFrame Embeds: Embed external widgets like YouTube videos or forms. Ensure content is concise to avoid clutter.
• Custom Pages for Modals: Use specific modals for targeted campaigns like VIP offers, event details, or product promotions.

Notes

• To include external widgets (e.g., external newsletter forms), embed their script tags directly into the modal’s iFrame section. This ensures smooth integration while retaining the modal's styling.

By following these steps, you can create impactful Trigger Modals to drive user engagement, increase conversions, and enhance the overall visitor experience.

‍

‍