The Scratch card widget is part of the Promotional Content widget category. For more information on the widgets, please refer to Widgets configuration in the visual editor.
Introduction
The Scratch Card widget enables you to display a pop-in containing an image (that may include some text) that the user can scratch using their mouse (or trackpad) to discover a special offer.
This feature can be leveraged to:
- Reward customer loyalty with a discount or free delivery
- Unveil coupons to your visitors
- Add interactive & fun widgets to delight your customers
- Unveil a new line of products
- Create contests to drive revisits to the website
Configuration
Layout tab
The Scratch Card widget is displayed as a modal (pop-in) that appears on top of the main screen. In the layout section, select where you want your image to be placed in relation to the text and select where you want your modal to be placed on the screen (9 available options).
For the "image on the left" and "image on the right" options, determine the width percentage of the image compared to the entire pop-in: between 20% and 80% of the available width.
Dimensions
By default, the "Widget dimensions based on content" toggle is ON, meaning that if you upload a large image, your modal will adapt accordingly based on the image (and text) ratio (length).
When the toggle is OFF, you can define the width and height of the modal independently using the following dimensional units:
|
Unit |
Description |
|
px |
Pixels |
|
% |
Percentage |
|
em |
Element, meaning that it is based on the size of the text of the element. For example, if your font-size is 18 px, then 1 em = 18 px |
|
vw (% of viewport width) |
1/100th of the window's (or viewport) width |
|
vh (% of viewport height) |
1/100th of the window's (or viewport) height |
|
vmin (% of viewport minimum size) |
Whichever is the smallest of vw or vh |
|
vmax (% of viewport maximum size) |
Whichever is the highest of vw or vh |
By default, the height of the modal is set to "Preserve ratio (automatic height)". This way, you don't have to set a height; it takes what the modal needs and can even reach 100% of the available height in the viewport.
When the toggle is OFF, you can define a height. If the content is longer than the defined modal height, it will be scrollable.
Content tab
Select the step you want to preview:
- Before scratching
- After scratching
Before scratching/ After scratching
- Select the desired image by uploading it via your browser or by entering the image path.
- Display title (optional): enter a title for your image, to be displayed above your message.
- Message: enter a message, for example, to give the user instructions.
For the after scratching step, you must select the widget link type among the following options:
|
Unit |
Description |
|
The button is a link |
On clicking the button, the user is redirected to another page. You must enter the label of the button and the URL of the page you want the visitor to be redirected to. |
|
A click on the button closes the widget |
On clicking the button, the widget closes. You must enter the label of the button. |
|
The whole widget is a link |
On clicking on any area of the widget, the user is redirected to another page. You must enter the URL of the page you want the visitor to be redirected to. |
|
A click on the whole widget closes the widget |
On clicking any area of the widget, it closes. |
|
None |
There is no button, and nothing happens when clicking on the widget. |
Second CTA/link option
If you toggle on the “Add a second link” option, you can configure a second link/ CTA in your widget, the same way as the first one.
Style tab
Select the style options (Container, Border, Close button and Underlay) you want to apply to your widget.
From here, you can configure the size and layout of your modal.
Background can be set up with an image using the image-fitting policy
4 options are provided:
- "Cover": the image is resized keeping the aspect ratio to fill the background container even if, by doing this resize, the image may overflow the background container.
- "Contains": the image is resized keeping the aspect ratio so that the whole image is included in the background container (no overflow)
- "Fill": the image is resized to fill the background container without keeping the aspect ratio
- "None": the image is left unchanged.
Conditions tab
Select the Triggering and Recurrence options you want to apply to your widget.