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

These 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 Customisation

Bud's widgets use an internal design system to manage components and theming. We support a limited subset of customisation options. These customisation options should be provided to your Bud point of contact who will configure your theme accordingly.

Colours

Bud's widgets mostly use a monochrome colour palette, so colour customisation is not necessary. Where colours are used, we support a small amount of customisation 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 colour
    • Where necessary, supports customisation to achieve sufficient colour contrast with primary colours
    • Defaults to #FFFFFF (white)
  • Info Graphics
  • Primary Gradient From
    • Primarily used for the starting colour of the gradient used in Weekly Summary widget background wave
    • Not set by default
  • Primary Gradient To
    • Primarily used for the end colour of the gradient used in Weekly Summary widget background wave
    • Not set by default

🎨

Colour Contrasts

Please ensure that your supplied colour combinations meet, at minimum, WCAG 2.1 colour contrast. We recommend testing using 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 colour contrasts

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>

Updated 7 days ago