The world's leading urban mobility app for Android and iOS

© 2019 Moovit Inc. - All Rights Reserved.    Terms  ·  Privacy  ·   Support

 
 

Embedded Web App

The Moovit Web App can be easily embedded on any website to offer users an easy and friendly way to get directions using public transportation -- without leaving your website.

We recommend embedding the web app in a responsive layout, so it will show the full width of the page in mobile devices. On desktop browsers, the embedded web app should be at least 800px wide and at least 550px tall.

 

 

Instructions

Get your web app code:

It’s easy to implement, just copy the code from the example below: 

<script>

  (function(d, s, id) {

      var js, fjs = d.getElementsByTagName(s)[0];

      js = d.createElement(s); js.id = id;

      js.src = "https://widgets.moovit.com/wtp/en";

      fjs.parentNode.insertBefore(js, fjs);

  }(document, 'script', 'moovit-jsw'));

</script>

<div class="mv-wtp"

   data-metro="121"

   data-lang="en"

</div>

Note:

data-metro’ which is metroID (optional) is used to specify initial metro. In order to get the metro ID, you should go to moovit.com and change the metro to the desired metro from the top left corner of the page. Then, the metro ID will appear as a parameter inside the URL of the website.
If empty, the metro is determined by the user’s IP address.

 

data-lang which is language (optional) is used to define the user’s interface language.
Note that if you decide to change language, it should be changed in both the script name and "data-lang" parameter (see highlighted parts in the example code above).
If no value is provided, the operating system’s language will be used.
Supported languages are: in,ms, nb, ca, cs, de, et, en, en-gb, es, es-419, fr, it, lt, hu, nl, pt, pt-br, ru, ro, sr, fi, vi, tr, el, uk, bg, he, ar, th, zh-cn, zh-tw, ko, ka, ja, da, hr, sk, hi, pl, sv, tl-ph, th

 

Adding starting point & end point (optional):

Use the parameters below in order to define a starting point:

data-from →  ‘from’ field is used as the starting point. If empty, starting point is not filled.

data-from-lat-long → latitude and longitude of "from" location. Need to add an underscore between the lat_long numbers.

Use the parameters below in order to define an end point:

data-to →  ‘to’ field is used as the end point. If empty, end point is not filled.

data-to-lat-long → latitude and longitude of "to" location. Need to add an underscore between the lat_long numbers.

An example for starting point + end point:

<script>

  (function(d, s, id) {

      var js, fjs = d.getElementsByTagName(s)[0];

      js = d.createElement(s); js.id = id;

      js.src = "https://widgets.moovit.com/wtp/en";

      fjs.parentNode.insertBefore(js, fjs);

  }(document, 'script', 'moovit-jsw'));

</script>

 

<div class="mv-wtp"

   data-metro="121"

   data-lang="en"

   data-from="Times Sq"
   data-from-lat-long="40.75581_-73.986389"

   data-to="Central Park"
   data-to-lat-long="40.78392_-73.96584"

</div>

***For further customizations’ options (such as co-branding and more), contact us: widgetsupport@moovit.com

Add the code to your website:

After you copied the code, paste it onto your website HTML.

The code must be placed between the <body> and </body> tags of your page. If your code is placed outside of these tags, the widget won't appear correctly.  

Example HTML page before the embedded web app code is added:

<html>

<head>

This is the head of your page.

<title>Example HTML page</title>

</head>

<body>

This is the body of your page.

</body>

</html>


Example HTML page after the embedded web app code is added:

 

html>

<head>

This is the head of your page.

<title>Example HTML page</title>

</head>

<body>

This is the body of your page.
<script>

  (function(d, s, id) {

      var js, fjs = d.getElementsByTagName(s)[0];

      js = d.createElement(s); js.id = id;

      js.src = "https://widgets.moovit.com/wtp/en";

      fjs.parentNode.insertBefore(js, fjs);

  }(document, 'script', 'moovit-jsw'));

</script>

 

<div class="mv-wtp"

   data-metro="121"

   data-lang="en"

</div>

</body>

</html>

Voila! Now you’re ready to go and showcase this embedded web app on your website.

Positioning the web app on your site:

As with other elements of your website you can change the position of the Moovit embedded web app by using HTML tags as <div>, <table>, etc.

For example, if you place <div align="center"> and </div> around your Moovit embedded web app code, the web app will appear in the center of your page.

An example:

 

<html>

<head>

This is the head of your page.

<title>Example HTML page</title>

</head>

<body>

This is the body of your page.

<div align="center">

<script>

  (function(d, s, id) {

      var js, fjs = d.getElementsByTagName(s)[0];

      js = d.createElement(s); js.id = id;

      js.src = "https://widgets.moovit.com/wtp/en";

      fjs.parentNode.insertBefore(js, fjs);

  }(document, 'script', 'moovit-jsw'));

</script>

 

<div class="mv-wtp"

   data-metro="121"

   data-lang="en">

</div>

</div>

</body>

</html>

Examples
Visit.rio

Moovit was proud to be the official app of the 2016 Rio Olympic Games. The city’s official website, Visit.rio, used the Moovit embedded app to help visitors get around their city. (example link)

Need more details? Contact us

We are here to assist.