Scratch card Widget

 

The Scratch card widget is part of the Promotional Content widget category. For more information on the widgets, please refer to Widgets Set-up Guide.

 

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

99.png100.png

Configuring the widget

During this configuration step, layout, content, and style changes are displayed in real-time.

To apply your changes:

  1. Go through each tab of the configuration form and select the options that are applicable.
  2. Click Save to save your changes.
  3. If needed, you can click History in the toolbar on the right-hand side, then click the widget you added to reopen the configuration form and edit your changes.

List of options for the Scratch Card widget: the four tabs Layout, Content, Style, and Conditions are available to configure the widget.

Layout customization

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

101.png

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. Refer to the Widget Condition options section in the widget guide for more information on the available Condition options. 

Was this article helpful?

/