⚠️ After reCAPTCHA is enabled in the Lead Acquisition widget, some CSS adjustments may be needed to ensure the styling appears as intended.
The reCAPTCHA may render differently depending on:
The current newsletter widget
How the widget is integrated into the client’s CMS
Existing styles applied by the CMS
👩🏻💻 If you need any help with customization or developing your design, please reach out to your Account Manager for assistance.
1. Go to Settings > Widgets
Click here to go to the widgets page
2. Select the CSS tab
From here, choose the tab that contains the classes for the widget you want to target. Custom CSS rules can be added in any tab, as tabs mainly serve as a guide for easier customisation. You can now go ahead and add your CSS rules. Always check the widget preview to see how it appears after changes.
When customising a widget with CSS, you may notice that some widgets do not have a dedicated tab in the backoffice, or that the expected classes are not visible.
This is normal. Tabs and CSS classes are provided to make customisation easier, but you are not limited to using only the tab that matches the widget name.
You can add new CSS rules or use any existing tab you prefer. The CSS you add will apply globally to every widget on your site, regardless of which tab you place it in.
⚠️ Avoid adding !important after every CSS rule
Why?
Automatic Injection: Our system automatically appends
!importantto all CSS rules that clients write.Potential Conflict: If the client also adds
!importantin their CSS, it can lead to duplication of the statement. This duplication may break the intended styling rules and lead to unexpected behaviour.
3. Save changes
Once you are done adding your custom CSS rules, don’t forget to save the changes.
4. Done!
bsport widgets will now render with your customised CSS automatically.
⚠️ If you notice a discrepancy between the widget preview and how it appears on your site, we recommend turning Compatibility Mode on.
