Introduction
Rivo Loyalty has tons of customization features so that you can add your brand style and personality to every part of the widget screen. Check out this guide on adding colors and editing the texts of the widget screen to match your style!
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.
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.
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.
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.