The most straight-forward approach for adding a Widget instance
to your web page is to include this snippet within the page's <body> element:
<div id="here-mobility-widget">
<script>
(function(w,i,d,g,e,t){
var h='HereMobilityWidget';w[h]=w[h]||[];w[h].push(e);if(!(e in w)){w[e]=function(o){w[e].q.push(o)};w[e].q=[{el:g,id:t}]}w[e].t=Date.now();
var s=i.createElement('script');s.async=1;s.src=d+'?a='+t+'&b='+(w[e].t/864e5|0);i.querySelector('#'+g).appendChild(s);
})(window,document,'https://web-widget.mobility.here.com/widget.js','here-mobility-widget','hmw','...APP_ID...');
</script>
</div>This snippet is comprised of an HTML element (the enclosing <div>)
and a script which bootstraps the Widget to appear within that element.
...APP_ID... is a placeholder. For the Widget to function properly,
you need to replace it with the actual App ID you got from us.
Here's a demo of the result (and its source HTML).
Another option is to add a button to your web page which invokes a modal with the Widget. Below are code samples that demonstrate that:
| Demo | Description | Live Demo | Source Code |
|---|---|---|---|
 |
A button floating at the bottom right corner of the web page. Upon clicking it, the Widget will also appear at the corner. | Demo | HTML CSS |
 |
A plain button that can be placed anywhere on the web page, even inline within other elements. The Widget itself will open in the center of the screen. |
Demo | HTML CSS |
 |
A button similar to the previous one, but with inverted colors so it resembles a link. | Demo | HTML CSS |
These samples are provided as-is and were made for your convenience and inspiration. You may need to modify them to fit your specific requirements.