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%"
/>

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 an internal design system to manage components and theming. We support a limited subset of customization options. These customization options should be provided to your Bud point of contact who will configure your theme accordingly.

Colors

Bud's widgets mostly use a monochrome color palette, so color customization is not necessary. Where colors are used, we support a small amount of customization to bring in line with your brand.

Accent Colour
- Commonly used in primary call to action buttons and logo fallbacks
- Defaults to #262626
Data visualization Colour
- Primarily used in charts and graphs
- Defaults to #0E8FEC

🎨
Color contrast
Please ensure that your supplied color combination meets, at minimum, WCAG 2.1 color contrast. We recommend testing this WebAim.

Font

A single public URL to a woff2 font
Must support weight range of:
- Minimum - 400 (regular) through 700 (bold)
- Recommended - 100 (thin) to 900 (heavy)

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

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.