# How to embed a mileage calculator on any website

> One <script> tag, four variants (full, rate, single-trip, fleet), three languages.

**Author:** Camila Ribeiro — Field Operations Editor  
**Published:** 2026-05-02  
**Updated:** 2026-05-02  
**URL:** https://quilometragem.com/blog/how-to-embed-a-mileage-calculator-on-any-website

**TL;DR:** One <script> tag, four variants (full, rate, single-trip, fleet), three languages.

- Not every team needs a full expense platform.
- Attributes control locale (pt, es, en), default country (br, mx, co, us, uk, ca`), and variant.
- - full: two address inputs, country and rate selector, calculate button.
- If your site is a SPA (Next.js, Nuxt, Astro with transitions), use the global helper: `` window.QuilometragemEmbed.mount(divElement); `` The function accepts any dynamically-created host.
- For internal documentation, just paste a Quilometragem URL into any oEmbed-compatible tool.

## Why an embeddable widget

Not every team needs a full expense platform.[^irs-2025] HR blogs, ERP sites, driver portals, and marketing pages often just want to give visitors a quick mileage calculator. The Quilometragem widget ships that in a single script tag — no dependencies, no bundler, and no API key required from the partner.

## How to drop it in

Paste this anywhere in your HTML:

```
<script src="https://quilometragem.com/embed/calculator.js" defer></script>
<div data-quilometragem-calculator data-locale="en" data-country="us" data-variant="full"></div>
```

The script mounts the widget on every element with `data-quilometragem-calculator` once the DOM is ready. Attributes control locale (`pt`, `es`, `en`), default country (`br`, `mx`, `co`, `us`, `uk`, `ca`), and variant.

## The four variants

- **full**: two address inputs, country and rate selector, calculate button. Returns distance and reimbursement amount.
- **rate**: just the current official rate — perfect for a blog sidebar or FAQ.
- **trip**: single-trip estimator — user enters distance, sees the amount in real time.
- **fleet**: monthly summary — multiplies vehicles × avg km × rate.

## SPAs and dynamic mounts

If your site is a SPA (Next.js, Nuxt, Astro with transitions), use the global helper:

```
window.QuilometragemEmbed.mount(divElement);
```

The function accepts any dynamically-created host. Handy inside routers that recreate the DOM on every navigation.

## oEmbed for Notion, Slack, and Confluence

For internal documentation, just paste a Quilometragem URL into any oEmbed-compatible tool. Our `/oembed` endpoint returns a ready-made iframe. The widget automatically inherits the locale and country detected from the original URL.

## What about the backlink?

Each variant renders a discreet "Powered by Quilometragem" link with `utm_source=embed`. That helps partners and us at the same time: you get a robust calculator, we get a measurable referral.

## Sources

- [IRS — Standard Mileage Rates for 2025](https://www.irs.gov/tax-professionals/standard-mileage-rates) — Internal Revenue Service (2026-04-28)