Fare Calculator Widget for Your Website

Add the Widget in Under a Minute

Paste this snippet into your post or template where you want the calculator to appear. It works on WordPress (in a Custom HTML block), Blogger, Ghost, Webflow, and any site where you can add HTML.

<!-- Dubai Metro Fare Calculator Widget -->
<div id="dmr-fare-widget">
  <p style="text-align:center;font-size:13px;margin:8px 0;">
    Fare calculator by
    <a href="https://www.dubaimetrorails.com/fare-calculator">Dubai Metro Rails</a>
  </p>
</div>
<script async src="https://www.dubaimetrorails.com/widgets/fare-calculator.js"></script>

Live Preview

This is exactly what your readers will see:

The One Rule: Keep the Credit Link

The widget is free in exchange for the small attribution link included in the snippet. The loader checks that a visible, followable link to dubaimetrorails.com exists on your page. If the link is removed, hidden, or set to nofollow, the calculator stops rendering and shows a notice instead. You can restyle the credit line to match your site, move it above or below the widget, or reword it, as long as the link itself stays visible.

Details for Your Tech Setup

• The widget is a sandboxed iframe; it cannot read or touch anything else on your page.
• Default height is 680 px. Override it with a data attribute: <div id="dmr-fare-widget" data-height="600">.
• It loads lazily and asynchronously, so it does not slow down your page render.
• No cookies are set by the widget itself, and nothing your readers type is stored.
• Fares update automatically on our side whenever RTA changes Nol rates; you never need to touch the embed again.

Questions or a Custom Request?

If you want a different tool as a widget, a specific default route, or run into trouble embedding, reach out through our contact page. If you write about Dubai travel, you may also like our write for us program.