Branding

 Branding

Introduction

The Branding module in Uloyal allows you to customize the widget's branding to meet your specific requirements. It offers a variety of options to tailor the widget for your store.

Overview of the Dashboard

The dashboard includes four options for personalizing the branding of the widgets: Welcome Screen, Onboarding, Theme, Launcher

Welcome Screen

The welcome screen offers two options

1. Default: Utilizes a standard screen based on the brand's primary colors.
   
   

2. Custom GIF: Allows you to upload a personalized image or GIF. 

• On the right side, you can preview your welcome page as it will appear on your website.

Onboarding Screen

The onboarding screen offers various options, Banner Image, Earn Zone, Offers & Discounts, and Tier Upgrade.

Banner Image

• Default: Automatically sets a background based on brand colors.
• Customized Image:

  • You can upload a banner image of your choice and organize the different features of the program accordingly.

  • This image will be displayed as a banner across other modules when users are signing up.

Earn Zone

• Purchase and Earn (enabled by default): Purchase & Get Points module is always visible on onboarding screen.
  
  

• Earn Zone Tasks: Lets you customize the visibility settings for "Earn Zone" on the onboarding screen.
  
  

• Invite Friends and Earn: Enables you to customize the visibility for "Invite A Friend" section on the onboarding screen.

Offers & Discounts 

This section enables you to showcase the various methods for redeeming earned points.

• Coupons: Display coupons that loyalty program members can acquire using their points

• Games Arena: Highlight the microgames available for loyalty program members to play and win.

Theme 

Under the theme, there are the following subcategories: Banner Image, Colors, Font, Containers and Panel Order.

Banner image

• Default: Automatically sets a background based on brand colors.
• Customized Image:

  • You can upload a banner image of your choice and organize the different features of the program accordingly.

  • This image will be displayed as a banner across other modules when users are signing up.
    

Colors

• Primary Color: Choose a color for your widget that aligns with the color theme of your website.

• Font Color: Pick a color for your font that matches the color theme of your website.

Fonts
Please select the font style you would like to apply to the text in your widget

• Website Font: The font will match the default font used on the website.

• Choose from a variety of other styles under the "Check Other Fonts" section.

Containers

Select the shape that you want for your widget’s containers and buttons.

You have two options for containers

• Rounded 

• Squared

Two options for buttons:

• Filled

• Outlined

Panel order

• This section allows you to modify the program for visitors and members.

• Rearrange the panels by dragging them.

• Use the eye button to hide or unhide each panel.

• Reset to default: Enables you to re-arrange the panel order back to the default order.

Launcher

The launcher section offers customization options for the widget; Visibility, positioning, Icon, and label are all present in the launcher 

Visibility

• Hide Widget Launcher Toggle: This allows you to control the visibility of the Uloyals widget on your website.

• Widget Link Section: Contains a read-only code. Paste this code into the desired navigation menu button to integrate the Uloyals widget functionality into your navbar. 
  
  

• Use Case
  

• If you prefer a navbar button instead of a widget on your website, you can:

  1. Turn off the "Hide Widget Launcher" toggle, hiding the widget.

  2. Create a new navbar button named "Rewards". 

  3. Paste the code from the "Widget Link" section into this button.

  4. Click here to know more about adding a CTA button on your website.

• This way, the main access point to the Uloyals rewards home panel will be through the "Rewards" navbar button.

Spacing

• Side Spacing: Adjusts the widget's position horizontally

• Bottom Spacing: Adjust the widget's position Vertically.

These settings offer full control over the placement of the Uloyals widget.