Skip to main content
All CollectionsOn Site Displays
Customizing the Rewards Widget
Customizing the Rewards Widget

In this article we learn how to customize the rewards widget

Updated over a week ago

Visit the Rewards Widget Page on your nector dashboard.

Visibility

Switch to the "Style & Visibility" tab on this page. Here, you can control whether to show/hide the rewards widget completely or only on desktop or mobile as per your needs.

Scroll to the "Visibility" section on this page. This toggle button here is used to enable or disable the rewards widget across the website.

Show/Hide on Desktop or Mobile Separately

You can also show or hide the rewards widget separately on desktop or mobile. To control desktop visibility, scroll down to the "Desktop Settings" and to control the mobile visibility, scroll down the "Mobile Settings" section on this page. You will find the toggle button to hide the rewards widget individually for desktop and mobile.

For example, to show the widget on desktop but to hide in mobile devices, here is how the settings look like:

Once you make any changes, scroll to the top or bottom of the page and click on the "Save" button.

Show/Hide on Specific Pages

You can also control whether to show or hide the rewards widget on certain pages of your website. For example, you may want to hide the widget on a promo page on your website.

Scroll to the "Advanced Visibility" section on this page and enter the pages on which to show or hide the reward widget.

If you only want to show the rewards widget certain pages of your website, use the "Show Only On These Pages" field.

If you only want to hide the rewards widget on certain pages of your website, use the "Hide Only On These Pages" field.

Ideally, don't use both the fields as the same time.

To match pages with some common path name, you can use the "*" character in the path. For example, to show the widget only on the product pages of your shopify store, you can use path "/products/*".

For example, to hide the rewards widget the login and signup pages, you can do as shown in the below image.

Once you make any changes, scroll to the top or bottom of the page and click on the "Save" button.

Widget Style

Nector supports three different styles for the rewards widget: The edge, floating and sticky style. See the below image for how the different styles look like.

Edge Style:

Floating Style:

Sticky Style

To change the style of the widget, Switch to the "Style & Visibility" tab on this page. And scroll down the "Desktop Settings" section, and select the desired style under "Widget Type" field. If you have selected the "Floating" or "Sticky" style, you can optionally change the text that is shown under the "Widget Text" field.

Scroll down the "Mobile Settings" section, and change the "Widget Type" here as well.

Once you make any changes, scroll to the top or bottom of the page and click on the "Save" button.

Changing the icon of the widget

You can change the default gift icon shown in the widget. Scroll down the "Icon" section, and enter the link to the icon to be used.

For best results, make sure the icon has a good resolution and there is no background in the image.

Once you make any changes, scroll to the top or bottom of the page and click on the "Save" button.

Widget Position

By default, the rewards widget is shown in the bottom left section. To change this, switch to the "Style & Visibility" tab on this page. To change the position of the widget on desktop, scroll down to "Desktop Settings" section and change the "Position" and "Offset". To change the position of the widget on mobile, Scroll down the "Mobile Settings" section and do the same.

Position: The supported positions are bottom right, bottom left, top right and top left.

Offset: Offset is the distance between the top or bottom edge of the screen and the widget. If you have selected top left or top right position, then offset is the distance from the top of the screen. If you have selected bottom left or bottom right position, then offset is the distance from the bottom of the screen.

Once you make any changes, scroll to the top or bottom of the page and click on the "Save" button.

Banner & Widget Content

By click on the rewards widget, a popup opens where the customer can view their coins, earn and redeem coins, and do many more things.

To customize the content of this popup, switch to the "Banner & Content" tab on this page.

This is how the popup looks like:

By default, your brand color is shown in the top section of the popup. To add/change the banner in place of the brand color, scroll to the "Banner" section on this page. And upload a banner with the dimensions mentioned there.

To change the content shown when the customer is logged out, scroll to the "Logged Out Config" section on this page. Here, you can change the title, description and the various CTA buttons' text.

To change the content shown when the customer is logged it, scroll to the "Logged In Config" section on this page. Here, you can change the title.

Once you make any changes, scroll to the top or bottom of the page and click on the "Save" button.

Partner Offer Store

Partner offer store has discounts & offers from various partner brands of Nector. Your customers will have a lot more options redeeming their coins.

To get your brand listed in the partner offer store, get in touch with us via the live chat or write to us at support@nector.io.

To configure the partner offer store, switch to the "Partner Offer Store" tab on this page. You can disable the partner offer store entirely or you can select which brands or category of brands to show or hide.

By default, all brands that conflict with your brand's category are disabled.

Once you make any changes, scroll to the top or bottom of the page and click on the "Save" button.

Did this answer your question?