Overview

Overlay widgets are ready-made blocks to add to your website to improve user engagement and personalize their experience. These templates are easy to customize and help you display offers, guide users, or enhance navigation. You can use these templates to create dynamic, interactive website elements without needing advanced design skills.

The available templates include:

Recent Product
Home Hello Bar
Coupon on Sliding Drawer
Back to Top Icon
Tab Talk
Progress Bar

Recent Product

The Recent Product widget allows you to trigger the display of products based on a system-configured event. Refer to this document to know more about this widget.

Refer to the table below for the available editing options

Option	Sub-Option	Description
Position		Configure where the recently viewed drawer appears and how it opens.
	Widget Type	Overlay: Enable or disable the background overlay behind the drawer.
	Placement	Set where the widget appears on the page: Left, Right, Top, or Bottom.
	Open Drawer	Toggle on to auto-open the drawer when triggered. Toggle off to require user action.
Event	Select Event	Choose a system or custom event (e.g., Product View) that will trigger the widget. Note: Only one event is supported per campaign.
Settings		Customize the behavior and interaction options of the widget drawer. Overlay: Enable or disable the overlay behind the widget drawer. Click Outside to Close: Close the drawer when users click outside it. Close Button: Add or configure a manual close button for the drawer.
Content		Define the content displayed inside the widget.
Number of Products	Select Count	Select how many products to show (range: 1–5) using the dropdown.
Product Display	Select product image URL	Select the URL from the added events using the dropdown.
	Select image hyperlinking URL	Link each image to its respective Product Detail Page.
	Properties	Display up to 3 product attributes (max 50 characters each): Product Name Price Description Rating (if applicable) You can select any three attributes from the given list using the dropdown.
Button Properties	Enable Button	Add a CTA button below each product card.
	Button Text	Customize button label (e.g., Buy Now, View More).
	Button Color	Choose a button color using the color picker.
	Button Action	Define the action: navigate to detail page or add to cart.
Style		Adjust the visual appearance of the widget.
	Closed Drawer	Background Fill – Set drawer’s background color. Corner Radius – Customize drawer corner rounding.
	Open Drawer	Background Fill – Set expanded drawer’s background color. Close Icon Fill – Set close icon color. Background Stroke – Add drawer outline. Stroke Thickness – Set outline width.
	Product Card	Card Background – Background color of product card. Thumbnail Fill – Background behind image. Button Color – CTA button color inside the card.

Home Hello Bar

The Home Hello Bar is an attention-grabbing banner at the top or bottom of your homepage. Use it to promote sales, make announcements, or provide other key information you want visitors to see immediately upon arriving on your site. Customize its message, colors, and links to match your goals. Refer to the table below for the available editing options.

Options	Description
Position	Determines where the new element will be placed in relation to existing content. Options: Insert after the element: Place the new element directly after the selected one. Insert above the element: Insert the new element above the selected one. Insert before the element: Adds the new element just before the selected one.
Settings	Controls the overall appearance and behavior of the element. Options: Height: Adjusts the vertical size of the element. Width: Sets the horizontal size of the element. Number of Messages: Specifies how many messages will be displayed within the element. Duration of Message (sec): Determines how long each message will stay visible. Animation: Adds animation effects to the element, such as sliding or fading. Animation Speed (sec): Sets the speed at which animations occur.
Messages	Customizes the look and feel of messages within the element.
Typography	Adjusts the font style, size, and color of the message text.
Border	Adds or customizes the border around the message.
Background	Defines the background, which can be a solid color or an image.
Sticky	Keeps the element fixed in a specific position on the page as users scroll.
Close Button	Adds a button that allows users to close the element manually.
Close on Click	Enables the element to close when a user clicks anywhere on it.

Progress bar

The Progress Bar visually displays how close a user is to completing an action, such as reaching a cart value for free shipping or unlocking a discount. It shows users their progress in real time and encourages them to complete their purchase or action. Refer to the table below for the available editing options.

Option	Description
Position	Defines where the progress bar will appear on the page (above, below, or next to content).
Pattern	Select the visual pattern for displaying progress. Options: Simple: Use a basic progress bar design. Percentage: Show progress as a percentage. Tag: Display progress with specific tags. Interval-Threshold: Show progress based on intervals and thresholds.
Settings	Configure links for different states of the progress bar. Options: Incomplete Bar Hyperlink: Add a link to be used when the progress bar is not complete. Completed Bar Hyperlink: Add a link to be used when the progress bar is complete.
Interval	Define how progress is measured and displayed. Options: Unit: Select whether progress is based on cart value or cart quantity. Target: Set the goal or target value for the progress bar. Ongoing Message: Display a message while progress is being made. Success Message: Show a message when the target is reached. Threshold Progress Color: Choose a color for the progress bar when it reaches a threshold.
Style	Customize the appearance of the progress bar. Options: Bar Color: Set the color of the progress bar. Corner Radius (%) Adjust the roundness of the bar's corners. Loader Style: Choose the style of the progress indicator (Solid or Tilted Lines). Preview: Test different values to see how the progress bar behaves in action.

Coupon On Sliding Drawer

The Coupon on Sliding Drawer is a side panel feature that slides out when triggered. It is a great way to present discount offers or special deals without interrupting the user experience. Users can view and apply the coupon code directly from the sliding drawer, boosting engagement and conversions. Refer to the table below for the available editing options.

Option	Description
Position	Configure where the coupon drawer appears and how it opens. Options: Button Position: Set the location of the button that triggers the coupon drawer. Open Coupon Drawer: Define how the coupon drawer opens when activated.
Settings	Customize the behavior and interaction options of the coupon drawer. Options: Overlay: Enable or disable the overlay that appears behind the coupon drawer. Click Outside to Close: Allow the drawer to close when users click outside of it. Close Button: Add or customize a button for manually closing the coupon drawer.
Content	Define the content and layout inside the coupon drawer.
Style	Adjust the visual design of the coupon drawer. Options: Background Fill: Choose the fill color or pattern for the drawer's background. Corner Radius (px): Set the roundness of the drawer's corners. Outer Container Fill: Adjust the fill color or pattern for the drawer's outer container. Close Icon Fill: Select the color or style for the close icon. Background Stroke: Add or customize the border around the drawer's background. Stroke Thickness (px): Set the border's thickness around the background. Corner Radius (Overall) (px): Define the overall roundness for all drawer corners.

Tab Talk

Tab Talk is an interactive tab that displays helpful information or starts a conversation with users. It can be placed on the edge of your website, allowing users to click and view messages like FAQs, tips, or even chat support. Refer to the table below for the available editing options.

Option	Description
Style	Customize the appearance and animation of the tab. Options: Text on Tab: Set the text label on the tab. Animated Icon: Enable or choose an animation for the tab’s icon. Add Custom Animated Icon: Upload and apply a custom animated icon for the tab. Select Tab Animation: Choose the type of animation effect for the tab when activated.
Preview	View how the tab will appear and function with the selected settings.

Back to top

The Back to Top Icon helps users navigate long pages by giving them a quick option to return to the top of the page. This element enhances user experience, especially on content-heavy pages, by making navigation smooth and convenient. Refer to the table below for the available editing options.

Option	Description
Position	Configure the placement and spacing of the Back to Top button. Options: Button Position: Set the location of the button on the screen. Margin Bottom: Define the space between the button and the bottom edge of the screen.
Settings	Customize the behavior and content of the button. Options: Show Button After (%) From Top: Specify the percentage of page scroll from the top after which the button will appear. Scroll Up Duration (seconds): Set the duration of the scroll-up animation when the button is clicked. Button Text: Enter the text for the button, with a maximum of 30 characters. Add Image: Upload and apply an image to be used as the button.
Style	Adjust the visual design of the button. Options: Arrow Style: Choose the style of the arrow icon on the button. Arrow Fill: Set the fill color or pattern for the arrow icon. Button Fill: Define the fill color or pattern for the button background. Corner Radius (px): Adjust the roundness of the button's corners. Stroke Color: Choose the color of the button’s border or stroke. Stroke Thickness (px): Set the thickness of the button’s border or stroke. Shadow: Add a shadow effect to the button for depth. Shadow Color: Select the color of the button’s shadow.