Default skin

You can find the default skin on the addresshelper homepage. You are free to adjust the design by overriding the style sheet. If you want to use the default skin, you can follow the step-by-step instructions below.

‍

1. Include CSS/JS

<link rel="stylesheet" href="https://di.no/addresshelper/diah.css">
<script src="https://di.no/addresshelper/diah.js" charset="utf-8"></script>

‍

2. Place a div

Just add an empty div, and Address Helper will appear here (with default skin).

<div id="my-ah-widget"></div>

‍

‍

3. Javascript code

YAHOO.util.Event.onDOMReady(function() {
  // Init widget
  var config = {
    apiKey: '803u19hed3929901' /*my-ah-key*/
  }; 
  var diah = new DI.AddressHelper('my-ah-widget', config);
});

‍

Complete address indication

As a help to style the Address Helper after the user has selected the address, the CSS-class ah-complete will be added to the div, if the address input is complete.

<!-- The class is added when the user completes -->
<div id="my-ah-widget" class="ah-complete"><!-- DOM --></div>

‍