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: If set to Floating, the widget will be displayed, with padding, in the location defined by the merchant The Docked option is similar to Floating, except all padding is removed and the widget is 'docked' to the edge of the screen. Finally, the Hidden option hides the collapsed state of the widget completely.
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
1. Access Okendo Admin > Settings > Widgets under the Settings page
2. Verify that the Enable Review Widgets toggle switch is turned on
Enable Okendo App Embed in the Shopify Theme Customizer
1. Access the Shopify admin panel > Online Store > Themes
2. Locate desired theme and select Customize
3. Go to the Theme Settings tab and click it
4. Locate the App Embeds tab
5. Toggle on the Okendo Reviews app embeds switch
Enable the Floating Widget in Okendo Admin
1. Access Loyalty > On-Site Displays > Floating Widget > General
2. 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.