Modals

Modals are a way to collect feedback or contact information about profiles. They appear as overlay windows on your website, allowing you to engage with visitors and gather valuable information directly from your audience.

What are Modals, and why you should use them

Modals are rule-driven overlays that appear on your website to engage users with targeted messages, offers, or calls-to-action. They’re an effective way to:

• Collect user feedback — Gather opinions, ratings, and comments from your audience
• Capture contact information — Collect email addresses, phone numbers, and other contact details
• Improve user engagement — Present relevant content at the right moment in the user journey
• Measure satisfaction — Use NPS modals to track customer loyalty and satisfaction

Common use cases

• NPS surveys — Measure customer satisfaction and loyalty with Net Promoter Score surveys
• Newsletter signup — Collect email addresses for your newsletter or marketing campaigns
• Contact forms — Gather contact information from interested visitors
• Feedback collection — Collect user opinions and suggestions about your product or service
• Product promotion — Show special offers or promotions to targeted audiences
• Exit intent — Display modals when users are about to leave your website

Setup

There is no additional setup required for modals. Once you have HoodEngage SDK integrated into your website or application, modals are automatically available. Simply enable modals in your configurations, in the Modals & Forms tab, and start creating your first modal.

Creating your first modal

There are two ways to create a modal:

Method 1: From Configuration

Modals are created within a configuration, in the Modals & Forms tab. Click on Add Modal to create a new modal. You can either:

• Select an existing template
• Create a new modal from scratch

Add Modal

Select an existing template or create a new template

Method 2: From Assets

Navigate to Assets → Templates → Create to create a new modal template. You can also select from existing saved templates.

Modal types

Currently, there are four types of modals available:

• Quick Feedback (also known as Helpful modals) — Collect instant user feedback with simple like/dislike buttons
• Modal Popup’s — Standard popup modals for various use cases
• NPS modals — Specialized modals for collecting Net Promoter Score surveys
• Permission modals — User-friendly permission request modals for notifications, location, and other sensitive features

Types of Modals

You can customize the content, styling and triggers options to match your specific needs.

Content and style

The content and style of your modal can be customized directly in Studio.

Triggers

Triggers determine when your modal appears in the user journey. The following Activation triggers are available:

• Form Submit — When a user submits a form on your website
• Page Load — When a page finishes loading
• DOM content ready — When the DOM content is ready (before full page load)
• Exit Intent — When a user is about to leave your website (mouse moves toward browser exit)
• Page View — When the visitor changes pages within your site, commonly used on single-page websites or apps that don’t reload between pages
• Visibility — When a specific element becomes visible on the page
• Timer — After a specified amount of time has passed
• Custom Event — When a specific custom event is detected in the browser
• Click Event — When a user clicks on a specific element
• Vertical Scroll depths — Tracks the profile’s vertical scroll depth on the page. You can track by percentage of page height or specific pixel values.
• Horizontal scroll depths — Tracks the profile’s horizontal scroll depth. Useful for pages with wide layouts or horizontal scrolling features.

Activation Triggers

Render Conditions

Define the conditions under which modal is allowed to be considered for execution.

The following operators are available: equal, not equal, less than, less than or equal, greater than, greater than or equal, is set, is not set, is empty, is not empty, is true, is false, contains, not contains, ends with, not ends with, starts with, not starts with, match css, not match css, match regex, not match regex, match regex no case, not match regex no case.

Render Conditions

Multiple conditions can be added and are connected using OR logic.

Frequency & Limits

Define the frequency and limits under which the modal will be displayed.

Frequency Options

Choose how often the modal should be shown:

• Show [number] times per session — Enter the number of times the modal should appear during a single user session

• Show [number] times per day — Enter the number of times the modal can be shown per day

• Show [number] times per week — Enter the number of times the modal can be shown per week

• Show once every [number] days — Enter the number of days between modal displays

• Always show — Display the modal every time the trigger conditions are met

• Stop showing after interaction — Enable this option to stop displaying the modal after the user interacts with it

• Delay Between Modals — Set a delay in minutes between modal displays

Limit Options

• Limit impressions to — Enter the maximum number of total impressions for the modal

• End on — Select the exact date when the modal should stop being displayed

Frequency & Limits

Performance analysis

Track the performance of your modals through detailed analytics.

Quick View

The Quick View provides an at-a-glance overview of your modal’s performance with the following key metrics:

• Average NPS — The average Net Promoter Score calculated from all responses
• Views — Total number of times the modal has been displayed to users
• Responses — Total number of user responses collected
• Promoters — Percentage of users who gave a promoter score (9-10 on web, 4-5 on mobile)
• Passives — Percentage of users who gave a passive score (7-8 on web, 3 on mobile)
• Detractors — Percentage of users who gave a detractor score (0-6 on web, 0-2 on mobile)
• Average Score Trend 24-hour — Visual trend showing the average score over the last 24 hours
• Recent feedback — Displays recent user feedback including the score and comments from users

The Quick View also displays the modal’s status (Active/Inactive), type (Quick Feedback/Modal Popup/NPS/Permission), and associated configuration name.

NPS Quick View

Detail View

The Detail View provides comprehensive analytics and insights into your modal’s performance. Access it by clicking the “Detail view” button from the Quick View.

Key Performance Indicators:

The Detail View displays eight key metrics in an easy-to-read dashboard:

• Average NPS Score — Overall Net Promoter Score calculated from all responses
• Response rate — Percentage of users who interacted with and submitted the modal
• Unique responders — Number of unique users who submitted at least one NPS response
• Completion rate — Percentage of users who submitted an NPS score
• First time view — Number of first-time views of the modal
• Bounce rate — Percentage of users who viewed but did not interact with the modal
• Completed responses — Total number of completed responses
• Comments — Total number of comments collected from users

Visual Analytics:

• Promoters, Passives, Detractors — A visual breakdown showing the distribution of user responses across the three NPS categories, displayed with color-coded indicators
• Average score trend — A line graph showing the average score trend over time, allowing you to track performance changes across selected date ranges

Filtering and Export:

• Date range selector — Filter data by selecting custom date ranges
• Score dropdown — Filter analytics by specific score ranges or categories
• Export button — Export detailed analytics data for further analysis

This comprehensive view helps you understand not just how many users see your modal, but also how they engage with it and what their satisfaction levels are over time.

NPS Detail View

Data collection and export

When your modals collect user data (such as NPS scores, email addresses, or feedback), this data is automatically stored and can be accessed through:

• Insights → Feedback — The Feedback page displays a list of all your modals with key information including Status, Type, Name, Configuration, and Create date. You can search and filter modals by status, and customize which columns are displayed by clicking the column visibility icon in the top right corner of the table. Available columns include Status, Type, Configuration, Create date, Responses, and Response Rate.

Feedback page - Modals list

• Insights → Reports — Access detailed modal reports
• Export data — Download collected data in CSV and JSON format for analysis

In the following sections, you’ll find the different types of modals available on our platform.

NPS modals

NPS (Net Promoter Score) modals are specialized modals designed to measure customer satisfaction and loyalty. They allow you to collect NPS scores from your users: on web platforms, the scale is 0-10, while on mobile applications, the scale is 0-5. You can also collect optional comments and feedback along with the scores.

NPS Modal example

Key features of NPS modals:

• Score collection — Capture NPS scores (0-10 on web, 0-5 on mobile) to measure customer satisfaction
• Feedback gathering — Collect detailed comments and feedback from users
• Customer segmentation — Automatically categorize users as Promoters, Passives, or Detractors (on web: Promoters 9-10, Passives 7-8, Detractors 0-6; on mobile: Promoters 4-5, Passives 3, Detractors 0-2)
• Real-time analytics — View collected data and customer scores in Insights → Feedback
• Performance tracking — Monitor promoter, passive, and detractor trends via reporting endpoints

NPS modals can be created directly in Studio, assigned to Configurations, and their responses can be monitored in Insights → Feedback for real-time insights into customer satisfaction levels.

Additionally, there are two Quick reports available for NPS modals in Insights - Reports: NPS Performance Overview and NPS Trend over time.

For NPS modals, you can track promoter, passive, and detractor trends, and analyze customer satisfaction over time.

Quick feedback

Quick feedback modals (also known as Helpful modals) allow you to collect instant user sentiment with simple like/dislike buttons embedded in your message or UI. They provide a lightweight way to gather user feedback without requiring extensive forms or detailed responses.

Key features of Quick feedback modals:

• Simple interaction — Users can quickly provide feedback with just a like or dislike button click
• Minimal friction — No forms or lengthy responses required, making it easy for users to share their sentiment
• Embedded design — Can be embedded directly in your message or UI for seamless integration
• Instant sentiment collection — Gather real-time user feedback on content, features, or experiences
• Quick insights — Get immediate insights into user satisfaction and preferences
• Customizable triggers — Display quick feedback options at strategic moments in the user journey
• Analytics integration — Track feedback trends and sentiment over time

Common use cases for Quick feedback modals:

• Content feedback — Collect instant feedback on articles, blog posts, or content pieces
• Feature satisfaction — Quickly measure user satisfaction with new features or updates
• Message engagement — Get immediate feedback on notifications or messages
• Product feedback — Allow users to quickly rate products, services, or experiences
• Helpful content — Let users indicate if content was helpful with a simple thumbs up/down
• User experience — Gather quick sentiment on overall user experience without interrupting the flow

Quick feedback modals can be created in Studio and configured to appear at specific moments, helping you gather valuable user sentiment data with minimal user effort.

Modal Popup’s

Modal Popup’s are overlay windows that appear on your website to display announcements, forms, and facilitate user interactions. They provide a versatile way to engage with your visitors and collect information directly on your site.

Key features of Modal Popup’s:

• Flexible content — Display any type of content including text, images, forms, and interactive elements
• Customizable design — Fully customize the appearance, styling, and layout to match your brand
• Multiple triggers — Use various activation triggers such as page load, scroll depth, timer, click events, and exit intent
• Targeted messaging — Show relevant content based on user behavior, location, or properties using render conditions
• Form integration — Collect user information through embedded forms for newsletter signups, contact forms, and more
• Responsive design — Automatically adapt to different screen sizes and devices

Common use cases for Modal Popup’s:

• Newsletter signup — Collect email addresses for your newsletter or marketing campaigns
• Contact forms — Gather contact information from interested visitors
• Product promotions — Show special offers, discounts, or promotional content to targeted audiences
• Announcements — Display important announcements, updates, or news to your visitors
• Exit intent — Display modals when users are about to leave your website to capture their attention
• Lead generation — Collect leads and contact information from potential customers
• Event registration — Allow users to register for webinars, events, or special activities

Modal Popup’s can be created directly in Studio, customized with your branding, and assigned to Configurations with specific triggers and targeting rules to ensure they appear at the right time to the right audience.

Permission modals

Permission modals are user-friendly permission request modals for notifications, location, and other sensitive features. They help you request necessary permissions from users in a clear and non-intrusive way, improving user experience and increasing permission acceptance rates.

Key features of Permission modals:

• Browser permission requests — Request push notification permissions, location access, camera, microphone, and other browser-level permissions
• User-friendly messaging — Explain why permissions are needed and how they benefit the user experience
• Optimal timing — Display permission requests at the right moment in the user journey to maximize acceptance rates
• Customizable design — Match your brand identity with fully customizable styling and messaging
• Multiple permission types — Support various permission types including notifications, geolocation, camera, microphone, and more
• Smart targeting — Use render conditions to show permission requests to the right users at the right time
• Permission status tracking — Monitor permission acceptance rates and user responses

Common use cases for Permission modals:

• Push notification permissions — Request permission to send push notifications to users, increasing engagement and retention
• Location access — Request geolocation permissions for location-based features, maps, or personalized content
• Camera and microphone — Request access for video calls, photo uploads, or voice features
• Storage access — Request permission to store data locally for offline functionality
• Device sensors — Request access to device sensors for enhanced user experiences
• Progressive permission requests — Gradually request permissions as users engage with specific features

Permission modals can be created in Studio and configured with clear messaging that explains the value of granting permissions, helping you build trust with users and improve permission acceptance rates.

Frequently Asked Questions

Do modals require users to be subscribed to push notifications?
No. Modals are visible to all users visiting your website, regardless of their push notification subscription status.

Can I use modals on mobile applications?
Yes, modals are supported on both websites and mobile applications.

What’s the difference between modals and push notifications?
Push notifications reach users when they’re away from your site or app, while modals engage users while they’re actively browsing. They complement each other perfectly.

What’s the difference between the different modal types?

• NPS modals are specialized for collecting Net Promoter Score surveys with scales (0-10 on web, 0-5 on mobile)
• Quick Feedback modals use simple like/dislike buttons for instant feedback collection
• Modal Popup’s are versatile overlay windows for announcements, forms, and general interactions
• Permission modals are designed specifically for requesting browser permissions like notifications, location, camera, etc.

How many modals can be active at the same time?
You can have multiple modals active simultaneously on a page, including multiple modals of the same type. You can configure different display conditions for each modal, such as different triggers, render conditions, or timing, to control when and how they appear to users.

Can I control how often a modal appears to users?
Yes. You can set frequency limits in the Frequency & Limits section, including showing modals a specific number of times per session, per day, or per week. You can also set delays between modal displays and stop showing modals after user interaction.

How do I export data collected from modals?
You can export collected data in CSV and JSON formats through the Insights → Feedback page. Simply access your modal’s data and use the export functionality to download the information for analysis.

Can I customize when modals appear?
Yes. Modals support various activation triggers including page load, scroll depth, timer, click events, exit intent, form submissions, and custom events. You can also use render conditions to target specific audiences based on user behavior, location, or properties.