Introduction
We know that every online store is different and screen real estate is precious. There's no 'one size fits all' when it comes to where a button is on your website. This guide shows you how to customize the widget button so it's a perfect fit for your store.
💡 Pro Tip: Change any of these settings for mobile by selecting it near the top of the page. Changes to mobile will not reflect on desktop and vice versa.
Changing the placement
Choose the side of the screen on which you'd like to place the widget button. Follow these steps:
From the dashboard, go to On-Site Displays > Floating Widget.
Click Widget Button.
Choose from either the left or right-hand side of the screen.
Save your changes.
Adjusting the position with padding
Adjust the widget button's proximity to the screen edge by increasing or decreasing its padding.
From On-Site Displays, go to Floating Widget > Widget Button.
You can adjust both the side padding (distance from the left or right edge) and bottom padding (distance from the bottom of the screen) to position the widget button exactly where you want it.
Save your changes.
💡 Pro Tip: View changes to the padding live on your site to see what works best.
Choosing the button type
Change the content of the button, including the text and icon.
From On-Site Displays, go to Floating Widget > Widget Button.
Choose between Icon, Text, or Icon and text.
If you're using text, type it into the text field provided
If you're using an icon, choose from the default icons available (like gift or star)
Save your changes.
Choosing the button shape
Change the shape of the launcher button to suit your store's style.
From On-Site Displays, go to Floating Widget > Widget Button.
Choose between a Circle, Rounded or Square button shape.
Save your changes.
📝 Note: Changing the button shape will apply to both desktop and mobile.
Uploading a custom icon
Add your brand and style by adding your own icon to the widget launcher. If you have a favicon image for your store, this is a great place to include it!
From On-Site Displays, go to Floating Widget > Widget Button.
Scroll down to the bottom of the page.
Under Icon, select Upload custom icon.
Drag & drop the image file or browse your files to upload it.
Save your changes.
📝 Note: The size for the launcher's custom icons is 32px by 32px, larger images will scale down to this size.
Visibility Settings
Control when and where your widget appears to customers with these visibility options.
From On-Site Displays, go to Floating Widget > Visibility Settings.
Choose from the following options:
Hide the widget unless a deep link is activated: Toggle this ON to hide the widget until it's opened through a deep link (like from a menu item or button on your site).
Hide widget launcher button on mobile: Toggle this ON to hide just the launcher button on mobile devices while keeping it visible on desktop.
Save your changes.
📝 Note: When hiding the widget and using deep links, make sure to set up navigation links elsewhere on your site to allow customers to access your loyalty program.
Customizing Panel Order
You can customize the order in which panels appear in your loyalty widget to highlight the most important features for your customers.
From On-Site Displays, go to Floating Widget > Panel Order.
Drag and drop the panels into your preferred order. The panels at the top of the list will appear first in your widget.
Save your changes.
💡 Pro Tip: Place your most important or most used panels at the top to make them quickly accessible to your customers.
Common questions
Can I change the color of the widget button?
Yes absolutely! This can be done by going to On-Site Displays > Floating Widget > Colors. Scroll to Widget Button and from here you can pick the color for the widget button background and text. See our guide on customizing the widget screen for more.
Can I hide the widget and link to the app in my header or menu?
For sure! This can be done using deep links to open the widget. See our guide to using deep links for more.
Do I need different settings for mobile and desktop?
It's recommended to customize both mobile and desktop settings separately for the best user experience. Mobile users often have different needs and screen constraints compared to desktop users. You can switch between mobile and desktop settings using the tabs at the top of each section.
Will my custom icons work on all devices?
Yes, custom icons will display properly across all devices. For the best results, use the recommended size of 32px by 32px for launcher icons, and ensure your images have a transparent background for seamless integration with your store design.