Introduction
For complete control over your widget's appearance, Loloyal provides a custom CSS field where you can add any additional styling.
Using Custom CSS
Navigate to Brand Style > Widget launcher/ Widget panel > CSS
Add your custom CSS rules to override default styling or add new visual elements
Save your changes and use the Preview function to test your customizations
CSS Snippets for Loloyal Widget Launcher
We've prepared a set of ready-to-use code snippets that you can simply copy and paste into your CSS or code injection box—no coding skills required.
Change the style of the Launcher
.loloyal-launcher { border: solid 2px red; }
Add a Google font to the Launcher
/** * @import Must be on the first line! */ @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&display=swap'); .loloyal-launcher-text { font-family: 'IBM Plex Sans' !important; }
Change the size of the pattern in the Launcher
.loloyal-launcher-icon { width: 64px !important; height: 64px !important; }
Modify the font of the Launcher
.loloyal-launcher-text { font-family: fantasy; }
Changing the size of the Launcher
.loloyal-launcher-box { height: 128px; width: 128px; }
Loloyal CSS code snippets for widget panel
Change the breadcrumb arrow, back, and close button colors
.loloyal-close svg { fill: #1246FF !important; color: #1246FF !important; } .loloyal-navbar-back svg { fill: #1246FF !important; color: #1246FF !important; }
Add a Google font to the Widget
/** * @import Must be on the first line! */ @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&display=swap'); .loloyal-primary-font { font-family: 'IBM Plex Sans' !important; } .loloyal-secondary-font { font-family: 'IBM Plex Sans' !important; }
Add a browser-safe font to the Widget
.loloyal-primary-font { font-family: Arial !important; } .loloyal-secondary-font { font-family: Arial !important; }
Changing the size of the Join now Button
.loloyal-join-btn { width: 240px; height: 32px; }
Adjusting the size of the Panel
.loloyal-iframe-page { width: 500px; }
Hiding specific areas of the Widget
.loloyal-limited-time-offers { display: none; }
Changing colors and styles of elements
.loloyal-card { box-shadow: none; border: 2px solid black; }
Loloyal CSS Elements
These CSS classes can be overridden with custom CSS.
Launcher:
.loloyal-launcher
Controls the overall launcher container.
Launcher Icon:
.loloyal-launcher-icon
Targets the icon within the launcher.
Launcher Size Box:
.loloyal-launcher-box
Use this class to adjust the width and height of the launcher only.
Launcher Text:
.loloyal-launcher-text
Customizes the text shown inside the launcher.App Banner:
.loloyal-banner
Styles the banner section at the top of the widget.
Navbar:
.loloyal-navbar – Styles the entire navbar.
.loloyal-navbar-text – Targets text within the navbar.
.loloyal-navbar-back – Styles the back button in the navbar.
Card Block:
.loloyal-card – Controls the overall card style.
.loloyal-card-item – Targets individual items inside a card.
.loloyal-list-item – Styles list items within card sections.
Close Button:
.loloyal-close
Targets the close (X) button on the widget.
CSS Best Practices
Use specific selectors to target widget elements without affecting your main site
Test your CSS across different devices and screen sizes
Keep custom CSS minimal and focused on specific adjustments
Document your custom CSS for future reference and maintenance
💡 Pro Tip: If you're not comfortable with CSS, start with the built-in customization options first. They cover most common styling needs without requiring code knowledge.