Styling
This page collects everything styling related an integrator controls from the host page. The visual identity of the cashier itself (colours, icons, imagery) is not styled with CSS from your page; it is configured through the Theme in the back office.
Style encapsulation
The Fluid widgets are web components and render inside a shadow root. Their internal styles are encapsulated: CSS rules on the host page do not reach into the cashier, and the cashier's styles do not leak out into your page. Do not attempt to override internal selectors; use the Theme for visual customisation instead.
Font
The font-family used by the widget inherits from its parent element, ensuring consistency with the host site's typography. If another font is desired, set it on the parent element of the widget. The widget uses three different font weights, so the font family should include all of them.
Stacking and layout
z-index: the main widget renders as an overlay. Pass az-indexattribute high enough to display the wallet in front of other elements on the host site.- Inline elements follow their parent: the Quick Deposit element (and the cashier when embedded as an inline element) is laid out inside your DOM and respects its parent element's styles: size it and position it through its container.
- Overscroll: for the inline version of the cashier, the
overscroll-behavior-autoattribute allows the page behind to take over scrolling when the cashier's scroll ends.
What is styled where
| Concern | Controlled by |
|---|---|
| Colours, icons, imagery, success sound | Theme in the back office |
| Text content and translations | Content in the back office |
| Font family | Parent element of the widget on your page |
| Overlay stacking | z-index attribute |
| Inline element size and position | The parent container on your page |
| Bonus and pack imagery | URLs you pass in the data objects, with the documented dimensions |