Embedding Widget

The National Broadband Map is designed to be embedded and you are welcome to do so following the instructions below. The embedding options are:

  • Standard widget. This has the address search bar and returns a summary of the availability report (does not include dates, speeds or providers). The user is presented with a "See full details" button that takes them through to this site and shows the full report automatically.
  • Widget with map. This is similar to the standard widget but includes the map at the outset so that the user can drop a pin at their location. The results are displayed in summary form along with the map.

The widget can be customised further, including setting the size of the widget and restricting the technologies searched for. In future we will be offering an option to restrict the provider searched for.

The embedding works by creating a div to hold the widget and passing the id of that div to a JS call that instantiates the widget. We recommend using this method rather than embedding the site in an iFrame as the vertical size cannot be correctly controlled in an iFrame on mobile devices and significant problems can occur.

 

Inside head tag

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
<script src="https://broadbandmap.nz/static/javascripts/bbmwidget.js" type="text/javascript"></script>

Inside body tag

<div id="bbmwidget"></div>
<script type="text/javascript">
broadbandmap({
  div_id: 'bbmwidget',
  addressfinderkey: '<AddressFinder key>',
  technologies: ['ADSL', 'Fibre', 'Wireless', 'VDSL', 'Cable'],
});
</script>
 

Inside head tag

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
<script src="https://broadbandmap.nz/static/javascripts/bbmwidget.js" type="text/javascript"></script>

Inside body tag

<div id="bbmwidget"></div>
<script type="text/javascript">
broadbandmap({
  div_id: 'bbmwidget',
  addressfinderkey: '<AddressFinder key>',
  map: true,
  map_height: 500,
  map_key: true,
  address_label: true,
  technologies: ['ADSL', 'Fibre', 'Wireless', 'VDSL', 'Cable'],
});
</script>
 
Attribute Type Default Value Required/Optional Description
div_id string   Required HTML tag ID of the div element for widget embedding.
addressfinderkey string   Required AddressFinder API key.
technologies list   Required List of technologies. Available technologies are Fibre, Cable, VDSL, Wireless, ADSL.
map boolean false Optional Show/hide broadband map.
map_height integer 300 Optional Control the height of broadband map. (Height is in pixels.)
map_key boolean false Optional Show/hide broadband map.
address_label boolean false Optional Show/hide label for the address search.