Frontend Widgets

What are Bud's frontend widgets?

Bud offers a range of 'plug and play' frontend widgets that clients can quickly and easily surface into their applications to help the customers manage their finances.

You can find out more about Bud's frontend widgets here:

How to embed a frontend widget in your application

Widgets are intended to be loaded into an application using an iframe (or other similar mobile OS approach). Using the corresponding URL generation endpoint, a widget can be loaded by adding the URL to an iframe src. An example of what an implementation could look like in your applications is shown below:

<iframe 
	src="https://widgets.thisisbud.com/summary/a-fictional-summary-id?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBfaWQiOiI5MWQ5ZmRjZC03MjI3LTQyMTAtYWNiYi0xY2VhNDY0OTA0NzAiLCJhdWQiOlsiaHR0cHM6Ly93aWRnZXQtcHJveHkudGhpc2lzYnVkLmNvbSJdLCJjdXN0b21lcl9pZCI6IjY5Yjg4YmM3LTI5OGYtNDY2NC04NWQ5LWM5YWJiZTM5NDg1NiIsImV4cCI6MTczMjY1MTIwMCwic3ViIjoiMTIzNDU2Nzg5MCIsIm9yZ19pZCI6IjdmMDU5OTUwLWNjYTctNGZiMS1hZTQyLTc1NzdkNzA5N2NmNyIsIm9yZ19zbHVnIjoiYnVkIn0.0ufJFC16yNps0npeOp60dC97GP6er2t1zuQcQ11IHp8"
	title="Weekly Summary"
  width="100%"
	height"100%"
/>

🎨
Recommended sizing
To ensure the best experience, we recommend the following minimum sizes for all of our widgets:

Width - 320px (to support 400% zoom)

Height - 580px

By default, URLs expire after 60 minutes, if you would like to change this please raise a support ticket. If a URL has expired you can generate a new URL using the corresponding URL generation endpoint.

Theme Customization

Bud's widgets use Shadcn as our core design system which provides foundational components and theming. We support extending this theme to our clients to allow widgets to fit in seamlessly with your branding and surrounding application. Our theme customization supports light (default) and dark themes (opt-in).

Colors

Below is a comprehensive list of colours that can be customized. For each color, we can support a light and dark variant.

📘
Customization recommendations
Our theme works predominantly with the concept of background and foreground pairings. For example, 'Primary' and 'Primary Foreground'. Where there is a background/foreground combination, both colors are recommended to be customized together to maintain sufficient contrast.
Items marked with an asterisk (*) are minimum recommendations to be changed if a custom theme is desired.

Background*
Foreground*
Card Background
Card Foreground
Popover Background
Popover Foreground
Primary*
Primary Foreground*
Secondary
Secondary Foreground
Muted
Muted Foreground
Accent
Accent Foreground
Border
Input
Focus Ring
Chart 1*
Info
Info Foreground
Success
Success Foreground
Warning
Warning Foreground
Destructive
Destructive Foreground

📘
Visualizing your theme
We recommend using this color palette generator tool if you'd like to see an indication of how your theme may be applied inside our widgets.
Please bear in mind this is an indication and not a fully accurate representation. There may be subtle differences in how colors are used within widgets.

By default, our theme palette only supports the OKLCH color space. OKLCH allows colors to be modified more consistently by changing perceptual lightness (versus lightness in HSL which is not consistently applied).

If you have an existing color palette in alternative forms such as Hex, RGB or HSL then you can use this tool to easily convert to OKLCH.

🎨
Color contrast
Our default color theme is configured to ensure sufficient WCAG 2.1 colour contrast throughout our widgets.
If you opt to supply your own theme, please ensure that the supplied color pairings also meet the minimum expected contrast. We recommend testing using WebAim Contrast Checker.

Font

A single public URL to a woff2 font
Must support weight ranges 400 (regular) through 700 (bold)
- We recommend providing a URL that only supports this specific range to optimize loading time
A common example of how to obtain a font is by supplying a URL from Google Fonts
- For example, https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,400..700&display=swap

Color Mode

The color mode displayed can be set on a per-widget basis. The possible options are:

Light (Default)
Dark
System
- Determined by the users system preference for light or dark UI

Please refer to the relevant widget API documentation on how to configure.

Accessibility

Each of Bud's frontend widgets are built with WCAG 2.2 (AA) compliance in mind. We strive to build experiences that are accessible for all users regardless of whether assistive technology may be used to aid the experience. To this extent we focus, where necessary, on (but not limited to):

Screen-reader-friendly content
Keyboard navigation
Appropriate user controls
Suitable color contrasts
Supporting up to 400% zoom

Customizing Heading Hierarchy

In most use-cases, our frontend widgets are embedded into applications via <iframe>'s or similar implementation techniques. Screen readers most commonly treat the content of <iframe>'s as part of the parent document. Therefore, to ensure the heading hierarchy implemented in widgets contextually extends the surrounding hierarchy, we optionally allow the starting level of widget headings to be customized.

To customize the starting level of headings to suit your use-case, append a base_heading_level search parameter to the generated widget URL and set to a value of 1-6. It is recommended to set to a value of 1-4 to allow sufficient room for the various levels of heading to fit within the <h1>-<h6> scale. Where a heading would otherwise exceed this scale, it will default to <h6>.

For example:

https://widgets.thisisbud.com/financial-calendar?token=some-demo-token&base_heading_level=3

In the example above, the default headings for the financial calendar would be adjusted as follows:

The main page heading (<h1>) - "Your Financial Calendar"
- Adjusted to <h3>
A secondary page heading (<h2>) - "August 2025"
- Adjusted to <h4>

If you have any questions, please contact us via the chatbot (bottom-right of screen 👉) or via a support request or check our FAQs.