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 Customisation

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 customisation supports both light (default) and dark modes (opt-in).

Colours

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

📘
Customisation 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 colours are recommended to be customised 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

📘
Visualising your theme
We recommend using this colour 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 colours are used within widgets.

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

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

🎨
Colour contrast
Our default colour 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 colour 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 optimise 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

Colour Mode

The colour 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 colour contrasts
Supporting up to 400% zoom

Customising 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 <iframes> 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 customised.

To customise 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-6> 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 above example, the default headings of financial calendar would be adjusted as follows:

Main page heading (<H1>) - "Your Financial Calendar"
- Adjusted to <h3>
Secondary page heading (<h2>) - "August 2025"
- Adjusted to <h4>