Two-step agreement form

While implementing web push notifications, it is crucial to facilitate a process that allows a visitor to your website to explicitly express their consent to receiving these notifications. For this reason, in addition to a browser form, we recommend creating an additional visual layer that requires interaction from the visitor because this ensures you that the visitor is aware of and accepts receiving these notifications.

This article describes how to create a two-step agreement in the form of a dynamic content that will be displayed on your website. The process of creating the form involves:

• using ready-made web push agreement templates that can be edited in the simplified configuration form. These templates already contain the scripts that invoke the dynamic content form and agreement form from the browser.
• the possibility to preview the dynamic content on the target website.

Benefits

• You will follow the browser policy.
• You will prevent being blocked by the anti-spam functions.
• You will improve user engagement and retention.
• You will be compliant with GDPR.

Visitor perspective

When a visitor whose web push agreement is disabled enters a website, a dynamic content form appears. The visitor can give or decline a permission to receiving web push notifications.

Requirements

• Implement a tracking code to your website.
• You must be granted user permissions that allow accessing the Communication module, creating and executing actions.

Creating the agreement form

1. Go to Communication > Dynamic content > Create new.
2. Select Insert object.

Select the recipients

3. In the Audience section, click Add info.

   1. Select the New audience tab.

   2. Click Define conditions.
      Result: A pop-up appears.

   3. Click Choose filter.

   4. From the dropdown list, select receive_webpush_messages.

      Tip: This attribute is available after completing web push configuration.

   5. Click the Choose operator.

   6. Select the tab.

   7. Select Is false.

      

   8. Confirm the settings on the pop-up by clicking Apply.

4. Confirm the settings in the Audience section by clicking Apply.

Prepare the pop-up window

1. In the Content section, click Add info.
2. Leave Simple message at default.
3. In CSS selector:
   1. Select After (in div)
   2. In the field, enter .snrs-modal-wrapper
4. Click Create message.
5. Select the Insert object templates.
6. Select either Gather web push agreement 1 or Gather web push agreement 2.
   The difference between them is only visual and both can be edited in the simplified configuration form.
   Result: A dynamic content template builder appears.
7. Configure the settings in the Config tab.
   Click to expand the form description of Gather web push agreement 1

   1. Environment mode - This option lets you display the preview of the template in the wizard. From the dropdown list, select one of the following options:
      • Development - This option is reserved only for template editing mode, its selection enables the preview of the template in the editor.
      • Production - This option must be selected when the template is finished and ready to be published. It’s important to select this option before publishing, so the form will not display if the browser won’t be able to process it.
   2. Is open? - In this field, you can define whether a pop-up opens automatically. If not, clicking an icon invokes the agreement form.
   3. Alignment - In this field, define the alignment of the pop-up on the website.
   4. Title - In this field, enter the title that displays in the header of the pop-up.
   5. Image - In this field, you can enter the URL of the image that will be used in the pop-up.
   6. Button - In this field, enter the text on the confirmation button.
   7. Primary color - Use color picker to define the color of the confirmation button.

   Click to expand the form description of Gather web push agreement 2

   1. Environment mode - This option lets you display the preview of the template in the wizard. From the dropdown list, select one of the following options:
      • Development - This option is reserved only for template editing mode, its selection enables the preview of the template in the editor.
      • Production - This option must be selected when the template is finished and ready to be published. It’s important to select this option before publishing, so the form will not display if the browser won’t be able to process it.
   2. Two steps window agreement everywhere - Enable this option to display two-step agreement form in every browser. If this option is disabled, browsers based on the Chromium engine will only display the native web push consent window.
   3. Image - In this field, you can enter the URL of the image that will be used in the pop-up.
   4. Title - In this field, enter the title that displays in the header of the pop-up.
   5. Description - In this field, enter the main text that displays on the pop-up.
   6. Plain button - In this field, enter the text on the decline button.
   7. Accept button - In this field, enter the text on the confirmation button.
   8. Prime color - Use color picker to define the color of the confirmation button.

8. If you want to define or edit more parameters of the pop-up, you can do so in the HTML, CSS, and JavaScript tabs.
   Note: Learn more about editing a ready-made template.
9. You can use the live preview option to preview the dynamic content on the target website.
   
   Important: Once template editing is finished, in the Environment mode field set the value to Production. This option prevents displaying the form when the browser cannot process it.
10. Click Next.

    

11. Confirm the settings in the section by clicking Apply.

Schedule the display

1. In the Schedule section, to define when you want to start displaying the agreement form, click Add info.
2. You can choose:
   • Immediate and continuous display by clicking Display immediately.
     WARNING: At the end of the process you must activate the dynamic content anyway.
   • Future date by clicking Scheduled.
     1. In the Start field, define the start date.
     2. In the End field, define the end date.
     3. Select the time zone.
3. Confirm your choices by clicking Apply.
   
   Important: After dynamic content is activated, wait several minutes for the content to be loaded.

Set delay time

1. In the Display settings section, click Define.
2. Leave the Triggers at default (on landing).
3. Optionally, you can adjust the Advanced settings.
   Tip: You can find explanation of the options in Advanced settings here.

   

4. Confirm by clicking Apply.

Activate the form

In the right upper corner, click Activate. The form will appear on the website according to the settings defined. You can proceed to creating a web push notification.