Introduction
Rivo Loyalty's widget screen is fully customizable to match your brand's unique style and identity. This guide walks you through customizing colors, text, shapes, fonts, and layout options to create a seamless experience for your customers.
Customize theme colors
Choose the best colors to fit your brand! From this screen, you can select the color of the banner, program icons, the launcher & signup buttons, and even text & links.
From the Loyalty dashboard, go to On-Site Displays > Floating Widget > Colors.
Select the colors you'd like to use from the palette, or enter the color's hex code.
Preview your changes in the live preview on the right.
Save your changes.
💡 Pro Tip: You can preview the color of the widget launcher button below the open panel in the live preview.
💡 Pro Tip: For a cohesive look, consider matching your header background color to your brand's primary color and using complementary colors for buttons and links.
Available color options
Here's a breakdown of all color settings and where they appear in your widget:
Header Background: The background color of the top banner area
Header Text: The color of text that appears in the header/banner
Title Text: The color of titles throughout the widget
Regular Text: The color of standard paragraph text and descriptions
Button Background: The background color of action buttons
Button Text: The color of text on buttons
Widget Button Background: The background color of the floating launcher button
Widget Button Text: The color of text on the launcher button
Link Color: The color of clickable links throughout the widget
Icon Color: The color of icons displayed in the widget
Customize the widget text
Rename or edit your Rewards Program title here. This is the Header text and the caption on the widget's banner.
From the dashboard, go to On-Site Displays > Floating Widget.
Click Widget Text > Header under Visitor.
Edit the text to your preference.
Save your changes.
📝 Note: If your title and caption are too long, the text may end up truncated with an ellipsis (...) on the live version of the widget. The character limit before truncation is 19 for the Title and 35 for the caption.
Customize the account creation text
Here you can edit the section of the widget that encourages customers to sign up or sign in to your Loyalty program.
From the dashboard, go to On-Site Displays > Floating Widget.
Click Widget Text > Account Creation under Visitor.
Edit the texts to your preference.
Save your changes.
Customize the points text
Customize the text that introduces people to your Loyalty Program.
From the dashboard, go to On-Site Displays > Floating Widget.
Click Widget Text > Points under Visitor.
Edit the texts to your preference.
Save your changes.
Customize the member's header text
This is the text that members see on top of the banner above their points. If you've got a custom name for your points (e.g. VIP Points), this is a great place to include it!
From the dashboard, go to On-Site Displays > Floating Widget.
Select Member near the top of the page and click Header.
Edit the text to your preference.
Save your changes.
Customize the widget corners and shape
Give your Loyalty widget a fresh look to match your websites brand and theme style. Using the shape settings, you can edit the launcher widget screen edges, sections, buttons and text field shapes. The three settings for adjusting the shape are rounded, circle and square.
Buttons: Make the buttons circle, round or square to add that unique look.
Sections: Edit the card style by adding in border radius, or customizing a squared look.
Text Fields: Not pictured above, adjust this to edit any text field. For example, the 'refer a friend' text field.
Launcher Edges: This setting controls the corners of the widget launcher itself.
💡 Pro Tip: For a modern look, try using rounded corners for buttons and sections. For a more classic or traditional look, square corners might be more appropriate.
Customize the primary and secondary fonts
Add an extra level of customization to your widget by choosing the primary and secondary fonts for your brand and design preferences.
From the dashboard, go to On-Site Displays > Floating Widget.
Select Fonts.
Use the dropdown menu to select the Primary Font and Secondary Font.
Save your changes.
Tip: Choose inherit to use your site font. Or import fonts via CSS.
📝 Note: Primary fonts are used for titles and headers, while secondary fonts are used for button text, links, descriptions, and paragraphs.
Customize the launcher button
The launcher button is what your customers click to open the loyalty widget. Customize it to match your brand and improve engagement.
Desktop Launcher
From the dashboard, go to On-Site Displays > Floating Widget > Launcher.
Select the Desktop tab.
Choose the placement (left or right side of the screen).
Set the side padding and bottom padding to position the button.
Select a Widget Button Type: Icon and text, Image only, or Text only.
Customize the button text if you selected a type that includes text.
Save your changes.
Mobile Launcher
From the dashboard, go to On-Site Displays > Floating Widget > Launcher.
Select the Mobile tab.
Configure the mobile-specific settings, which include the same options as desktop but optimized for mobile screens.
Save your changes.
Launcher Icon
Choose between default icons or upload your own custom icon:
Select Default icon to choose from pre-designed options like star, shopping bag, crown, or tag.
Or select Custom icon to upload your own image (recommended size: 32px by 32px).
Save your changes.
💡 Pro Tip: For better mobile experience, you might want to use a simple icon without text to save screen space.
Customize panel order
Rearrange the order of panels within your loyalty widget to highlight the most important features for your customers.
From the dashboard, go to On-Site Displays > Floating Widget > Panel Order.
Drag and drop the panels to reorder them based on your preferences.
Available panels include: Points, Rewards, Referrals, VIP Tiers, and more depending on your enabled features.
Save your changes.
💡 Pro Tip: Place your most important or popular features at the top for better customer engagement.
Widget visibility settings
Control when and where your loyalty widget appears to provide the best customer experience.
From the dashboard, go to On-Site Displays > Floating Widget > Hide Widget.
Choose from the following options:
Show on both desktop and mobile: Display the widget on all devices.
Hide on mobile devices: Show the widget only on desktop browsers.
Hide on desktop devices: Show the widget only on mobile browsers.
Hide widget permanently: Completely disable the widget across all devices.
Save your changes.
📝 Note: If you hide the widget on specific devices, make sure to provide alternative ways for customers to access their loyalty program, such as through a dedicated page or account section.
Custom Widget Banner
Add a custom banner image to your loyalty widget to enhance its visual appeal and reinforce your brand identity.
From the dashboard, go to On-Site Displays > Floating Widget > Banner.
Upload your custom banner image or choose from available options.
Preview how your banner looks in the widget preview.
Save your changes.
📝 Note: For optimal display, use an image that matches the widget width with a height that works well with your content. Images that are too tall might push important content below the initial view.
Common questions
Can I customize the widget button and adjust its position?
Yes, you can! Please see our guide on this: Customizing the widget button and screen position.
Can I add a background image to my banner?
Here is our guide to adding these images: Custom Widget Banner and Icons.
Can I use custom icons in my loyalty widget?
Yes! You can upload custom icons for your launcher button and various sections within the widget. Navigate to the appropriate section in the customization settings and look for the "Custom Icon" option.
Can I hide the widget on mobile devices?
Yes, you can control widget visibility for different device types. Go to On-Site Displays > Floating Widget > Hide Widget to configure these settings.
How do I change the order of panels in my widget?
You can rearrange the order of panels by going to On-Site Displays > Floating Widget > Panel Order and dragging the panels into your preferred sequence.