Guides
Postman collections ↗Bud Console ↗

Frontend Widgets

Frontend widgets that a developer can quickly and easily embed into your application

Suggest Edits

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.

  • Primary
    • Commonly used in primary call to action buttons and logo fallbacks
    • Defaults to #262626
  • Primary (Hover)
    • An alternative to Primary, that's used as a hover state for primary call to action buttons
    • Defaults to #555555
  • Secondary
    • Commonly used in tab buttons
    • Defaults to #005FDB
  • Button text color
    • Where necessary, supports customization to achieve sufficient color contrast with primary colors
    • Defaults to #FFFFFF (white)
  • Info Graphics
  • Primary Gradient From
    • Primarily used for the starting color of the gradient used in Weekly Summary widget background wave
    • Not set by default
  • Primary Gradient To
    • Primarily used for the end color of the gradient used in Weekly Summary widget background wave
    • Not set by default

🎨

Color Contrasts

Please ensure that your supplied color combinations meet, at minimum, WCAG 2.1 color contrast. We recommend testing this here.

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>

Updated 5 days ago