> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://help.nector.io/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # Floating Loyalty & Referral Launcher Setting Up On-Site Display Widgets ${frame}[](https://www.youtube.com/embed/XF51GHjqijo) **Introduction** On-site display widgets allow customers to seamlessly interact with your loyalty program while browsing your website. From floating icons to sticky bars, widgets help boost engagement, increase visibility, and enhance the overall shopping experience. This guide walks you through configuring, customizing, and enabling your widget so it appears exactly how—and where—you want it on your site. **Step 1 - Open the On-Site Display Settings** Navigate to the On-site Display section, then go to Launcher. On the main screen, locate and click the Configure button. ![](https://storage.crisp.chat/users/helpdesk/website/-/d/9/9/4/d9947dc4cf2ed000/image1_1xzio30.jpg) Step 2 - **Access Widget Settings** You’ll be taken to a page displaying configuration options for: • Desktop • Mobile • Custom widget icons ![](https://storage.crisp.chat/users/helpdesk/website/-/d/9/9/4/d9947dc4cf2ed000/image2_16mfqww.jpg) Step 3 - **Customize Desktop Settings** Click Desktop Setting to adjust your desktop widget’s colors and fonts. ![](https://storage.crisp.chat/users/helpdesk/website/-/d/9/9/4/d9947dc4cf2ed000/image3_a4v1v5.jpg) Step 4 - **Update Brand Settings** ![](https://storage.crisp.chat/users/helpdesk/website/-/d/9/9/4/d9947dc4cf2ed000/image4_1azaevb.jpg) Step 5 - **Enable Widget Visibility on Desktop** Ensure the Show the widget on desktop option is checked. If it’s unchecked, the widget won’t appear on the website.  If you uncheck the box and save, the widget will be disabled and not visible on the website. Click on Save to apply changes. ![](https://storage.crisp.chat/users/helpdesk/website/-/d/9/9/4/d9947dc4cf2ed000/image5_hla4hs.jpg) Step 6 - **Configure Animation Settings** Choose whether the widget should include animations when appearing on your site. You can disable animations entirely. You can also adjust behavior so the widget hides while scrolling up or down. ![](https://storage.crisp.chat/users/helpdesk/website/-/d/9/9/4/d9947dc4cf2ed000/image6_1gt9cyv.jpg) ![](https://storage.crisp.chat/users/helpdesk/website/-/d/9/9/4/d9947dc4cf2ed000/image7_1mgfcrw.jpg) Step 7 - **Choose Widget Type** Select from three widget styles: • Floating (default) • Edge • Sticky Floating gives a hovering effect. To test Edge, click Edge, then Save, and view the difference. ![](https://storage.crisp.chat/users/helpdesk/website/-/d/9/9/4/d9947dc4cf2ed000/image8_xy639k.jpg) Step 8 - **Choose Widget Type** Select from three widget styles: • Floating (default) • Edge • Sticky Floating gives a hovering effect. To test Edge, click Edge, then Save, and view the difference. The third option, Sticky, appears as a bottom bar on the website. Choose the type that best suits your brand's needs. ![](https://storage.crisp.chat/users/helpdesk/website/-/d/9/9/4/d9947dc4cf2ed000/image9_colu23.jpg) Step 9 - **Customize Widget Text** Replace the default text (e.g., “Nectar Store”) with a message of your choice. ![](https://storage.crisp.chat/users/helpdesk/website/-/d/9/9/4/d9947dc4cf2ed000/image10_6vawih.jpg) Step 10 - **Choose Widget Placement** Select the widget’s position from: • Bottom left • Bottom right • Top right • Top left Choose your preferred placement and proceed. ![](https://storage.crisp.chat/users/helpdesk/website/-/d/9/9/4/d9947dc4cf2ed000/image10_vpnkmx.jpg) Step 11 - **Adjust Offset Positioning** Use the offset slider to move the widget slightly upward or downward. For top placements, offset adjusts downward. Set an offset value, such as 35. You can also choose to show or hide the widget on specific pages by entering URLs. ![](https://storage.crisp.chat/users/helpdesk/website/-/d/9/9/4/d9947dc4cf2ed000/image12_k6vk21.jpg) Step 12 - **Hide Widget on Specific Pages** Enter URLs of pages where the widget should be hidden and paste them into the designated field. ![](https://storage.crisp.chat/users/helpdesk/website/-/d/9/9/4/d9947dc4cf2ed000/image13_tatf28.jpg) Step 13 - **Show Widget Only on Specific Pages** If URLs are added to the “show” list, the widget will appear only on those pages. ![](https://storage.crisp.chat/users/helpdesk/website/-/d/9/9/4/d9947dc4cf2ed000/image14_1twcbg6.jpg) Step 14 - **Save Desktop Settings** If hide URLs are set, the widget will be hidden on those pages. Click Save to apply the settings. These settings can be mirrored for mobile. ![](https://storage.crisp.chat/users/helpdesk/website/-/d/9/9/4/d9947dc4cf2ed000/image15_f1jtst.jpg) Step 15 - **Configure Mobile Separately** You can apply different widget settings for mobile vs. desktop. ![](https://storage.crisp.chat/users/helpdesk/website/-/d/9/9/4/d9947dc4cf2ed000/image16_lodmtt.jpg) Step 16 - **Customize Widget Icon** The widget icon is what users click. You can customize it under Custom Widget Icon. Upload a 30×30 pixel PNG icon for best results. Upload the icon directly or paste its URL. Click Save after uploading the custom icon. ![](https://storage.crisp.chat/users/helpdesk/website/-/d/9/9/4/d9947dc4cf2ed000/image17_c9gh4g.jpg) Step 17 - **Manage Visibility via Shopify** You can also manage widget visibility through Shopify: Go to Themes → Customize → App embeds. ![](https://storage.crisp.chat/users/helpdesk/website/-/d/9/9/4/d9947dc4cf2ed000/image18_1ly80fz.jpg) Step 18 - **Locate Nector App Embed** Find Nector Loyalty and Refill under app embeds. Turn off the toggle to fully hide the widget from your storefront. ![](https://storage.crisp.chat/users/helpdesk/website/-/d/9/9/4/d9947dc4cf2ed000/image19_w84dqk.jpg) Step 19 - **Save Shopify Changes** Be sure to click Save in Shopify after making changes. ![](https://storage.crisp.chat/users/helpdesk/website/-/d/9/9/4/d9947dc4cf2ed000/image20_mnegyv.jpg) Step 20 - **Enable Widget Again** To re-enable, simply toggle the option back on. This completes the setup process for on-site display widgets. ![](https://storage.crisp.chat/users/helpdesk/website/-/d/9/9/4/d9947dc4cf2ed000/image21_vo2zkk.jpg) **Wrap-Up** You’ve now learned how to: ✅ Customize widget appearance, branding, and animation ✅ Control placement, visibility, and page-specific behavior ✅ Upload custom widget icons ✅ Manage widget display from both Nectar and Shopify With your widget fully configured, your loyalty program becomes more visible, more engaging, and more integrated into your customers’ shopping journey. 💚