Examples

HTML

<div id="calc"></div>
<script src="https://tools.1dollars.org/sdk/v1/mysutra.min.js"></script>
<script>
  MySutra.render({ target: "#calc", tool: "emi-calculator", theme: "auto" });
</script>

React / Next.js

"use client";
import { useEffect, useRef } from "react";

declare global {
  interface Window { mySutra?: { render: (o: object) => { destroy: () => void } } }
}

export function EmiEmbed() {
  const ref = useRef<HTMLDivElement>(null);
  useEffect(() => {
    const el = ref.current;
    if (!el || !window.MySutra) return;
    const widget = window.MySutra.render({
      target: el,
      tool: "emi-calculator",
      theme: "auto",
      locale: "en-IN",
      currency: "INR",
    });
    return () => widget.destroy();
  }, []);
  return <div ref={ref} />;
}

// In layout or page: <Script src="https://tools.1dollars.org/sdk/v1/mysutra.min.js" strategy="afterInteractive" />

Web Component

<script src="https://tools.1dollars.org/sdk/v1/mysutra.min.js"></script>
<mysutra-tool tool="bmi-calculator" theme="light" locale="en-IN" currency="INR"></mysutra-tool>

CMS platforms

• WordPress / Shopify / Webflow / Wix / Blogger — paste the HTML snippet into a Custom HTML / Embed block.
• Vue / Svelte / Angular / Astro — mount on a ref after the script loads; call destroy() on teardown.