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](/docs/campaign/dynamiccontent) that will be displayed on your website. The process of creating the form involves: - using [ready-made web push agreement templates](/docs/campaign/dynamiccontent/dynamic-content-template-builder) 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](/docs/campaign/dynamiccontent/testing-dynamic-content/previewing-dynamic-content#the-live-preview-option). ### 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.
The visitor gives permission

An agreement form from the browser appears.

The visitor declines permission

A pop-up window is closed. The web push agreement attribute doesn't change (disabled).

## Requirements --- - Implement a [tracking code](/developers/web/installation-and-configuration) to your website. - You must be granted user permissions that allow accessing **Experience Hub**, creating and executing actions. ## Creating the agreement form --- 1. Go to Image presents the Experience Hub icon **Experience Hub > 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**.
This attribute is available after completing [web push configuration](/docs/campaign/Webpush/configuring-web-push).
5. Click the **Choose operator**. 4. Select the Boolean icon tab. 5. Select **Is false**.
Recipients selected
Selected group of recipients
6. 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` 3. Click **Create message**. 4. Select the **Insert object templates**. 5. 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. 6. 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.
7. If you want to define or edit more parameters of the pop-up, you can do so in the **HTML**, **CSS**, and **JavaScript** tabs.
Learn more about [editing a ready-made template](/docs/campaign/dynamiccontent/creating-dynamic-content-templates/dynamic-content-template-builder#editing-a-ready-made-template).
10. You can use the [live preview](/docs/campaign/dynamiccontent/testing-dynamic-content/previewing-dynamic-content#the-live-preview-option) option to preview the dynamic content on the target website.
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.
6. Click **Next**.
Content created
Configured Content section
7. 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**.
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**.
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**). 4. Optionally, you can adjust the **Advanced settings**.
You can find explanation of the options in **Advanced settings** [here](/docs/campaign/dynamiccontent/creating-dynamic-content/creating-dynamic-content).
Display settings defined
Configured Display settings section
5. 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](/docs/campaign/Webpush/creating-webpush-campaigns).