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)

Custom Domain Hosting

Impact of Third-Party Cookie Deprecation

Bud’s frontend features rely on cookies to manage timeouts, handle theming and enhance user experience by tracking non-PII data.

By default, these features are hosted at widgets.thisisbud.com, meaning integrations on client websites or applications (e.g., app.bankly.com) store and access cookies as 'third-party'.

While third-party cookies are currently the most widely supported method for client-side data storage, they are gradually being phased out by modern browsers. Using Bud features in browsers that block third-party cookies could result in degraded or non-functional user experiences.

Setting Up Custom Domain Hosting

To mitigate third-party cookie deprecation, we recommend setting up a custom subdomain to host Bud’s frontend widgets. This approach ensures cookies are treated as first-party, maintaining seamless functionality throughout the experience.

Step 1: Log in to Your DNS Hosting Provider

Access the control panel for your DNS settings.

Step 2: Add a CNAME Record:

  • Name/Host: Enter the subdomain you want to use (e.g., widgets.bankly.com).
  • Content/Points To: Set this to app-engage.pages.dev; Bud’s core widget hosting domain.

Step 3: Provide Your Custom Domain to Bud: Share the full URL of your custom subdomain (e.g., widgets.bankly.com) with your Bud point of contact who will link it to Bud’s widget application.

Accessibility

Each of Bud's frontend widgets are built with WCAG 2.1 (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

Updated 2 months ago