Creating opt-in prompts to collect consent for web push notifications

Before sending your first web push notification to customers, you need to obtain their consent to receive such communication. These opt-in prompts are displayed in the customer’s browser. 

What types of opt-in prompts can you create in ECDP, and how do they differ? 

Double opt-in prompt

Recipients are shown two browser notifications in the following sequence:

1. Personalized pop-up prompt: this is the first prompt, where you can customize the content and display conditions. Once the recipient accepts this pop-up, the browser displays the next request:
2. Browser system prompt: this is the actual system-generated request for consent to receive web push notifications.
   

To successfully subscribe, the recipient must consent by clicking on both notifications.

Key characteristics of a personalized opt-in prompt: 

• Display control: you have full control over when and where the pop-up appears. You can specify display conditions based on factors such as the specific page, session duration, or the number of pages visited.  
• Personalization: you have full control over when and where the pop-up appears. You can specify display conditions based on factors such as the specific page, session duration, or the number of pages visited.
• Enhanced recipient base quality and domain reputation: users are more likely to give consent when they understand its purpose. By highlighting the benefits of consenting in your request, you can improve conversion rates. Keep in mind that some browsers may block notifications if there has been no prior interaction with the site.

Creating a double opt-in prompt

1. In Settings > Web push > Opt-in prompts, click Create opt-in prompt > Double opt-in. 
2. In the Basic settings section: 
   • Assign a name to the opt-in prompt to easily identify it among others.
   • Choose the website where you want to display the prompt.
   • Specify the time range during which the prompt should be displayed.
   • In the Frequency section, determine whether the prompt should appear once per session or at a specified interval.
   • Optionally, enable tracking by adding custom parameters or using Google Analytics.
3. In the Triggers section: 
   • Choose when the prompt should appear:
     • Visit –the prompt will appear when the user enters the page.
     • Exit intent – the prompt will appear when the user moves the cursor outside the store window.
     • Scroll – the prompt will appear when the user starts scrolling the page. Set a threshold (page scroll depth in %) that will trigger the pop-up.
     • Custom event – the prompt will appear when a user takes a specific action in your store, like clicking a button or link, instead of showing up right when they land on the page. To use custom events, you’ll need to complete a few extra steps. You’ll find the instructions in the How to set up a custom event section.
   • Specify additional conditions, such as the page address, page type, or session duration, to control when the prompt is displayed.
   • Decide who should see the prompt.
4. In the Content step, design the initial consent pop-up. This pop-up is fully customizable, allowing you to match it to your brand’s style.
5. In the Summary section, you will find a preview of the opt-in prompt, along with a list of all configured settings.
6. Click Activate to start displaying the prompt to your recipients. 

Single opt-in prompt 

In this case, the recipients receive a single system notification from their browser, allowing them to confirm whether they want to receive web push notifications from you.

Key features of a single opt-in prompt:

• High conversion: single opt-in prompts are highly effective in obtaining user consent.
• No customization: you cannot modify the content or appearance of this type of prompt.
• Browser dependency: the display and functionality of the single opt-in prompt are dependent on the user’s browser settings.

Creating a single opt-in prompt

1. Go to Settings > Web push > Opt-in prompts, and click Create opt-in prompt > Single opt-in. 
2. In the Basic settings section: 
   • Assign a name to the opt-in prompt to easily identify it among others.
   • Choose the website where you want to display the prompt.
   • Specify the time range during which the prompt should be displayed.
   • In the Frequency section, determine whether the prompt should appear once per session or at a specified interval.
   • Optionally, enable tracking by adding custom parameters or using Google Analytics.
3. In the Triggers section: 
   • Choose when the prompt should appear, such as when entering the page, attempting to exit, or scrolling.
   • Specify additional conditions, such as the page address, page type, or session duration, to control when the prompt is displayed.
   • Decide who should see the prompt.
4. In the Summary section, you will find a preview of the opt-in prompt, along with a list of all configured settings.
5. Click Activate to start displaying the prompt to your recipients. 

How to set up a custom event

Method 1: Trigger your double opt-in prompt using the browser’s «Inspect» function:

1. Go to the Behavior tab in the content editor.
2. In the Events section, select Custom event.
3. You’ll see a script snippet: $ecdp.api.getContent(«type», id, maxWaitTime).
4. Copy it and run it on your website — you’ll find instructions on how to do this in the next section.

If you don’t run the script, your custom event won’t work.

Parameters used in the method:

• type – content type, like optInPrompt.
• id – content identifier.
• maxWaitTime – optional parameter (in milliseconds) that sets how quickly the system will try to display the opt-in prompt after it’s ready (0-10,000 ms).

You don’t have to include the maxWaitTime parameter.

Example 1:

Display the prompt with ID 123 immediately after it’s ready.

$ecdp.api.getContent("optInPrompt", 123);

Example 2:

Display the prompt with ID 456 with a maximum wait time of 5 seconds.

$ecdp.api.getContent("optInPrompt", 456, 5000);

Run the script in your browser

1. Go to your store’s page and open the Inspect function:
   • using your keyboard by pressing F12,
   • or right-clicking and selecting it from the context menu.
2. Select the Console tab.
3. Type or paste the copied script with your opt-in prompt parameters.
4. Press Enter to run the script.

This will trigger the prompt directly from the console, which is necessary to activate the custom event.

Method 2: Trigger your double opt-in prompt by clicking a button or link

Instead of running the script manually from the console, you can attach it to a specific element on your page – like a button or link. This way, your prompt will appear automatically when someone clicks that element.

Below you’ll find two examples – using a button and a link. Both use the getContent method, which triggers the prompt with the specified ID.

Example 1: Button

<button id="myButton">Display the prompt</button>

<script> 
document.getElementById("myButton").addEventListener("click", function() {
    $ecdp.api.getContent("optInPrompt", 586);
});
</script>

Example 2: Link

<a href="#" id="OptInPromptLink">Display the prompt</a>

<script>
document.getElementById("optInPromptLink").addEventListener("click", function(event) {
event.preventDefault(); // Prevents the link from navigating
    $ecdp.api.getContent("optInPrompt", 586);
});
</script>

In both cases, the script:

• points to an element (like #myButton or # optInPromptLink),
• «listens» for clicks,
• triggers the prompt with ID 586 after clicking.

Make sure your chosen prompt has Active status, otherwise it won’t display.

Important notes

• Your opt-in prompt will only load after the script is triggered.
• The prompt will display only once per page view, for the same combination of type and ID parameters.

Custom events only work for prompts with Active status.

How to live test an opt-in prompt triggered by a custom event?