Widget de cotação para embutir

A copy-paste rate widget for any page

Um trecho autocontido — uma <div> mais um script inline — que renderiza um cartão pequeno com um ou mais pares de moedas (ex.: USD/BRL, EUR/BRL) e atualiza ao carregar a página. Sem dependências, sem build.

A self-contained snippet — one <div> plus an inline script — that renders a small card with one or more currency pairs (e.g. USD/BRL, EUR/BRL) and refreshes on page load. No dependencies, no build step.

Base: https://moneta.api.insyde.one — CORS liberado, chame direto do navegador / CORS open, call straight from the browser.

1. Cole isto / Paste this

Copie o bloco inteiro para onde o widget deve aparecer. / Copy the whole block where the widget should appear.

<div id="moneta-widget" style="--mw-bg:#fff;--mw-fg:#111;--mw-muted:#888;--mw-radius:12px;
  font-family:system-ui,sans-serif;max-width:260px;background:var(--mw-bg);color:var(--mw-fg);
  border:1px solid #e5e5e5;border-radius:var(--mw-radius);padding:14px 16px">
  <div style="font-size:12px;color:var(--mw-muted);margin-bottom:8px">Exchange rates</div>
  <div data-pairs="USD/BRL,EUR/BRL" data-locale="pt-BR">Loading…</div>
</div>
<script>
(async function () {
  const root = document.getElementById("moneta-widget");
  const slot = root.querySelector("[data-pairs]");
  const pairs = slot.dataset.pairs.split(",").map(p => p.trim());
  const locale = slot.dataset.locale || "en-US";
  try {
    const rows = await Promise.all(pairs.map(async p => {
      const [b, q] = p.split("/");
      const r = await fetch(`https://moneta.api.insyde.one/rate/${b}/${q}`);
      if (!r.ok) throw new Error(p);
      const d = await r.json();
      const v = new Intl.NumberFormat(locale, { maximumFractionDigits: 4 }).format(d.rate);
      return `<div style="display:flex;justify-content:space-between;padding:3px 0">
        <span>${b}/${q}</span><strong>${v}</strong></div>`;
    }));
    slot.innerHTML = rows.join("");
  } catch {
    slot.innerHTML = `<span style="color:var(--mw-muted)">Rates unavailable</span>`;
  }
})();
</script>

2. Como funciona / How it works

O atributo data-pairs lista os pares; o script chama /rate/{BASE}/{QUOTE} para cada um em paralelo. / data-pairs lists the pairs; the script calls /rate/{BASE}/{QUOTE} for each in parallel.
data-locale controla a formatação dos números via Intl.NumberFormat. / data-locale drives number formatting via Intl.NumberFormat.
Se qualquer chamada falhar, o cartão mostra "Rates unavailable" em vez de quebrar. / If any call fails, the card shows "Rates unavailable" instead of breaking.

3. Customizar pares e idioma / Customize pairs and locale

Edite só os dois atributos data-* — não toque no script. / Edit only the two data-* attributes — leave the script alone.

<div data-pairs="USD/JPY,EUR/GBP,USD/CHF" data-locale="en-US">Loading…</div>

4. Adaptar ao seu tema / Theming

As cores e o raio da borda saem de variáveis CSS no atributo style da div externa. Ajuste-as para combinar com o site — inclusive para tema escuro.

Colors and corner radius come from CSS variables on the outer div's style attribute. Tweak them to match your site — including a dark theme.

--mw-bg:#111; --mw-fg:#eee; --mw-muted:#999; --mw-radius:8px;

Atualização: as taxas são oficiais de bancos centrais e mudam uma vez por dia útil; recarregar a página com mais frequência não traz números novos.
Updates: rates are official central-bank values and change once per business day; reloading more often will not show new numbers.

Atenção: taxas de referência, não taxas transacionais — informativo apenas, não use para precificar ou liquidar transações.
Note: reference rates, not transactional rates — informational only, do not use to price or settle transactions.

Moneta docs · Live demo · Back to Insyde APIs