Add the Broadband Availability widget

Use one script tag and a click handler to show property-level broadband speeds, providers, technology types, and exchange distance inside your own page.

Quickstart

Add this snippet to the property page, passing your widget token and the property details you already hold.

<script
  src="https://dev-app.broadbandavailability.com/widget.js"
  data-token="YOUR_TOKEN"
  data-postcode="NG11 6SL"
  data-uprn="100021234567"
  data-address="9 Harebell Avenue"
  defer
></script>

<button type="button" onclick="bbukHandleOnClick();">
  Check broadband availability
</button>

That gives you a first test load: the script creates the widget frame, and the button opens the Broadband Availability popup from your page.

Get a Token

To request a widget token, email [email protected] with your company name, website, and the environment you want to test against.

Use the token as the data-token value in the script tag.

Script Attributes

Parameter	Required	Description	Example
data-token	Yes	Your widget token. Ask your account manager if you do not have one yet.	data-token="YOUR_TOKEN"
data-postcode	Yes	The postcode for the property you want broadband information for.	data-postcode="NG11 6SL"
data-uprn	No	The Unique Property Reference Number (UPRN) for the property. Use this when you have it for the most precise match.	data-uprn="100021234567"
data-address	No	The property address. Use this when you do not have a UPRN or want to improve matching.	data-address="9 Harebell Avenue"
data-element	No	The id of an element that should contain the widget frame. Use this when you want to control the wrapper instead of using the default popup. See Custom Container for details.	data-element="custom-element-id"

Setup Details

Development URL: Use https://dev-app.broadbandavailability.com/widget.js while integrating and testing.
Production URL: Use https://app.broadbandavailability.com/widget.js after you have signed terms and are ready to go live.
Token format: Pass the widget token from your account. Tokens can be supplied with or without the bbuk-u- prefix.

See Moving to Production for the production script example.

Choose the default popup for the fastest integration, or provide your own container when you want to control the wrapper around the widget frame.

Default Popup

Call bbukHandleOnClick() from your own button or link to open the pre-styled popup. The quickstart above shows the plain button version; these examples add BroadbandUK branding.

<!-- Button with logo -->
<button onclick="bbukHandleOnClick();">
  <img
    src="https://dev-app.broadbandavailability.com/assets/logo/blue.svg"
    alt="BroadbandUK logo"
  />
</button>

<!-- Button with dynamic colour -->
<!-- Replace "YOUR_TOKEN" with your widget token. -->
<button onclick="bbukHandleOnClick();">
  <img
    src="https://dev-app.broadbandavailability.com/assets/logo/u/YOUR_TOKEN"
    alt="BroadbandUK logo"
  />
</button>

Custom Container

Add data-element when you want the widget frame to render inside an element you control.

<div id="broadband-availability-widget"></div>

<script
  src="https://dev-app.broadbandavailability.com/widget.js"
  data-element="broadband-availability-widget"
  data-token="YOUR_TOKEN"
  data-postcode="POSTCODE"
  data-uprn="UPRN"
  data-address="ADDRESS"
  defer
></script>

If the element id is missing or cannot be found, the widget falls back to the default popup.

Moving to Production

Once you have tested the widget and your BroadbandUK account is ready for production, follow these steps to go live:

Open your account dashboard Sign in to your BroadbandUK account to review your production setup and complete any required terms:

https://dashboard.broadbandavailability.com
Update the Script URL After your account is ready for production, update your script tag to use the production URL.

<script
  src="https://app.broadbandavailability.com/widget.js"
  data-token="YOUR_TOKEN"
  data-postcode="POSTCODE"
  data-uprn="UPRN"
  data-address="ADDRESS"
  defer
></script>

Provider Referrals

By default, the widget can show a "More Info" action alongside provider and speed results.

When a user selects it, they are sent to the relevant ISP website to continue their enquiry.

Provider referrals can be removed on the Premium tier.

Branding

Use the BroadbandUK icon when you create your trigger button.

<img
  src="https://dev-app.broadbandavailability.com/assets/logo/white.svg"
  alt="BroadbandUK logo"
  width="24"
  height="24"
/>

Blue and white icon variants are available. Use button text such as “Broadband Availability”, “Check broadband”, or similar, depending on the surrounding page UI.

Attribution Badge

When you display BroadbandUK data or the widget, include a visible BroadbandUK Data Partner badge in your site footer and link it to www.broadbandproviders.co.uk.

This satisfies the attribution and backlink requirement for BroadbandUK data licensed under CC BY 4.0. For licensing questions, contact [email protected].

Recommended Badge

Use the primary badge unless the white version fits your footer better.

<div data-site="bbuk" style="display: inline-block; text-align: center;">
  <a href="https://www.broadbandproviders.co.uk" target="_blank" rel="noopener">
    <img
      src="https://app.broadbandavailability.com/assets/v2/broadbanduk-primary-badge.png"
      alt="BroadbandUK Data Partner"
      width="205"
      height="71"
    />
  </a>
</div>

<div data-site="bbuk" style="display: inline-block; text-align: center;">
  <a href="https://www.broadbandproviders.co.uk" target="_blank" rel="noopener">
    <img
      src="https://app.broadbandavailability.com/assets/v2/broadbanduk-secondary-badge.png"
      alt="BroadbandUK Data Partner"
      width="270"
      height="62"
    />
  </a>
</div>

Badge Assets

Badge Use

Place the badge in a visible footer location.
Keep the badge linked to https://www.broadbandproviders.co.uk/.
Minimum badge height: 40px.
Preserve the original aspect ratio.
Do not rotate or animate the badge.
Keep enough clear space around the badge so it remains readable.