Setting up a Loyalty widget that brands

Learn how to customize your loyalty widget to seamlessly integrate with your brand's design. Discover tips on choosing colors, arranging content, and enhancing user interaction to boost customer engag

In this post, we will guide you through setting up our loyalty program's floating widget to seamlessly match your brand. This widget serves as an effective tool for engaging customers and enhancing their loyalty experience.

Why you need a floating widget

The floating widget is a key feature of our app, acting as a gateway to your customer loyalty program. It provides a visible and accessible interface where customers can easily learn how to earn and redeem points, enhancing their engagement with your brand.

Tailoring its placement and appearance is crucial to ensure that it not only complements but also enhances your site's design and represents your brand effectively. In the following sections, we'll explore customization options that help you optimize the widget's integration with your overall store layout.

Our design principles

Our design strategy focuses on flat and minimal aesthetics that look modern and convey professionalism. We aim for the widget's color scheme to integrate seamlessly with your brand, enhancing the user interface while maintaining your brand identity. You have complete freedom to adjust the design specifics to meet your needs.

Anatomy of the widget

Before diving into customizing the widget, it's essential to familiarize yourself with its components. Understanding these elements will help you effectively match your brand with our design system, ensuring a seamless integration that enhances user engagement.

Header

The header serves as the first visual touchpoint for users interacting with the widget. It features a welcoming message (Welcome to our store) that sets the tone for user engagement and can be personalized with a banner background, choosing from your brand colors or custom images to align with your brand’s aesthetic. Utilizing your brand colors or a distinctive banner background is highly recommended to make a lasting impression.

Additionally, the membership card, integrated within the header, provides a direct call-to-action for users to either join the program or sign in. This card is crucial for making a strong initial impact and driving user engagement. The membership card design is fully customizable through its dedicated tab, accommodating various states such as logged-in and guests. If your program includes VIP tiers, the appearance of the card will adjust accordingly to reflect these distinctions.

Membership Card

Positioned directly beneath the widget's header, the membership card functions as a digital card and a central element for user interaction. For guests visiting your site, the card offers a clear call-to-action, inviting them to join the program or sign in.

Once logged in, the card transitions to display the user's balance, showing accumulated points like a status display. This visual shift not only reinforces the card's utility but also enhances the sense of reward and progression for registered users.

Customizing the card to align with your brand is straightforward. You can set the text and background colors, opting for a sleek black-and-white theme for simplicity and elegance, reminiscent of prestigious black credit cards, to convey exclusivity.

Another idea is to set the card to be white background with black text, along with primary color button for the CTA.

Ways to Earn and Ways to Redeem

In the heart of the loyalty widget, users can explore how they can both accumulate and utilize their points within your store.

Earning points: This section highlights the various activities that customers can engage in to earn points, such as making purchases or participating in promotional events. It is designed to motivate ongoing interaction with your brand by clearly outlining the actions that lead to rewards.

Redeeming points: Just as important is showing customers the benefits they can unlock with their points. From discounts to special offers, this section showcases the tangible value of participating in your loyalty program and encourages continued engagement.

Both sections support the "See more" button if there are more than two programs available, preventing the section from taking up too much space. Additionally, you have the flexibility to customize these sections further by changing the banner images for each, enhancing the visual appeal and making them resonate more with your brand's aesthetic.

Referral and activity blocks

Referral program: If the merchant enables the referral program, customers will be able to see this block. This will take the customer to the referral program page of the widget.

My activities: Available only to logged-in users, this section tracks their loyalty interactions, like points earned and redeemed, offering a clear view of their participation.

Tailor the widget

Following our guide as a checklist will ensure that your widget aligns seamlessly with your store design, enhancing customer engagement and reinforcing your brand identity. Here’s how you can tailor each component to fit perfectly with your brand’s aesthetic:

Choose your brand color

Selecting the right color for your widget is crucial as it directly reflects your brand’s identity. You have the option to choose primary and secondary colors. By default, our system uses a gradient that blends these two colors on your widget's header, creating a dynamic visual appeal.

If you prefer a more uniform appearance, you can set both the primary and secondary colors to be the same, effectively using a single-color mode. This flexibility allows you to control how subtly or prominently the widget stands out on your site, ensuring it attracts attention without overwhelming your customers.

Change your banner

For your widget's header banner, you have several choices to make sure it fits well with your brand's look. You can use a single color, blend your primary and secondary colors for a gradient effect, or upload a custom image.

If you decide to use an image, our system can automatically pick out colors from that image to use throughout your widget. This helps keep your widget's colors consistent with your brand and makes the design process easier by matching everything neatly.

Rearrange the sections

Optimize the layout of your widget by adjusting the placement of content blocks to better suit the flow of customer interactions.

This customization enhances the usability and effectiveness of your loyalty program. Easily drag and rearrange sections like "Ways to Earn," "Ways to Redeem," "Milestone Rewards," "Refer Your Friends," and "Point History" to prioritize the elements most relevant to your strategy. Tailoring the order in which these sections appear can significantly impact user engagement, ensuring they see the most pertinent information first.

Choose font

By default, the widget uses your store's font to maintain a consistent look. You have the option to choose a different font that may better suit your branding.

Note that using an external font will result in extra resource loading on your website. It is safe to go with using your store's font.

Buttons

For a cohesive look, the button colors within your widget are set by default to match your primary brand color. This ensures a seamless integration with your overall brand theme.

If you're aiming for a cleaner and more modern appearance, consider enabling the minimal button mode. This setting simplifies the button design, reducing visual clutter and enhancing the user interface for a more streamlined experience.

Customize the floating button

Enhance the functionality and style of the floating button on your widget by selecting the appropriate configuration from the available options. You can choose the launcher style—either an icon only, label only, or both icon and label. This flexibility allows you to match the button's appearance with your website’s design, ensuring it's both recognizable and engaging.

The button's color can be set to match your primary brand color, making it seamlessly integrate with the rest of your widget's design. Additionally, you have the choice to align the button at the bottom left or bottom right of your widget. This strategic placement ensures that the button is easily accessible for users without cluttering other crucial content on your site.

Consider these settings carefully to create a floating button that not only looks good but also enhances the interactive experience of your loyalty program.

Advanced settings

Optimize how the loyalty widget integrates with your store by customizing its display settings. Decide which pages it appears on, or configure it to only show for logged-in customers, ensuring it uses space effectively without overwhelming your site. For detailed instructions on managing these settings, visit our comprehensive guide: Advanced Widget Settings and Customization.

Translation

If your store caters to a diverse customer base, providing translations for your widget can enhance the user experience. This demonstrates inclusivity and attention to customer needs.

Customize the text within the widget to reflect the languages of your target audience, making it easier for all customers to understand and participate in your loyalty program in the Joy Loyalty > Translations.

See our post on translating the widget content, checkout, and point calculator.

Naming your store currency is also an important step of the text customization.

Sum up

By following this checklist, you will ensure that every element of your loyalty widget not only meets your business needs but also resonates with your brand and enhances the overall customer experience. Tailoring your widget in this detailed manner will lead to increased user engagement and a stronger brand presence within your online store.