A loyalty widget is a place for your customers to interact with your loyalty program and also access any discount codes sent via marketing emails. Here they can sign-up, check their points balance, earn more points and claim rewards.
How to customize the loyalty widget
1. In your Marsello admin, go to Display > Customer experience > Online > Online widget
📝 Note: Marsello is currently in the process of transitioning to the new loyalty widget design screens. If you are still seeing the old design options, please click on this link to upgrade.
2. Click on the Widget tab. Here, you can customize the design of your loyalty widget.
How to select a theme color
1. Click Theme Color
2. Add your store's brand color by entering your hex color code or simply click on the color picker to select your color.
💡Quick Tip: Not sure what your store's hex color code is? The HTML Color Code tool can help you find it easily.
3. Click Save & Publish
Choose a layout (and add a header image)
1. Click Layout
2. Under Layout Type, click Center to open the drop-down
3. Select the Layout type that best suits your store.
Slide panel (1st example): This layout has a smaller image option, slides in from the side, sits on the side of the page.
Center (2nd example): This layout has a large image option, rounded corners & opens in the middle of the page.
Floating panel (3rd example): This layout has a smaller image option, slides in from the side, has rounded corners & floats on the side of the page.
Basic (4th example & default style): This layout displays in the middle of the screen
4. Click Choose File to upload an image (only available on Center, Slide & Float)
To make sure the images are optimized to the widget layout type please use the suggested size dimensions:
Center layout: 500px width by 650px height
Floating panel layout: 500px width by 200px height
Side panel layout: 500px width by 200px height
💡Tip: Need help re-sizing your image? Try this free online tool Photoresizer.com.
📝 Note: To replace the image with another image, simply click Choose File and select a new image from your device.
5. Click Save & Publish
Customize the widget font
1. Click Font
2. Click Open Sans to open the drop-down
3. From the font list, select your chosen font
📝Note: If your brand uses a custom Google Font, click Use Google Font, then follow these instructions on how to add your custom font to the loyalty widget.
4. Click Save & Publish
Customize or translate your loyalty widget text
1. Click Customize text / Translation
2. Click Go to the text editor to open the text customization page
3. Next to Customize text for: click Rewards tab to open the drop-down
4. Click the name of the widget page you want to edit
Rewards tab: This page lists your rewards that your customer can earn points towards and redeem.
Earn tab: This page lists the different ways that your customers can earn points.
View coupon page: This page displays the customer's unique discount code.
On your birthday page: This page collects the customer's birthday.
Complete profile page: This page collects the customer's additional details e.g. mobile number, gender & birthday.
Claim referral coupon page: This page is where the referred friend enters their details (name and email address) to be able to receive their unique discount code.
Get referral link page: This page is where the customer can access their unique referral link that they can share with their friends and family.
5. Edit (or translate) the text to your preferred content
6. Click Save & Publish
📖 Learn more: Customizing/translating your loyalty widget text
How it works – Your customers' experience
How customers access their loyalty profile online:
When visitors or customers are on your online store they'll be able to click on your loyalty tab (if enabled) to sign-up or login to their loyalty profile on your loyalty widget.
Or after they've completed their online order, they will receive your loyalty points earned email (if enabled). On this email, your customers can click through to see their loyalty profile on your loyalty widget.
How customers access their loyalty profile in-store:
When your customers earn loyalty points for their order, they will receive your loyalty points earned email (if enabled). On this email, your customers can click through to see their loyalty profile on your loyalty widget.
What customers can do on your their loyalty profile:
Here they'll be able to see the rewards that they can earn points towards and also complete actions like liking on social media or completing their profile to earn more points.
📝 Note: If you are an omnichannel retailer, any time that the customer clicks to open their loyalty profile it'll automatically open your loyalty widget on your online store.
FAQs
Q. How can I embed the loyalty widget on my store's landing page?
A. Currently, there isn't a way to embed the loyalty widget on an eCommerce site. However, if this is a feature that will help your store, please let our support team know.
Q. How long does it typically take for the loyalty widget to appear on an eCommerce site once enabled and made visible on desktop and mobile?
A. The loyalty widget should appear immediately.
Q. Is it possible to edit the terms and conditions URL link in the loyalty widget?
Yes, it is possible to edit the terms and conditions of the URL link in the loyalty widget. You can make the update under the display > customize text for welcome page> terms and privacy text.
Q. Is there a way we can resize the online loyalty widget tab in mobile view?
A. Currently, there isn't a feature available that will allow you to resize the online loyalty widget tab in mobile view. If this is a feature you are interested in, please reach out to our support team and let them know of your interest.
Q. Is it possible to move the location of the rewards button (loyalty tab) on my website?
A. Yes, it is possible to relocate the loyalty tab on your website. To do this from your Marsello dashboard, could I get you to go to loyalty > rewards program > online widget > tab > tab position and select the desired location.
Q. Am I legally required to keep the Marsello terms and privacy policy on my loyalty
widget?
A. Currently, it is a requirement to keep Marsello's terms and privacy policy visible on your loyalty widget. If customizing the terms and privacy policy is a feature you are interested in, please reach out to our support team and let them know of your interest.