Skip to main content
Installing and Configuring the Floating Widget
Written by Glenn Lee
Updated over a week ago

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


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.


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


The Floating Widget offers several general settings that can be configured:

Configurable Options


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.


Choose the position of the Floating Widget across your store. Options include Left, Bottom Left, Bottom Middle, Bottom Right, and Right.


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



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


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).


Configurable Options


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.


Configurable Options


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.


I cannot see the Floating Widget

Please make sure the follow are enabled:

  1. 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

  2. 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

  3. 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

  4. 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:


For example

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:

An example implementation:

// Function to open Loyalty
function openLoyalty() {
if (window.okeLoyaltyApi) {;
else {
document.addEventListener('oke-loyalty-widget-loaded', () => {; });

// Listen for hash change
window.addEventListener('hashchange', function () {
if (location.hash === '#rewards') {

// Check the hash when the page is loaded
if (location.hash === '#rewards') {

If you have any specific questions or need further assistance, feel free to reach out to our support team.

Did this answer your question?