Scratch card Widget
Last updated
Was this helpful?
Last updated
Was this helpful?
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.
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
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.
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.
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.
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.
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.
Select the Triggering and Recurrence options you want to apply to your widget.