Integration guide

Embed the Nepali Font Converter

One script tag (or a single iframe), no framework. Drop the UtilitySansar Nepali Font Converter onto any partner page and get Preeti ↔ Unicode and Roman → Unicode conversion with matching branding. Mobile-first, virtual keyboard optional, character / word counters on by default.

Quick start — script embed

Paste this wherever you want the converter to appear. The widget mounts itself inside a Shadow DOM so none of your site's CSS can interfere with it, and none of its CSS leaks into your page.

<div data-us-nepali-converter></div>
<script async src="https://utilitysansar.com/embed/v1/nepali-converter.js"></script>

Safe to include the same <script> tag multiple times; the widget deduplicates on load and uses a single MutationObserver to mount into SPA and lazy-rendered pages.

Iframe variant

Some CMS pipelines (AMP, strict editors, comment-only pages) strip <script> tags. For those, embed the iframe variant instead — it ships the same UI from a static HTML file at /embed/v1/nepali-converter.html and is gated by a strict frame-ancestors CSP header. Browsers refuse to render it on any host outside the licensed partner family.

<iframe
  src="https://utilitysansar.com/embed/v1/nepali-converter.html?tool=preeti-to-unicode&theme=auto&accent=%230A1FB9&vk=1"
  title="Nepali Font Converter"
  loading="lazy"
  style="width:100%;max-width:920px;height:640px;border:0;border-radius:18px"
  allow="clipboard-write"
></iframe>

All script-embed data attributes have a query-string equivalent: tool, theme, accent (URL-encode the leading #), fontSize, vk=1 for the virtual keyboard, and hideBranding=true.

Configuration

All options live as data-* attributes on the mount element (or query parameters in the iframe URL). No JS config object, no build step.

Attribute	Default	Values	Description
data-tool	all	all, preeti-to-unicode, unicode-to-preeti, roman-to-unicode	Show all three tabs, or lock the widget to a single direction.
data-theme	auto	auto, light, dark	Auto follows prefers-color-scheme; override per-embed if needed.
data-accent	#0A1FB9	any 3- or 6-digit hex colour	Match your brand. Used for focus rings, the swap button, and active tabs.
data-font-size	16	14 to 32 (px)	Initial textarea font size. Visitors can still tap A− / A+ in the toolbar.
data-virtual-keyboard	(off)	true	Render a tap-to-insert quick keyboard under the input. Recommended on news sites with mobile readers.
data-show-counters	true	true, false	Show the character / word stats and the font-size stepper toolbar.
data-hide-branding	(off)	true	Suppress the "Powered by UtilitySansar" footer. Allowlisted sites only.

Example — a branded Roman-only embed in dark mode with the virtual keyboard on:

<div
  data-us-nepali-converter
  data-tool="roman-to-unicode"
  data-theme="dark"
  data-accent="#b45309"
  data-font-size="20"
  data-virtual-keyboard="true"
></div>

WordPress

Install the UtilitySansar Nepali Tools plugin (version 1.1.0+), then use either the shortcode or the Gutenberg block. Both render the same embed — pick whichever fits your editor flow. Set mode="iframe" when your theme strips <script> tags or you need the CSP-locked variant.

[us_nepali_converter]
[us_nepali_converter tool="preeti-to-unicode" virtual_keyboard="true"]
[us_nepali_converter mode="iframe" theme="dark" accent="#0A1FB9" hide_branding="true"]

In the Gutenberg editor, search for Nepali Font Converter. The sidebar exposes every setting with a live preview.

Licensed partners

The widget — both the script embed and the iframe — checks the current hostname against a built-in allowlist on load. Recognised hosts get the full converter; anywhere else the embed renders a watermarked card linking back to UtilitySansar. The iframe variant additionally enforces this at the browser layer with aframe-ancestors Content-Security-Policy directive.

nepalikeyboard.com
shuklanews.com
healthnewsnepal.com
gandakinews.com
pdfsansar.com
techsansar.com
techsansar.com.np
utilitysansar.com

To add a new partner domain, ping the util maintainer; once the allowlist is updated, the change rolls out with the next deploy (edge cache refreshes inside an hour).

What we track

The widget pings /api/embed/track on conversions, copies, and swaps. The payload is intentionally boring:

Host, tool, direction, action, input length (clamped to 100 000)
An anonymous per-tab session id from sessionStorage
Embed bundle version and the CF-IPCountry header

No input text, no cookies, no cross-site identifiers. Visitors withnavigator.doNotTrack = "1"are skipped entirely. Events land in Cloudflare Analytics Engine and roll up on /stats.

Inbound clicks from the embed footer / watermark / iframe CTA carry UTM tags so partner referrals show up in standard analytics:

utm_source = framing host (e.g. nepalikeyboard.com)
utm_medium = embed (footer), embed-watermark (unlicensed), embed-iframe / embed-iframe-cta
utm_campaign = nepali-font-converter
utm_content = bundle version, e.g. v1.1.0

Versioning & updates

The bundle is served under a versioned path — currently /embed/v1/. The 1.1.0 release adds data-font-size, data-virtual-keyboard, data-show-counters, the iframe entry-point, and a refreshed visual design. All changes are additive; existing embeds keep working without edits. Breaking changes will ship at /embed/v2/ so old integrations are never disturbed. Non-breaking fixes roll out under v1 and take effect within one CDN cache cycle (browser cache 1 h, edge cache 24 h).