In this example, we will go through the steps involved in creating a widget to indicate the number times a blog post was viewed:
This modal features the following elements:
- a personalized message;
- a personalized background color;
- a personalized border.
Accessing the Social Proof widget
- Open the variation editor on the desired website.
- Click Widgets in the toolbar on the right-hand side.
- Enter Social Proof in the search field.
- Click the Social Proof card:
The configuration form is displayed along with a modal featuring a message.
You can now start configuring your modal. The Layout tab is displayed by default.
- In the Layout tab, go to the Sticky to the page, category and click Left:
the modal is displayed to the left of the page.
- Click the Content tab.
- In the Type of content to display category, select Number of views.
- Select In the last 24 hours.
- Click in the Message field:
a formatting toolbar appears.
- Enter “This post was viewed !views! times in the last !period! hours”
- Click the Style tab.
- In the Text alignment category, click Center.
Border and background
- Set the Border Thickness to 0 px.
- Set the Border Radius to 10 px.
- Click Border color and select a color from the palette or enter its hexadecimal value in the Hex field.
- Click Background color and select a color from the palette or enter its hexadecimal value in the Hex field.
- Set the Overlay opacity to 0 %.
Margins and spacing
- Set all Margins to 0 px.
- Set the Padding to 0 px.
- Enable the Drop shadow.
- Set the Shadow opacity to 40 %.
- Click the Conditions tab.
- In Dynamic content, leave the Always value.
- In the drop-down list, set the Dismiss content option to “Do not dismiss it”.
- Click Save.