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

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

 

Transit Directions

Web Widgets

 

Get more customers through your door by installing the Moovit directions web widget today.
 
If you want more people to visit your place of business, here's the solution. Moovit, the world’s #1 transit app, is now available as a handy web widget. The Moovit Directions widget makes it easier for people to get to you with the most accurate directions via public transit.
 

 

Getting started
 
Get your widget code
 
  • Visit https://widgets.moovit.com/ to sign up and create your free widget
     

  • You can choose your preferred widget type and customize its look
     

  • Use an email address that you have access to as we will email you the HTML code snippet (we won’t email you about anything else, we promise)

 
 
Add the code to your website
 

When you’ve received the code snipped via email, copy and 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 widget 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>

HTML after the widget 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];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "https://widgets.moovit.com/ws/<UNIQUE KEY>/987596";
  fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'moovit-jsw'));

</script>

            <div class="mv-gd-widget-20" data-width="300" 
               data-height="473"
            </div>

</body>
</html>

Note: this is sample code only, please don't use it in your own site's HTML.

​Finally, publish your website and voila!

Positioning the widget on your site

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

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

<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];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "https://widgets.moovit.com/ws/<UNIQUE KEY>/987596";
  fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'moovit-jsw'));

</script>

            <div class="mv-gd-widget-20" data-width="300" 
               data-height="473"
            </div>

</div>
</body>
</html>

Note: this is sample code only, please don't use it in your own site's HTML.

Example of a live widget

Wordpress plug-in

We’ve also created a free Wordpress plugin to add the Moovit widget code to your website.

Installation
  1. Download the moovit.zip file

  2. Login to your Wordpress site's admin console

  3. Upload moovit.zip to the /wp-content/plugins/ directory

  4. Activate the plugin through the 'Plugins' menu in WordPress

  5. Go to Settings - Moovit to change the plugin settings

Using the widget

There are two ways to add a Moovit widget to your website

  1. Use shortcode [moovit] in any page or post

  2. Select the Moovit widget from the Appearance - Widgets menu and add it to the sidebar or another area of your site

 
Questions and Answers
How much does it cost to use the Moovit Widget?
- The Moovit Widget is free of charge.
Is there a rate limit?
- Not right now, but we reserve the right to add a limit in the future. 
Can I use the same widget(s) on multiple pages on my website?
- Absolutely
Can I use the same widget(s) on multiple websites that I manage?
- Please signup for a different a widget key per website.
Need more details? Contact us

We are here to assist.