The Loyalty Widget serves as an unobtrusive hub for members to access their loyalty information, making it a crucial component of the customer-facing experience. It is displayed on every page. This article will guide you through the configuration process for the Floating Widget in Okendo Admin.
In this article, you’ll learn about:
Installing the Floating Widget
Configuring the look and feel of the Floating Widget
⚠️ NOTE
Before proceeding, please ensure that Okendo widgets and app embeds are enabled. Review the Troubleshooting section of this article to find out how.
Configuring the Floating Widget
To access the Floating Widget, go to Loyalty > On-Site Displays > Floating Widget. Note the configurable elements of the widget on the left and the preview pane on the right. Review changes to the Floating Widget, in real time, via the preview pane.
Preview Settings
Use the Preview Settings to simulate how the Floating Widget will look and feel for customers who are logged in, are of a certain tier group (where applicable) or have a particular points balance. Access Preview Settings by selecting the 
icon.
Quickstart
Simplify the process of styling the Floating Widget by selecting Quick Start > Auto Style. Auto Style can create an entire color palette, based on the selections below and applies them across different elements of the Floating Widget:
Brand Primary Color
Primary Text Color
Secondary Text Color
General
The Floating Widget offers several general settings that can be configured:
Configurable Options | Description |
Show Floating Widget | Displays or hides the Floating Widget. |
Header First Line | Customize the first line of the header in the Floating Widget.
|
Header Second Line | Customize the second line of the header in the Floating Widget. |
Position | Choose the position of the Floating Widget across your store. Options include Left, Bottom Left, Bottom Middle, Bottom Right, and Right. |
Modules
Configure which loyalty program modules to display on the Floating Widget. Choose from:
Earn and Redeem: A module that displays all available earn rules and redemptions available to a customer.
Move Up Tiers: A module that displays the customer's tier status, available tiers (and associated benefits) and tier progress. This module will only show if VIP Tiers are enabled and can be optionally removed from the Floating Widget.
Bubble Style
Use this section to configure the collapsed state of the :
Configurable Options | Description |
Icon | Select an icon to display on the Floating Widget, in it's collapsed state.
|
Style on Small Screens | This setting defines how the Floating Widget behaves on small screens (e.g., mobile devices). There are three settings:
|
Style on Large Screens | This setting defines how the Floating Widget behaves on large screens (e.g., desktops). The same options for small screens, are available here.
|
Background Color | Choose the background color for the collapsed widget.
|
Bubble Color | Set the border color around the collapsed widget. |
Text Color | Define the color of the text.
|
Background Hover Color | Customize the background color on mouse hover.
|
Text Hover Color | Adjust the text color on mouse hover. |
Expanded Widget Style
Use this section, to configure the expanded state of the Floating Widget.
Configurable Options | Description |
Header Image | Display an image in the header on the home screen of the Loyalty Widget. Recommended formats include GIF, JPEG, JPG, and PNG with a recommended width of less than 1400px. |
Brand Primary Color | Set the background color for the header on the home screen. This color is used when there's no header image. |
Brand Positive Color | Used for positive messaging, including tick icons and success alerts. |
Hide Okendo Branding | Toggle to remove 'Powered by Okendo' branding from the Loyalty Widget (available on Growth plans and above). |
Text
Configurable Options | Description |
Primary Text Color | Color used for secondary headings and labels (excluding the header on the home screen).
|
Secondary Text Color | Color for text information, such as points balance and earning activities. |
Header Text Color | Color for header text on the home screen. |
Link Text Color | Color used for link text throughout the Loyalty Widget. |
Buttons
Configurable Options | Description |
Background Color | Customize button colors. |
Text Color | Set the color of the button text. |
Border Color | Define the color of button borders. |
Background Color Hover | Configure button colors on mouse hover. |
Text Color Hover | Adjust button text colors on mouse hover. |
Border Color Hover | Set the color of button borders on mouse hover. |
Troubleshooting
I cannot see the Floating Widget
Please make sure the follow are enabled:
Enable Widgets in Okendo Admin
Access Okendo Admin > Settings > Widgets under the Settings page
Verify that the Enable Review Widgets toggle switch is turned on
Enable Okendo App Embed in the Shopify Theme Customizer
Access the Shopify admin panel > Online Store > Themes
Locate desired theme and select Customize
Go to the Theme Settings tab and click it
Locate the App Embeds tab
Toggle on the Okendo Reviews app embeds switch
Enable the Floating Widget in Okendo Admin
Access Loyalty > On-Site Displays > Floating Widget > General
Verify that the Show Floating Widget toggle switch is turned on
Ensure the loyalty program has been launched. You will know this if under Loyalty > Settings > General, the Backdate Program section is greyed out.
I would like to have the Floating Widget open on page load. How can I do this?
To open the Floating Widget on page load, please add the following, at the end of the desired URL:
/?okendo_loyalty_open=true
For example https://mystore.com/?okendo_loyalty_open=true
When a customer clicks on a call to action with this underlying URL, the Floating Widget will automatically open. This is particularly helpful when you want to open the Floating Widget from a call to action embedded in an email or SMS.
How can I open the Floating Widget from a menu option or other on-site call to action ?
You could add the following Javascript functions to control the visibility of the floating widget:
okeLoyaltyApi.open()
okeLoyaltyApi.close()
An example implementation:
<script>
// Function to open Loyalty
function openLoyalty() {
if (window.okeLoyaltyApi) {
window.okeLoyaltyApi.open();
}
else {
document.addEventListener('oke-loyalty-widget-loaded', () => { okeLoyaltyApi.open(); });
}
}
// Listen for hash change
window.addEventListener('hashchange', function () {
if (location.hash === '#rewards') {
openLoyalty();
}
})
// Check the hash when the page is loaded
if (location.hash === '#rewards') {
openLoyalty();
}
</script>
If you have any specific questions or need further assistance, feel free to reach out to our support team.