Meet your users where they’re at. In-product prompts allow you to ask for in-the-moment feedback using a popover on your website that links to your maze.
In this article:
- Who can use this feature?
- Connect your website to Maze
- Current limitations
- Create an in-app prompt
- Previewing your prompt
- Check the status of your prompt
- Edit a prompt or remove it from your website
- Prompts metadata in the results
- FAQs
- Security and performance FAQs
Who can use this feature?
Prompts are available for all plans.
There are currently no role restrictions for who can create an in-product prompt.
Connect your website to Maze
Before enabling Maze Prompts on your live website for the first time, you’ll need to install a tracking code that enables this feature to run on your website.
Learn how to install the Maze snippet on your website
Current limitations
- It isn't currently possible to preview the popover directly on your website before publishing it. However, the prompt editor will display a preview of how the popover will look like.
- Prompts are only available for websites. It's not currently possible to set up a prompt on a native mobile app (i.e. iOS or Android).
- All prompts are displayed immediately after the page is loaded; it's not currently possible to set a delay for the prompt. It's not possible at the moment to display the prompt after a certain event is triggered.
If you'd be interested in any of the features listed above, please let us know!
Create an in-product prompt
To add a Maze Prompt to your website, open the Share page for your live maze, and click In-Product Prompt.
This will open the prompt editor, which includes three steps:
You'll be able to come back to the editor and make changes to both content and audience after publishing. Learn more in the section 'Edit an existing prompt'
Content
First, you’ll set up the content of the popover:
- Internal prompt name
- Maze answering options
- Within the prompt: Testers will answer the maze directly on your site, within the prompt. This option is not available for mazes with card sort or prototype blocks
- New browser tab: Testers leave your site to answer the maze in a new browser tab
- Title (100 characters limit)
- Description (280 characters limit)
- Button/CTA (25 characters limit)
If you exceed the character limit, you won't be able to move forward.
It isn't currently possible to preview the popover directly on your website before publishing it. However, on the right-hand side of the editor, you'll see a preview of how the popover will look like.
When you’re happy with the content, click Next.
Appearance
You can customize the button (e.g. to use your brand colors), as well as the position of the prompt on your website.
Button customization:
- Text color
- Background color
- Border radius (px)
Prompt position:
- Bottom right
- Bottom left
- Middle right
- Middle left
When you’re happy with the appearance of the prompt, click Next.
Audience
Finally, you’ll choose where and to whom the prompt will be displayed.
- Connected website: Select one of the websites you’ve previously connected, or connect a new one.
- Display on: Choose whether you want to display the prompt on every page of the selected website or on specific pages. Learn more about URL patterns
-
Users: Select All users to show the prompt to every visitor on that page, or Specific users to show it to a specific Amplitude cohort. Learn how to connect Maze to Amplitude
At the moment, it's only possible to target your prompts to specific users through the Amplitude integration. If you'd be interested in an integration with a different tool (e.g. Salesforce, Contentsquare), please share your feedback with our team!
- Device type: Choose on which devices to display the prompt: users visiting your website on desktop, tablet, and/or mobile devices.
Once you’re ready, click Create Prompt. This will make the prompt immediately live on your website. You'll be able to pause it any time.
Previewing your prompt
It isn't currently possible to preview the popover directly on your website before publishing it. However, the prompt editor will display a preview of how the popover will look like.
To get a better idea of how the prompt will look like, you can also publish it on a staging environment beforehand, or use it in an online code editor such as Glitch or CodePen.
Check the status of your prompt
Every prompt you create appears on the Share page.
Click the prompt to see more details.
In this modal, you'll have access to quick actions related to the modal, and to a preview of its content, appearance, and audience.
Prompt actions
Click the prompt on the maze Share page to see more details.
At the top of the modal, you'll see quick actions for the prompt: edit the prompt, or stop/restart it.
Edit an existing prompt
At the top of the details panel, under 'Quick actions', click Edit prompt to edit the content, appearance, and audience of the prompt.
This will take you back to the prompt editor.
Pause/restart the prompt on your website
At the top of the details panel, under 'Quick actions', click Pause to disable the prompt on your website.
To make the prompt visible again on your website, click Start.
Prompts metadata in the results
Through the Testers tab on your Results dashboard, you can see the source of that response — e.g. whether it came via prompt or share link.
Click Show more to reveal more metadata, including the date and time the participant clicked the CTA on the prompt.
Learn more about the maze results
Prompt FAQs
Can I remove the Maze branding from the prompt?
Users on all plans can create and use prompts. However, removing the Maze branding requires an Organization plan.
Is the prompt automatically localized?
All the text within the popover (title, body, CTA) needs to be manually set. This text is not automatically translated into your tester's browser language.
As a workaround, if the website where the prompt is displayed has different URLs for different languages, you can create multiple prompts targeted at specific URLs, with text in each of the languages you're targeting.
For instance, if you're targeting Spanish-speaking users, set up the content of a prompt in Spanish. Then, when defining the audience, select Specific pages under 'Display on', and enter the specific URL that targets Spanish-speaking users — e.g. https://yourwebsite.co/es/* or https://yourwebsite.co?lang=es
What happens if I set up more than one prompt in the same URL?
Maze displays one prompt at a time in each session.
If you set up multiple prompts on the same URL, the oldest prompt will display first.
Subsequent page reloads (for instance, if the user refreshes or returns to the page after interacting with or dismissing the prompt) will display the next prompts, from the oldest to the most recent.
What happens if a prompt is enabled on one specific page, and then added to another?
Prompts are specific to a domain. Once the prompt is live for a domain, testers can interact with it only once. Even if you enable prompts for separate pages, users who clicked the CTA or dismissed the prompt won't see the same prompt again.
Can participants answer the same maze multiple times using prompts?
In some cases, you may want users to answer the same maze more than once—for instance, when running a diary study.
Note that participants can only interact with a prompt once. This means that, for the same maze to appear to that user, you need to create an additional prompt for that maze. However, there are a few caveats if a user has previously answered the maze and interacts with the new prompt:
- If the prompt is configured to open in a new tab, the user is directed to the Thank you screen, without the opportunity to answer the maze again.
- If the answer process occurs within the prompt itself, the user can answer the maze again, resembling the behavior when unique sessions are disabled.
Can I use prompts on password-protected websites?
Yes, prompts will work on a password-protected website, provided that the snippet is correctly installed, and the tester has been given the password and can access the website.
I installed the code snippet and created a prompt. Why doesn’t the prompt load on my website?
To make sure the prompt appears on your website:
-
Confirm that the website is verified. The prompt doesn’t load if the website hasn’t been verified during the snippet setup. Open the Connected websites tab within your team settings (app.maze.co/team?tab=connected_websites). Look for a green checkmark (✓) next to the website. If the website isn’t verified yet, click the Verify button to complete the process.
-
Use the window’s load event. This event tells the browser to load the prompt after all necessary page resources are ready. The prompt needs specific configurations provided either by a general snippet or by
window.mazePromptsSettings(which is used internally and shouldn't be manually adjusted by users). -
Add two containers to the DOM. One container for the prompt, the other for media elements. These are added to the webpage after the window has completely loaded. Each container is an iframe with a unique ID.
-
Watch out for common issues. Certain applications (e.g. React, Vue, or other frontend frameworks) might remove HTML or scripts from the main container. This can cause problems, especially if the application starts in the body instead of a specified "main container." Similarly, flushing content from the
<head>tag might remove necessary scripts, resulting the prompt not loading as expected.
Security and performance FAQs
Will the Maze script slow down my website?
The Maze script is designed to have a very minimal impact on the performance of your website. It shouldn’t take more than a few milliseconds to load, and this shouldn’t be noticeable at all to your website users.
Asynchronous loading
The Maze script loads asynchronously. Your website will continue to load while the Maze script is being executed.
This means that, even if the script fails to load (which is unlikely), your website will still continue to render as expected without the script.
Dynamic loading
The Maze tracking code you install on your website is used to dynamically run a loader that powers the testing on your website. The tracking code is less than 1kb.
The dynamic loader is less than 10kb and only runs in specific circumstances:
- The loader only runs if the API has a valid response;
- The API keys are only valid for each domain you configure;
- The code for either live website testing or the in-product prompt is only triggered if the destination site is opened in a new tab. If this first check is passed, we send a post message to the tab that opened the site, and attach an event listener to wait for the response. The rest of the live website testing code is only triggered if we get the proper response in the first minute. Otherwise, it’ll have no further impact.
If either of the conditions above are not met, the script isn’t loaded at all.
Content Delivery Network (CDN)
The dynamic loader is served by a Content Delivery Network (CDN).
A CDN is a distributed network of servers that delivers content based on a user’s geographic location. It does this by storing copies of the content on servers located in different places around the world. When someone visits a website using a CDN, the content is delivered to their device from the server closest to them, reducing the distance it needs to travel and making it load faster.
Using a CDN allows us to serve the loader faster, more reliably, securely, and with reduced data usage.
Session-based caching
The script uses session-based caching. The script is loaded only once, even when the user navigates through multiple pages.
Content Security Policy (CSP) directives
A Content Security Policy (CSP) is a security feature that helps protect websites from security threats and vulnerabilities. It does this by specifying the type of content (e.g. scripts, images, videos) that can be loaded on a website, and from which sources they can be loaded. This helps mitigate certain types of malicious attacks, such as cross-site scripting (XSS), clickjacking, and data injection attacks.
If you have a CSP implemented, you’ll need to add a directive that allows files to be loaded from Maze to allow the Maze script to work on your website.
Default: If using a default CSP, we recommend adding the Maze domain as a trusted source in the default-src rules:
default-src https://*.maze.co/
Stricter: If your organization requires stricter restrictions, we recommend the settings below:
script-src https://*.maze.co/ font-src https://*.maze.co/ style-src https://*.maze.co/ connect-src https://*.maze.co/ img-src https://*.maze.co/ frame-src https://*.maze.co/
Strictest: If your CSP requires additional granularity, the following are the minimum rules required for the Maze script to work. Please note that this list is subject to change as this feature evolves. In that case, you’ll need to update your CSP directives so that the snippet can continue to work.
script-src https://snippet.maze.co/ font-src https://snippet.maze.co/ style-src https://snippet.maze.co/ img-src https://snippet.maze.co/ connect-src https://api.maze.co/ https://prompts.maze.co/ frame-src https://t.maze.co/
What measures are in place to guarantee the security of the script?
Change control
Any changes to the script are subject to Maze’s change control policy.
Access to code changes is restricted to authorized employees only. All changes must go through code review and testing before deployment.
Hosting
The script is hosted as part of our general platform infrastructure, with access restricted to authorized employees.
To learn more about the steps Maze takes to keep your data safe, please check out maze.co/security and compliance.maze.co.
Is the script open-source?
The Maze tracking script is closed-source. By keeping the source code closed, Maze controls how the script is developed and distributed.
What data does Maze collect from my testers?
You can learn more in our Privacy Policy.
Is there any tracking in place for general website visitors?
If an in-product prompt or live website test isn’t targeting your website visitors, no information or data will be collected from those users.
What should I consider regarding Privacy Policy requirements when engaging with a website test or a prompt?
You’re responsible for the policies that govern your website and domain—i.e. traffic and journeys directly to your webpages.
Maze’s policies apply when participants interact directly with our endpoints—i.e. when they open a test directly on t.maze.co.
Therefore:
- Website tests: The journey begins at Maze (t.maze.co), and at this point, Maze’s Privacy Policy and Terms of Service are applicable. Once users are redirected to your website as part of the test, your own policies come into effect.
- In-product prompts: For in-product prompts, the journey begins on your website, where your own respective policies apply. If the user is redirected to a Maze test at t.maze.co, or interacts with the Maze widget, then Maze’s policies become applicable.
Still need help?
If you have any questions or concerns, please let our Support team know — we'll be happy to help!