Customizing Wallet UI
The Accrue wallet is fully white-labeled. Your customers see your brand — your logo, your colors, your copy — not ours. Every visual and behavioral element of the wallet experience is configurable per-merchant, so the wallet feels like a native part of your app or website rather than a third-party embed.
Quick Reference
Branding & Images
| Key | Type | Description |
|---|---|---|
logoUrl | URL | Brand logo displayed throughout the wallet. Recommended: 90x30px, PNG or SVG. |
introImageUrl | URL | Image shown during onboarding. Recommended: 400x150px. |
coverImageUrl | URL | Image displayed on the savings dashboard. Recommended: 400x340px. |
balanceCardImageUrl | URL | Background image for the wallet balance card. |
onboardingSlides | Array | Custom onboarding slide content — each slide has a title, description, and image URL. |
Colors & Styling
| Key | Type | Description |
|---|---|---|
ctaColor | Hex | Background color for all CTA buttons. |
ctaTextColor | Hex | Text color for CTA buttons. |
ctaBorderRadius | CSS | Corner radius for buttons (e.g., "14px", "50px", "0px"). |
inputBorderRadius | CSS | Corner radius for form inputs. |
iconColor | Hex | Accent color for icons throughout the wallet. |
loadingBarColor | Hex | Color of loading/progress indicators. |
progressBarColor | Hex | Color of savings goal progress bars. |
dateSelectorColor | Hex | Highlight color for date picker selections. |
Visual Examples
Brand Logo
Your logo appears throughout the wallet frontend. For best results, provide a resizable PNG or vector file.
Banner Images
CTA Buttons
Customize button color, text color, and corner radius to match your brand.
ctaColor: '#000000' · ctaBorderRadius: '50px'
ctaColor: '#0133A0' · ctaBorderRadius: '14px'
ctaColor: '#5DBEA3' · ctaBorderRadius: '0px'
Form Inputs
Control corner radius on all form fields.
inputBorderRadius: '8px'
inputBorderRadius: '0px'
Accent Colors
One color config controls each UI element across the entire wallet.
iconColor: '#CB3939'
progressBarColor: '#29BE23'
dateSelectorColor: '#C25ECF'
We offer design consultation, configuration assistance, testing support, and ongoing maintenance. Contact your Accrue representative or email info@byaccrue.com for help with customizations.