Pass appearance to Percents.init(...) to align the SDK with the issuer host page.
Percents.init({
container: '#percents-widget',
sessionEndpoint: '/api/percents/session',
appearance: {
displayName: 'Branded Rewards',
logoUrl: 'https://issuer.example.com/logo.svg',
primaryColor: '#0079d2',
accentColor: '#028a00',
fontFamily: "Gilroy, 'Gilroy Regular', ui-sans-serif, system-ui",
},
});| Field | Description |
|---|---|
displayName | Name shown in the SDK header. Defaults to Branded Rewards. |
logoUrl | HTTPS image URL shown beside the display name. |
primaryColor | Six-digit hex color for primary actions and selected states. |
accentColor | Six-digit hex color for secondary emphasis and highlights. |
fontFamily | CSS font-family string applied inside the iframe. |
To apply a new appearance after mount, call destroy() on the current SDK instance and initialize a new one.
Try the fields in the SDK Playground.