2.22. Notification modal widget
- Karol Schönsee
In order to increase awareness and improve campaign success Notification modal custom widget was introduced. To add a widget first create a static block with Content Constructor CMS content:
As admin user navigate to Content -> Blocks and create a new block with 'Add New Block' on the upper right corner.
Your new block requires a ‘Block Title’ and a ‘Identifier’ f.e:
Scroll further down to ‘Content Constructor’ section and add an ‘Image Teaser’ component.
To the left upload or select your desired image and to the right add your content, f.e:
In description field you can add a copy to clipboard icon by using “coupon-code with-icon” span. Please see 1* at the end of the page.
Create notification widget:
Go to Content -> Widgets, choose Notification modal widget type and desired theme.
Please select the required settings marked with a *
After clicking on the Continue button add further settings. Choose Notification modal Container as a container.
Please select the required settings marked with a *
Open the Widget options tab and set the desired configuration:
Select your just created CMS block configured in the previous step.
Widget Options
Name | Possible values | Comment |
|---|---|---|
Content mode | CMS Block / Image | Image is not supported yet! Please use CMS Block only. |
Select Block... |
| Select static block to display modal content |
Show modal after X second | Number (in seconds) | Leave empty modal should not be triggered automatically |
Trigger selectors | String, f.e. | Add selectors separated by commas. Leave empty if theer are not trigger elements. |
Reopen policy |
| Choose when notification modal should be opened again. |
Cookie expiration | number | Filed is available when Reopen policy is set to A few days (type below) |
Modal type |
|
|
Modal title |
| Leave empty in order to hide modal header |
Hide padding space inside modal | No/Yes |
|
Position modal |
| This setting will work only with popup modal type. Can be left empty if default modal position should be used. |
Aspect ratio |
| Set modal aspect ratio, f.e.: 2/3. Can be left empty. This setting will not be added to slide modal type. |
Display widget only for |
|
|
Date from | date (please use browsers calendar) | Date from which the modal will be visible |
Date to | date (please use browsers calendar) | Date until which the modal will be visible |
Result:
Closing modal
Modal won’t show again depending on the selected reopen policy.
1*
In order to add a coupon code that can be copied to the clipboard when clicking on it add markup:
Redeem your code: <span class="coupon-code with-icon">Kjs8yGt5</span>