LoyaltyLion JavaScript SDK allows shoppers to see and interact with your loyalty program.

The simplest LoyaltyLion UI uses our combined Loyalty Page component which can be embedded onto a page or opened as a modal on demand. If you need something more customized, there are many smaller components which can be used to construct your own interface.

Customisation

We’ve designed all our components to be easy to style with your own CSS as part of your normal workflow. Every component adopts BEM methodology so it’s easy to target individual elements without worrying about our default CSS misbehaving.

To isolate our default styles from the rest of the page, we wrap all our components inside a container with id loyaltylion and target this element with our default CSS (class based isolation is also available, see below). Therefore, to target any of our elements with your own CSS you’ll need to ensure your selectors include #loyaltylion.