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.

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.

Examples

Here are some examples of different widgets with and without map: