March 26, 20267 min read

Embed a Transliteration Widget on Your Website

How to add Indian language typing capability to any website using the TranslitHub embeddable widget — embed code, customization options, and use cases for blogs, forums, and portals.

widget embed website transliteration integration

Running a Hindi blog and want your readers to leave comments in Hindi? Building a community forum where members can post in their regional language? Operating a local government portal that needs to accept applications in Marathi? The TranslitHub widget is a drop-in solution that adds Indian language typing to any text input on your website — no backend changes, no complex integration, just a script tag and a few configuration options.

This guide walks through the embed process, customization options, and real-world scenarios where the widget makes the most sense.

When you embed the TranslitHub widget on a page, it attaches to text input fields you specify. When a visitor types in those fields, the widget intercepts the Roman keystrokes and converts them to the Indian script in real time — the same phonetic transliteration that powers TranslitHub itself.

From the visitor's perspective: they type "mera naam Priya hai" and the field displays "मेरा नाम प्रिया है". No installation required on their end. No special keyboard. Works on desktop and mobile.

The widget can target:

Individual fields

</code> elements</li><br><li>Contenteditable <code><div></code> elements (rich text editors like WordPress's visual editor or custom CMS fields)</li><br><li>Multiple fields on the same page</li><br></ul><br><h2 id="basic-embed">Basic Embed</h2></p> <p>Add the widget script to your page's <code><head></code> and initialize it with your site key:</p> <pre><code class="language-html"><script src="https://cdn.transliterate.in/widget/v2/translithub-widget.min.js" data-site-key="YOUR_SITE_KEY" async ></script></code></pre> <p>Get your site key from the <a href="https://transliterate.in" target="_blank" rel="noopener noreferrer">TranslitHub dashboard</a> under Integrations → Widget.</p> <p>Then initialize it in JavaScript:</p> <pre><code class="language-javascript">document.addEventListener('DOMContentLoaded', function() { TranslitHub.init({ targets: ['#comment-field', '#search-input'], defaultLang: 'hi', showSelector: true }); });</code></pre> <p>That's the minimum setup. The <code>targets</code> array accepts CSS selectors, and <code>defaultLang</code> sets the initial language. Set <code>showSelector: true</code> to show a language dropdown next to each target field.</p> <h2 id="configuration-options">Configuration Options</h2> <pre><code class="language-javascript">TranslitHub.init({ // Required targets: ['#my-input'], // CSS selectors for input fields <p>// Language<br> defaultLang: 'hi', // Default target language<br> availableLangs: ['hi', 'bn', 'ta', 'te', 'mr'], // Languages to show in selector<br> showSelector: true, // Show language dropdown near the input</p> <p>// UI<br> selectorPosition: 'top-right', // 'top-right', 'top-left', 'bottom-right', 'bottom-left'<br> theme: 'light', // 'light', 'dark', 'auto'<br> primaryColor: '#ff9933', // Accent color for the selector UI<br> fontFamily: 'inherit', // Font for the input text (inherits page font by default)</p> <p>// Behavior<br> autoCapitalize: false, // Whether to capitalize first letter (usually keep false for Indian scripts)<br> preserveNumbers: true, // Don't convert Arabic numerals<br> preserveEnglish: false, // Convert or skip recognized English words<br> suggestionDropdown: true, // Show word suggestions on ambiguous input<br> maxSuggestions: 3, // Number of suggestions to show</p> <p>// Callbacks<br> onConvert: function(original, converted, lang) {<br> console.log('Converted:', original, '->', converted, 'in', lang);<br> },<br> onLangChange: function(newLang) {<br> console.log('Language changed to:', newLang);<br> }<br>});</code></pre></p> <h2 id="customizing-the-widget-appearance">Customizing the Widget Appearance</h2> <p>The language selector and suggestion dropdown are styled by default to be minimal and unobtrusive. You can override them with CSS:</p> <pre><code class="language-css">/<em> Customize the language selector </em>/ .translithub-lang-selector { font-family: 'Noto Sans', sans-serif; background: #fff; border: 1px solid #ddd; border-radius: 4px; font-size: 13px; } <p>/<em> Customize the suggestion dropdown </em>/<br>.translithub-suggestions {<br> background: #fff;<br> border: 1px solid #e0e0e0;<br> border-radius: 6px;<br> box-shadow: 0 4px 12px rgba(0,0,0,0.1);<br>}</p> <p>.translithub-suggestion-item:hover {<br> background: #ff993322;<br>}</code></pre></p> <p>The widget adds a <code>translithub-active</code> class to any input field it's currently processing, which you can use to show a visual indicator:</p> <pre><code class="language-css">input.translithub-active { border-color: #ff9933; outline: none; box-shadow: 0 0 0 2px rgba(255,153,51,0.2); }</code></pre> <h2 id="wordpress-integration">WordPress Integration</h2> <p>WordPress is the most common CMS for Indian language blogs. The widget integrates cleanly with both the Classic Editor and Block Editor (Gutenberg).</p> <strong>For the comment form:</strong> <p>Add to your theme's <code>functions.php</code>:</p> <pre><code class="language-php">function add_translithub_widget() { ?> <script src="https://cdn.transliterate.in/widget/v2/translithub-widget.min.js" data-site-key="<?php echo esc_attr(get_option('translithub_site_key')); ?>" async ></script> <script> document.addEventListener('DOMContentLoaded', function() { if (typeof TranslitHub !== 'undefined') { TranslitHub.init({ targets: ['#comment', '#author'], defaultLang: '<?php echo esc_js(get_option('translithub_default_lang', 'hi')); ?>', showSelector: true }); } }); </script> <?php } add_action('wp_footer', 'add_translithub_widget');</code></pre> <strong>For custom post type meta boxes (Hindi content fields):</strong> <pre><code class="language-php">// In your admin meta box JavaScript TranslitHub.init({ targets: ['#hindi_title', '#hindi_excerpt', '#hindi_content'], defaultLang: 'hi', showSelector: false // You've already fixed the language });</code></pre> <h2 id="forum-software-integration">Forum Software Integration</h2> <strong>phpBB:</strong> Add to your phpBB template's <code>overall_header.html</code>. Target <code>#message</code> (the main post textarea) and <code>#subject</code> (the thread title input). <strong>Discourse:</strong> Discourse has a plugin system. Use the <code><script-tag></code> component in a theme component to inject the widget script. Target <code>.d-editor-input</code> (the main compose textarea). <strong>Simple Machines Forum (SMF):</strong> Add to your theme's <code>header.template.php</code>. Target <code>#message</code> and optionally the quick reply field <code>#quickReplytext</code>. <h2 id="government-portal-use-case">Government Portal Use Case</h2> <p>This is worth covering separately because government portal requirements are specific. Forms on government sites typically need to accept text in both English and a regional language — sometimes in the same field, sometimes in separate fields.</p> <p>A common pattern:</p> <pre><code class="language-html"> <div class="form-group"> <label>Name (English)</label> <input type="text" id="name-en" placeholder="Enter your name"> </div> <p><br><div class="form-group"><br> <label>नाम (हिंदी में)</label><br> <input type="text" id="name-hi" placeholder="हिंदी में नाम लिखें"><br></div></code></pre></p> <pre><code class="language-javascript">TranslitHub.init({ targets: ['#name-hi', '#address-hi', '#city-hi'], defaultLang: 'hi', showSelector: false, // Language is fixed for these fields preserveNumbers: true // House numbers, PIN codes stay as Arabic numerals });</code></pre> <p>The <code>preserveNumbers: true</code> option is particularly important for government forms — you don't want phone numbers or ID numbers converting to Devanagari numerals.</p> <h2 id="handling-multiple-languages-on-the-same-page">Handling Multiple Languages on the Same Page</h2> <p>If your site serves multiple regional communities, you might need different default languages for different sections of the page:</p> <pre><code class="language-javascript">// Hindi form section TranslitHub.init({ targets: ['[data-lang="hi"]'], defaultLang: 'hi', showSelector: false }); <p>// Tamil section<br>TranslitHub.init({<br> targets: ['[data-lang="ta"]'],<br> defaultLang: 'ta',<br> showSelector: false<br>});</p> <p>// Generic section where user picks language<br>TranslitHub.init({<br> targets: ['[data-lang="auto"]'],<br> defaultLang: 'hi',<br> availableLangs: ['hi', 'ta', 'te', 'bn', 'mr'],<br> showSelector: true<br>});</code></pre></p> <p>Multiple <code>TranslitHub.init()</code> calls work independently — each one handles its own target set.</p> <h2 id="mobile-behavior">Mobile Behavior</h2> <p>On mobile devices, the widget behaves slightly differently because phone keyboards have their own input handling:</p> <ul> <li>On iOS Safari and Chrome for Android, the widget works within the limitations of mobile browser text input. Phonetic conversion still happens, but the native keyboard suggestions may interfere.</li> <li>The language selector adapts to a mobile-friendly dropdown that doesn't obscure the input field.</li> <li>For touch devices, the suggestion dropdown items are larger for easier tapping.</li> </ul> For the best mobile experience, set <code>suggestionDropdown: false</code> on mobile (detect via user agent) to avoid UI conflicts with the native keyboard: <pre><code class="language-javascript">const isMobile = /Mobi|Android/i.test(navigator.userAgent); <p>TranslitHub.init({<br> targets: ['#user-input'],<br> defaultLang: 'hi',<br> suggestionDropdown: !isMobile<br>});</code></pre></p> <h2 id="performance-notes">Performance Notes</h2> <p>The widget script is ~28KB minified and gzipped, loaded from TranslitHub's CDN. It defers after the page's main content loads (the <code>async</code> attribute on the script tag ensures this).</p> <p>For pages with many transliterable inputs, the widget batches conversions and debounces input — it doesn't fire a conversion request on every single keystroke. The default debounce is 150ms, which is fast enough to feel real-time while avoiding unnecessary processing.</p> <p>If you're on a strict Content Security Policy (CSP), add the CDN domain to your <code>script-src</code>:</p> <pre><code class="language-text">Content-Security-Policy: script-src 'self' cdn.transliterate.in;</code></pre> <h2 id="disabling-the-widget-for-specific-inputs">Disabling the Widget for Specific Inputs</h2> <p>Add the <code>data-no-translit</code> attribute to any input you don't want the widget to affect:</p> <pre><code class="language-html"><input type="text" id="email" data-no-translit placeholder="Email address"> <input type="text" id="phone" data-no-translit placeholder="Phone number"> <input type="text" id="username" data-no-translit placeholder="Username"></code></pre> <p>This is important for fields where you explicitly don't want conversion — email addresses, URLs, numeric fields, passwords.</p> <h2 id="detecting-transliteration-in-your-backend">Detecting Transliteration in Your Backend</h2> <p>When a form is submitted, the converted Indian language text is just regular Unicode. Your backend doesn't need to do anything special — it receives UTF-8 encoded text just like any other text field. Store it in your database, send it in emails, display it back in the UI — it all works without special handling.</p> <p>The only thing to verify is that your database column and connection are set to UTF-8 or UTF-8MB4 character encoding, which is the default for any modern database setup.</p> <h2 id="related-tools">Related Tools</h2> <ul> <li><a href="/tools/transliteration-api-for-developers">TranslitHub API</a> — programmatic transliteration for server-side integration</li> <li><a href="/tools/transliteration-browser-extension">Browser Extension</a> — type in Indian languages on any site you visit</li> <li><a href="/tools/transliteration-editor">Transliteration Editor</a> — standalone editor for document creation</li> </ul></div><div class="not-prose mt-10 pt-8 border-t border-gray-100"><div class="ad-slot flex items-center justify-center flex justify-center"><div class="flex items-center justify-center rounded-lg border border-dashed border-gray-200 bg-gray-50/50 text-xs text-gray-400" style="max-width:728px;width:100%;height:90px">Ad 728x90</div></div></div></article><aside class="hidden lg:block"></aside></div></div></main><footer class="border-t border-gray-800 bg-gray-900 text-gray-400"><div class="mx-auto max-w-7xl px-4 py-12"><div class="grid gap-8 sm:grid-cols-2 lg:grid-cols-4"><div><div class="flex items-center gap-2"><div class="flex h-8 w-8 items-center justify-center rounded-lg" style="background:linear-gradient(to bottom right, #ff9933, #138808)"><span class="text-sm font-bold text-white">T</span></div><h3 class="font-bold text-white">Transliterate Blog</h3></div><p class="mt-3 text-sm leading-relaxed">Indian language transliteration guides, scripts, and tools</p><a href="https://transliterate.in" target="_blank" rel="noopener noreferrer" class="mt-4 inline-flex items-center gap-1.5 text-sm font-medium transition-colors hover:brightness-125" style="color:#ff9933">Visit Transliterate <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link h-3 w-3"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg></a></div><div><h4 class="mb-4 text-sm font-semibold uppercase tracking-wider text-gray-300">Content</h4><ul class="space-y-2.5"><li><a class="text-sm transition-colors hover:text-white" href="#">Languages</a></li><li><a class="text-sm transition-colors hover:text-white" href="#">Guides</a></li><li><a class="text-sm transition-colors hover:text-white" href="#">Tools</a></li><li><a class="text-sm transition-colors hover:text-white" href="/comparisons">Comparisons</a></li></ul></div><div><h4 class="mb-4 text-sm font-semibold uppercase tracking-wider text-gray-300">Popular Tools</h4><ul class="space-y-2.5"><li><a href="https://transliterate.in/merge-pdf" target="_blank" rel="noopener noreferrer" class="text-sm transition-colors hover:text-white">Merge PDF</a></li><li><a href="https://transliterate.in/compress-pdf" target="_blank" rel="noopener noreferrer" class="text-sm transition-colors hover:text-white">Compress PDF</a></li><li><a href="https://transliterate.in/pdf-to-word" target="_blank" rel="noopener noreferrer" class="text-sm transition-colors hover:text-white">PDF to Word</a></li><li><a href="https://transliterate.in" target="_blank" rel="noopener noreferrer" class="text-sm font-medium transition-colors hover:brightness-125" style="color:#ff9933">All Tools →</a></li></ul></div><div><h4 class="mb-4 text-sm font-semibold uppercase tracking-wider text-gray-300">Legal</h4><ul class="space-y-2.5"><li><a class="text-sm transition-colors hover:text-white" href="/about">About Us</a></li><li><a class="text-sm transition-colors hover:text-white" href="/contact">Contact Us</a></li><li><a class="text-sm transition-colors hover:text-white" href="/privacy">Privacy Policy</a></li><li><a class="text-sm transition-colors hover:text-white" href="/terms">Terms of Use</a></li><li><a class="text-sm transition-colors hover:text-white" href="/disclaimer">Disclaimer</a></li></ul></div></div><div class="mt-10 flex flex-col items-center justify-between gap-4 border-t border-gray-800 pt-6 sm:flex-row"><p class="text-xs">© 2026 Transliterate Blog. All rights reserved.</p><p class="text-xs">Powered by <a href="https://transliterate.in" target="_blank" rel="noopener noreferrer" class="hover:brightness-125" style="color:#ff9933">Transliterate</a></p></div></div></footer></div></div><script src="/_next/static/chunks/webpack-2ebac01e599bb227.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0])</script><script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n2:I[4990,[\"626\",\"static/chunks/626-d4c8fcb5be8db4a7.js\",\"177\",\"static/chunks/app/layout-a25adadb77184682.js\"],\"default\"]\n3:I[7555,[],\"\"]\n4:I[1295,[],\"\"]\n7:I[9665,[],\"MetadataBoundary\"]\n9:I[9665,[],\"OutletBoundary\"]\nc:I[4911,[],\"AsyncMetadataOutlet\"]\ne:I[9665,[],\"ViewportBoundary\"]\n10:I[6614,[],\"\"]\n:HL[\"/_next/static/css/f89dda98e13ec7b3.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"0:{\"P\":null,\"b\":\"pvKsJU_LYljuE4Oecmo5B\",\"p\":\"\",\"c\":[\"\",\"Transliterate.Blog\",\"tools--embeddable-transliteration-widget\"],\"i\":false,\"f\":[[[\"\",{\"children\":[[\"site\",\"Transliterate.Blog\",\"d\"],{\"children\":[[\"slug\",\"tools--embeddable-transliteration-widget\",\"d\"],{\"children\":[\"__PAGE__\",{}]}]}]},\"$undefined\",\"$undefined\",true],[\"\",[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/f89dda98e13ec7b3.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[[\"$\",\"head\",null,{\"children\":[[\"$\",\"link\",null,{\"rel\":\"preconnect\",\"href\":\"https://fonts.googleapis.com\"}],[\"$\",\"link\",null,{\"rel\":\"preconnect\",\"href\":\"https://fonts.gstatic.com\",\"crossOrigin\":\"anonymous\"}],[\"$\",\"link\",null,{\"href\":\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900\u0026family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500\u0026family=JetBrains+Mono:wght@400;500;600\u0026display=swap\",\"rel\":\"stylesheet\"}]]}],[\"$\",\"body\",null,{\"className\":\"min-h-screen bg-white text-gray-900 antialiased\",\"children\":[\"$\",\"$L2\",null,{\"children\":[\"$\",\"$L3\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L4\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":404}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]}]}]]}]]}],{\"children\":[[\"site\",\"Transliterate.Blog\",\"d\"],[\"$\",\"$1\",\"c\",{\"children\":[null,\"$L5\"]}],{\"children\":[[\"slug\",\"tools--embeddable-transliteration-widget\",\"d\"],[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L3\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L4\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[\"__PAGE__\",[\"$\",\"$1\",\"c\",{\"children\":[\"$L6\",[\"$\",\"$L7\",null,{\"children\":\"$L8\"}],null,[\"$\",\"$L9\",null,{\"children\":[\"$La\",\"$Lb\",[\"$\",\"$Lc\",null,{\"promise\":\"$@d\"}]]}]]}],{},null,false]},null,false]},null,false]},null,false],[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$1\",\"EjxrgiTcdinG7ZvN80D1z\",{\"children\":[[\"$\",\"$Le\",null,{\"children\":\"$Lf\"}],null]}],null]}],false]],\"m\":\"$undefined\",\"G\":[\"$10\",\"$undefined\"],\"s\":false,\"S\":true}\n"])</script><script>self.__next_f.push([1,"11:\"$Sreact.suspense\"\n12:I[4911,[],\"AsyncMetadata\"]\n14:I[7918,[\"874\",\"static/chunks/874-30f44afe6902a5af.js\",\"626\",\"static/chunks/626-d4c8fcb5be8db4a7.js\",\"581\",\"static/chunks/app/%5Bsite%5D/layout-7efc27f722c97bb5.js\"],\"default\"]\n15:I[1573,[\"874\",\"static/chunks/874-30f44afe6902a5af.js\",\"530\",\"static/chunks/app/%5Bsite%5D/%5Bslug%5D/page-775e7c93a760abdb.js\"],\"default\"]\n16:I[6874,[\"874\",\"static/chunks/874-30f44afe6902a5af.js\",\"530\",\"static/chunks/app/%5Bsite%5D/%5Bslug%5D/page-775e7c93a760abdb.js\"],\"\"]\n17:I[6063,[\"874\",\"static/chunks/874-30f44afe6902a5af.js\",\"530\",\"static/chunks/app/%5Bsite%5D/%5Bslug%5D/page-775e7c93a760abdb.js\"],\"default\"]\n19:I[8679,[\"874\",\"static/chunks/874-30f44afe6902a5af.js\",\"530\",\"static/chunks/app/%5Bsite%5D/%5Bslug%5D/page-775e7c93a760abdb.js\"],\"default\"]\n8:[\"$\",\"$11\",null,{\"fallback\":null,\"children\":[\"$\",\"$L12\",null,{\"promise\":\"$@13\"}]}]\n"])</script><script>self.__next_f.push([1,"5:[\"$\",\"div\",null,{\"style\":{\"--site-primary\":\"#ff9933\",\"--site-accent\":\"#138808\",\"--site-primary-rgb\":\"255, 153, 51\",\"--site-accent-rgb\":\"19, 136, 8\"},\"children\":[[\"$\",\"script\",null,{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"{\\\"@context\\\":\\\"https://schema.org\\\",\\\"@type\\\":\\\"WebSite\\\",\\\"name\\\":\\\"Transliterate Blog\\\",\\\"description\\\":\\\"Indian language transliteration guides, scripts, and tools\\\",\\\"url\\\":\\\"https://blog.transliterate.in\\\",\\\"publisher\\\":{\\\"@type\\\":\\\"Organization\\\",\\\"name\\\":\\\"Transliterate\\\",\\\"url\\\":\\\"https://transliterate.in\\\"},\\\"potentialAction\\\":{\\\"@type\\\":\\\"SearchAction\\\",\\\"target\\\":\\\"https://blog.transliterate.in/search?q={search_term_string}\\\",\\\"query-input\\\":\\\"required name=search_term_string\\\"}}\"}}],[\"$\",\"script\",null,{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"{\\\"@context\\\":\\\"https://schema.org\\\",\\\"@type\\\":\\\"WebApplication\\\",\\\"name\\\":\\\"Transliterate\\\",\\\"url\\\":\\\"https://transliterate.in\\\",\\\"applicationCategory\\\":\\\"UtilitiesApplication\\\",\\\"operatingSystem\\\":\\\"Any\\\",\\\"offers\\\":{\\\"@type\\\":\\\"Offer\\\",\\\"price\\\":\\\"0\\\",\\\"priceCurrency\\\":\\\"USD\\\"}}\"}}],[\"$\",\"$L14\",null,{\"site\":{\"category\":\"product\",\"id\":\"transliterate\",\"name\":\"Transliterate Blog\",\"domain\":\"blog.transliterate.in\",\"parentSite\":\"https://transliterate.in\",\"description\":\"Indian language transliteration guides, scripts, and tools\",\"theme\":{\"primary\":\"#ff9933\",\"accent\":\"#138808\"},\"contentDirs\":[\"languages\",\"guides\",\"tools\",\"comparisons\"],\"legal\":{\"contactEmail\":\"contact@transliterate.in\",\"disclaimerType\":\"language\",\"disclaimerExtra\":[\"Transliteration guides and language resources are provided for educational and reference purposes. Language rules, romanization standards, and script conventions may vary by region and dialect.\",\"Machine transliteration may not always produce contextually accurate results. For official documents, academic submissions, or professional translations, consult a qualified linguist or certified translator.\"]}},\"navigation\":[{\"label\":\"Languages\",\"href\":\"#\",\"children\":[{\"label\":\"All Languages\",\"href\":\"/languages\"},{\"label\":\"Hindi Typing\",\"href\":\"/languages--hindi-typing-online\"},{\"label\":\"Bengali Typing\",\"href\":\"/languages--bengali-typing-online\"},{\"label\":\"Tamil Typing\",\"href\":\"/languages--tamil-typing-online\"},{\"label\":\"Telugu Typing\",\"href\":\"/languages--telugu-typing-online\"},{\"label\":\"Marathi Typing\",\"href\":\"/languages--marathi-typing-online\"},{\"label\":\"Gujarati Typing\",\"href\":\"/languages--gujarati-typing-online\"},{\"label\":\"Kannada Typing\",\"href\":\"/languages--kannada-typing-online\"},{\"label\":\"Malayalam Typing\",\"href\":\"/languages--malayalam-typing-online\"},{\"label\":\"Punjabi Typing\",\"href\":\"/languages--punjabi-typing-online\"}]},{\"label\":\"Guides\",\"href\":\"#\",\"children\":[{\"label\":\"All Guides\",\"href\":\"/guides\"},{\"label\":\"How Transliteration Works\",\"href\":\"/guides--how-transliteration-works\"},{\"label\":\"Transliteration vs Translation\",\"href\":\"/guides--transliteration-vs-translation\"},{\"label\":\"Type Indian Languages on Windows\",\"href\":\"/guides--type-indian-languages-on-windows\"},{\"label\":\"Indian Language Typing for Students\",\"href\":\"/guides--indian-language-typing-for-students\"}]},{\"label\":\"Tools\",\"href\":\"#\",\"children\":[{\"label\":\"All Tools\",\"href\":\"/tools\"},{\"label\":\"Transliteration Editor\",\"href\":\"/tools--transliteration-editor\"},{\"label\":\"Virtual Keyboard\",\"href\":\"/tools--virtual-keyboard-indian-languages\"},{\"label\":\"Transliteration API\",\"href\":\"/tools--transliteration-api-for-developers\"}]},{\"label\":\"Comparisons\",\"href\":\"/comparisons\"}],\"children\":[\"$\",\"$L3\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L4\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]}]]}]\n"])</script><script>self.__next_f.push([1,"18:T324b,"])</script><script>self.__next_f.push([1,"\u003cp\u003eRunning a Hindi blog and want your readers to leave comments in Hindi? Building a community forum where members can post in their regional language? Operating a local government portal that needs to accept applications in Marathi? The TranslitHub widget is a drop-in solution that adds Indian language typing to any text input on your website — no backend changes, no complex integration, just a script tag and a few configuration options.\u003c/p\u003e\n\n\u003cp\u003eThis guide walks through the embed process, customization options, and real-world scenarios where the widget makes the most sense.\u003c/p\u003e\n\n\u003ch2 id=\"what-the-widget-does\"\u003eWhat the Widget Does\u003c/h2\u003e\n\n\u003cp\u003eWhen you embed the TranslitHub widget on a page, it attaches to text input fields you specify. When a visitor types in those fields, the widget intercepts the Roman keystrokes and converts them to the Indian script in real time — the same phonetic transliteration that powers \u003ca href=\"https://transliterate.in\" target=\"_blank\" rel=\"noopener noreferrer\"\u003eTranslitHub\u003c/a\u003e itself.\u003c/p\u003e\n\n\u003cp\u003eFrom the visitor's perspective: they type \"mera naam Priya hai\" and the field displays \"मेरा नाम प्रिया है\". No installation required on their end. No special keyboard. Works on desktop and mobile.\u003c/p\u003e\n\n\u003cp\u003eThe widget can target:\u003cbr\u003e\u003cul\u003e\u003cbr\u003e\u003cli\u003eIndividual \u003ccode\u003e\u003cinput type=\"text\"\u003e\u003c/code\u003e fields\u003c/li\u003e\u003cbr\u003e\u003cli\u003e\u003ccode\u003e\u003ctextarea\u003e\u003c/code\u003e elements\u003c/li\u003e\u003cbr\u003e\u003cli\u003eContenteditable \u003ccode\u003e\u003cdiv\u003e\u003c/code\u003e elements (rich text editors like WordPress's visual editor or custom CMS fields)\u003c/li\u003e\u003cbr\u003e\u003cli\u003eMultiple fields on the same page\u003c/li\u003e\u003cbr\u003e\u003c/ul\u003e\u003cbr\u003e\u003ch2 id=\"basic-embed\"\u003eBasic Embed\u003c/h2\u003e\u003c/p\u003e\n\n\u003cp\u003eAdd the widget script to your page's \u003ccode\u003e\u003chead\u003e\u003c/code\u003e and initialize it with your site key:\u003c/p\u003e\n\n\u003cpre\u003e\u003ccode class=\"language-html\"\u003e\u0026lt;script\n src=\"https://cdn.transliterate.in/widget/v2/translithub-widget.min.js\"\n data-site-key=\"YOUR_SITE_KEY\"\n async\n\u0026gt;\u0026lt;/script\u0026gt;\u003c/code\u003e\u003c/pre\u003e\n\n\u003cp\u003eGet your site key from the \u003ca href=\"https://transliterate.in\" target=\"_blank\" rel=\"noopener noreferrer\"\u003eTranslitHub dashboard\u003c/a\u003e under Integrations → Widget.\u003c/p\u003e\n\n\u003cp\u003eThen initialize it in JavaScript:\u003c/p\u003e\n\n\u003cpre\u003e\u003ccode class=\"language-javascript\"\u003edocument.addEventListener('DOMContentLoaded', function() {\n TranslitHub.init({\n targets: ['#comment-field', '#search-input'],\n defaultLang: 'hi',\n showSelector: true\n });\n});\u003c/code\u003e\u003c/pre\u003e\n\n\u003cp\u003eThat's the minimum setup. The \u003ccode\u003etargets\u003c/code\u003e array accepts CSS selectors, and \u003ccode\u003edefaultLang\u003c/code\u003e sets the initial language. Set \u003ccode\u003eshowSelector: true\u003c/code\u003e to show a language dropdown next to each target field.\u003c/p\u003e\n\n\u003ch2 id=\"configuration-options\"\u003eConfiguration Options\u003c/h2\u003e\n\n\u003cpre\u003e\u003ccode class=\"language-javascript\"\u003eTranslitHub.init({\n // Required\n targets: ['#my-input'], // CSS selectors for input fields\n\n\u003cp\u003e// Language\u003cbr\u003e defaultLang: 'hi', // Default target language\u003cbr\u003e availableLangs: ['hi', 'bn', 'ta', 'te', 'mr'], // Languages to show in selector\u003cbr\u003e showSelector: true, // Show language dropdown near the input\u003c/p\u003e\n\n\u003cp\u003e// UI\u003cbr\u003e selectorPosition: 'top-right', // 'top-right', 'top-left', 'bottom-right', 'bottom-left'\u003cbr\u003e theme: 'light', // 'light', 'dark', 'auto'\u003cbr\u003e primaryColor: '#ff9933', // Accent color for the selector UI\u003cbr\u003e fontFamily: 'inherit', // Font for the input text (inherits page font by default)\u003c/p\u003e\n\n\u003cp\u003e// Behavior\u003cbr\u003e autoCapitalize: false, // Whether to capitalize first letter (usually keep false for Indian scripts)\u003cbr\u003e preserveNumbers: true, // Don't convert Arabic numerals\u003cbr\u003e preserveEnglish: false, // Convert or skip recognized English words\u003cbr\u003e suggestionDropdown: true, // Show word suggestions on ambiguous input\u003cbr\u003e maxSuggestions: 3, // Number of suggestions to show\u003c/p\u003e\n\n\u003cp\u003e// Callbacks\u003cbr\u003e onConvert: function(original, converted, lang) {\u003cbr\u003e console.log('Converted:', original, '-\u0026gt;', converted, 'in', lang);\u003cbr\u003e },\u003cbr\u003e onLangChange: function(newLang) {\u003cbr\u003e console.log('Language changed to:', newLang);\u003cbr\u003e }\u003cbr\u003e});\u003c/code\u003e\u003c/pre\u003e\u003c/p\u003e\n\n\u003ch2 id=\"customizing-the-widget-appearance\"\u003eCustomizing the Widget Appearance\u003c/h2\u003e\n\n\u003cp\u003eThe language selector and suggestion dropdown are styled by default to be minimal and unobtrusive. You can override them with CSS:\u003c/p\u003e\n\n\u003cpre\u003e\u003ccode class=\"language-css\"\u003e/\u003cem\u003e Customize the language selector \u003c/em\u003e/\n.translithub-lang-selector {\n font-family: 'Noto Sans', sans-serif;\n background: #fff;\n border: 1px solid #ddd;\n border-radius: 4px;\n font-size: 13px;\n}\n\n\u003cp\u003e/\u003cem\u003e Customize the suggestion dropdown \u003c/em\u003e/\u003cbr\u003e.translithub-suggestions {\u003cbr\u003e background: #fff;\u003cbr\u003e border: 1px solid #e0e0e0;\u003cbr\u003e border-radius: 6px;\u003cbr\u003e box-shadow: 0 4px 12px rgba(0,0,0,0.1);\u003cbr\u003e}\u003c/p\u003e\n\n\u003cp\u003e.translithub-suggestion-item:hover {\u003cbr\u003e background: #ff993322;\u003cbr\u003e}\u003c/code\u003e\u003c/pre\u003e\u003c/p\u003e\n\n\u003cp\u003eThe widget adds a \u003ccode\u003etranslithub-active\u003c/code\u003e class to any input field it's currently processing, which you can use to show a visual indicator:\u003c/p\u003e\n\n\u003cpre\u003e\u003ccode class=\"language-css\"\u003einput.translithub-active {\n border-color: #ff9933;\n outline: none;\n box-shadow: 0 0 0 2px rgba(255,153,51,0.2);\n}\u003c/code\u003e\u003c/pre\u003e\n\n\u003ch2 id=\"wordpress-integration\"\u003eWordPress Integration\u003c/h2\u003e\n\n\u003cp\u003eWordPress is the most common CMS for Indian language blogs. The widget integrates cleanly with both the Classic Editor and Block Editor (Gutenberg).\u003c/p\u003e\n\n\u003cstrong\u003eFor the comment form:\u003c/strong\u003e\n\n\u003cp\u003eAdd to your theme's \u003ccode\u003efunctions.php\u003c/code\u003e:\u003c/p\u003e\n\n\u003cpre\u003e\u003ccode class=\"language-php\"\u003efunction add_translithub_widget() {\n ?\u0026gt;\n \u0026lt;script\n src=\"https://cdn.transliterate.in/widget/v2/translithub-widget.min.js\"\n data-site-key=\"\u0026lt;?php echo esc_attr(get_option('translithub_site_key')); ?\u0026gt;\"\n async\n \u0026gt;\u0026lt;/script\u0026gt;\n \u0026lt;script\u0026gt;\n document.addEventListener('DOMContentLoaded', function() {\n if (typeof TranslitHub !== 'undefined') {\n TranslitHub.init({\n targets: ['#comment', '#author'],\n defaultLang: '\u0026lt;?php echo esc_js(get_option('translithub_default_lang', 'hi')); ?\u0026gt;',\n showSelector: true\n });\n }\n });\n \u0026lt;/script\u0026gt;\n \u0026lt;?php\n}\nadd_action('wp_footer', 'add_translithub_widget');\u003c/code\u003e\u003c/pre\u003e\n\n\u003cstrong\u003eFor custom post type meta boxes (Hindi content fields):\u003c/strong\u003e\n\n\u003cpre\u003e\u003ccode class=\"language-php\"\u003e// In your admin meta box JavaScript\nTranslitHub.init({\n targets: ['#hindi_title', '#hindi_excerpt', '#hindi_content'],\n defaultLang: 'hi',\n showSelector: false // You've already fixed the language\n});\u003c/code\u003e\u003c/pre\u003e\n\n\u003ch2 id=\"forum-software-integration\"\u003eForum Software Integration\u003c/h2\u003e\n\n\u003cstrong\u003ephpBB:\u003c/strong\u003e\nAdd to your phpBB template's \u003ccode\u003eoverall_header.html\u003c/code\u003e. Target \u003ccode\u003e#message\u003c/code\u003e (the main post textarea) and \u003ccode\u003e#subject\u003c/code\u003e (the thread title input).\n\n\u003cstrong\u003eDiscourse:\u003c/strong\u003e\nDiscourse has a plugin system. Use the \u003ccode\u003e\u003cscript-tag\u003e\u003c/code\u003e component in a theme component to inject the widget script. Target \u003ccode\u003e.d-editor-input\u003c/code\u003e (the main compose textarea).\n\n\u003cstrong\u003eSimple Machines Forum (SMF):\u003c/strong\u003e\nAdd to your theme's \u003ccode\u003eheader.template.php\u003c/code\u003e. Target \u003ccode\u003e#message\u003c/code\u003e and optionally the quick reply field \u003ccode\u003e#quickReplytext\u003c/code\u003e.\n\n\u003ch2 id=\"government-portal-use-case\"\u003eGovernment Portal Use Case\u003c/h2\u003e\n\n\u003cp\u003eThis is worth covering separately because government portal requirements are specific. Forms on government sites typically need to accept text in both English and a regional language — sometimes in the same field, sometimes in separate fields.\u003c/p\u003e\n\n\u003cp\u003eA common pattern:\u003c/p\u003e\n\n\u003cpre\u003e\u003ccode class=\"language-html\"\u003e\u0026lt;!-- Name in English --\u0026gt;\n\u0026lt;div class=\"form-group\"\u0026gt;\n \u0026lt;label\u0026gt;Name (English)\u0026lt;/label\u0026gt;\n \u0026lt;input type=\"text\" id=\"name-en\" placeholder=\"Enter your name\"\u0026gt;\n\u0026lt;/div\u0026gt;\n\n\u003cp\u003e\u0026lt;!-- Name in Hindi --\u0026gt;\u003cbr\u003e\u0026lt;div class=\"form-group\"\u0026gt;\u003cbr\u003e \u0026lt;label\u0026gt;नाम (हिंदी में)\u0026lt;/label\u0026gt;\u003cbr\u003e \u0026lt;input type=\"text\" id=\"name-hi\" placeholder=\"हिंदी में नाम लिखें\"\u0026gt;\u003cbr\u003e\u0026lt;/div\u0026gt;\u003c/code\u003e\u003c/pre\u003e\u003c/p\u003e\n\n\u003cpre\u003e\u003ccode class=\"language-javascript\"\u003eTranslitHub.init({\n targets: ['#name-hi', '#address-hi', '#city-hi'],\n defaultLang: 'hi',\n showSelector: false, // Language is fixed for these fields\n preserveNumbers: true // House numbers, PIN codes stay as Arabic numerals\n});\u003c/code\u003e\u003c/pre\u003e\n\n\u003cp\u003eThe \u003ccode\u003epreserveNumbers: true\u003c/code\u003e option is particularly important for government forms — you don't want phone numbers or ID numbers converting to Devanagari numerals.\u003c/p\u003e\n\n\u003ch2 id=\"handling-multiple-languages-on-the-same-page\"\u003eHandling Multiple Languages on the Same Page\u003c/h2\u003e\n\n\u003cp\u003eIf your site serves multiple regional communities, you might need different default languages for different sections of the page:\u003c/p\u003e\n\n\u003cpre\u003e\u003ccode class=\"language-javascript\"\u003e// Hindi form section\nTranslitHub.init({\n targets: ['[data-lang=\"hi\"]'],\n defaultLang: 'hi',\n showSelector: false\n});\n\n\u003cp\u003e// Tamil section\u003cbr\u003eTranslitHub.init({\u003cbr\u003e targets: ['[data-lang=\"ta\"]'],\u003cbr\u003e defaultLang: 'ta',\u003cbr\u003e showSelector: false\u003cbr\u003e});\u003c/p\u003e\n\n\u003cp\u003e// Generic section where user picks language\u003cbr\u003eTranslitHub.init({\u003cbr\u003e targets: ['[data-lang=\"auto\"]'],\u003cbr\u003e defaultLang: 'hi',\u003cbr\u003e availableLangs: ['hi', 'ta', 'te', 'bn', 'mr'],\u003cbr\u003e showSelector: true\u003cbr\u003e});\u003c/code\u003e\u003c/pre\u003e\u003c/p\u003e\n\n\u003cp\u003eMultiple \u003ccode\u003eTranslitHub.init()\u003c/code\u003e calls work independently — each one handles its own target set.\u003c/p\u003e\n\n\u003ch2 id=\"mobile-behavior\"\u003eMobile Behavior\u003c/h2\u003e\n\n\u003cp\u003eOn mobile devices, the widget behaves slightly differently because phone keyboards have their own input handling:\u003c/p\u003e\n\n\u003cul\u003e\n\u003cli\u003eOn iOS Safari and Chrome for Android, the widget works within the limitations of mobile browser text input. Phonetic conversion still happens, but the native keyboard suggestions may interfere.\u003c/li\u003e\n\u003cli\u003eThe language selector adapts to a mobile-friendly dropdown that doesn't obscure the input field.\u003c/li\u003e\n\u003cli\u003eFor touch devices, the suggestion dropdown items are larger for easier tapping.\u003c/li\u003e\n\u003c/ul\u003e\nFor the best mobile experience, set \u003ccode\u003esuggestionDropdown: false\u003c/code\u003e on mobile (detect via user agent) to avoid UI conflicts with the native keyboard:\n\n\u003cpre\u003e\u003ccode class=\"language-javascript\"\u003econst isMobile = /Mobi|Android/i.test(navigator.userAgent);\n\n\u003cp\u003eTranslitHub.init({\u003cbr\u003e targets: ['#user-input'],\u003cbr\u003e defaultLang: 'hi',\u003cbr\u003e suggestionDropdown: !isMobile\u003cbr\u003e});\u003c/code\u003e\u003c/pre\u003e\u003c/p\u003e\n\n\u003ch2 id=\"performance-notes\"\u003ePerformance Notes\u003c/h2\u003e\n\n\u003cp\u003eThe widget script is ~28KB minified and gzipped, loaded from TranslitHub's CDN. It defers after the page's main content loads (the \u003ccode\u003easync\u003c/code\u003e attribute on the script tag ensures this).\u003c/p\u003e\n\n\u003cp\u003eFor pages with many transliterable inputs, the widget batches conversions and debounces input — it doesn't fire a conversion request on every single keystroke. The default debounce is 150ms, which is fast enough to feel real-time while avoiding unnecessary processing.\u003c/p\u003e\n\n\u003cp\u003eIf you're on a strict Content Security Policy (CSP), add the CDN domain to your \u003ccode\u003escript-src\u003c/code\u003e:\u003c/p\u003e\n\n\u003cpre\u003e\u003ccode class=\"language-text\"\u003eContent-Security-Policy: script-src 'self' cdn.transliterate.in;\u003c/code\u003e\u003c/pre\u003e\n\n\u003ch2 id=\"disabling-the-widget-for-specific-inputs\"\u003eDisabling the Widget for Specific Inputs\u003c/h2\u003e\n\n\u003cp\u003eAdd the \u003ccode\u003edata-no-translit\u003c/code\u003e attribute to any input you don't want the widget to affect:\u003c/p\u003e\n\n\u003cpre\u003e\u003ccode class=\"language-html\"\u003e\u0026lt;input type=\"text\" id=\"email\" data-no-translit placeholder=\"Email address\"\u0026gt;\n\u0026lt;input type=\"text\" id=\"phone\" data-no-translit placeholder=\"Phone number\"\u0026gt;\n\u0026lt;input type=\"text\" id=\"username\" data-no-translit placeholder=\"Username\"\u0026gt;\u003c/code\u003e\u003c/pre\u003e\n\n\u003cp\u003eThis is important for fields where you explicitly don't want conversion — email addresses, URLs, numeric fields, passwords.\u003c/p\u003e\n\n\u003ch2 id=\"detecting-transliteration-in-your-backend\"\u003eDetecting Transliteration in Your Backend\u003c/h2\u003e\n\n\u003cp\u003eWhen a form is submitted, the converted Indian language text is just regular Unicode. Your backend doesn't need to do anything special — it receives UTF-8 encoded text just like any other text field. Store it in your database, send it in emails, display it back in the UI — it all works without special handling.\u003c/p\u003e\n\n\u003cp\u003eThe only thing to verify is that your database column and connection are set to UTF-8 or UTF-8MB4 character encoding, which is the default for any modern database setup.\u003c/p\u003e\n\n\u003ch2 id=\"related-tools\"\u003eRelated Tools\u003c/h2\u003e\n\n\u003cul\u003e\n\u003cli\u003e\u003ca href=\"/tools/transliteration-api-for-developers\"\u003eTranslitHub API\u003c/a\u003e — programmatic transliteration for server-side integration\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"/tools/transliteration-browser-extension\"\u003eBrowser Extension\u003c/a\u003e — type in Indian languages on any site you visit\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"/tools/transliteration-editor\"\u003eTransliteration Editor\u003c/a\u003e — standalone editor for document creation\u003c/li\u003e\n\u003c/ul\u003e"])</script><script>self.__next_f.push([1,"6:[[\"$\",\"$L15\",null,{\"size\":\"leaderboard\",\"className\":\"hidden sm:flex py-3 bg-gray-50 border-b border-gray-100\"}],[\"$\",\"div\",null,{\"className\":\"mx-auto max-w-7xl px-4 py-8\",\"children\":[[\"$\",\"nav\",null,{\"aria-label\":\"Breadcrumb\",\"className\":\"mb-6\",\"children\":[\"$\",\"ol\",null,{\"className\":\"flex items-center gap-1.5 text-sm text-gray-500\",\"children\":[[\"$\",\"li\",null,{\"children\":[\"$\",\"$L16\",null,{\"href\":\"/\",\"className\":\"flex items-center gap-1 hover:text-gray-900 transition-colors\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-house h-3.5 w-3.5\",\"children\":[[\"$\",\"path\",\"5wwlr5\",{\"d\":\"M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8\"}],[\"$\",\"path\",\"1d0kgt\",{\"d\":\"M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"}],\"$undefined\"]}],[\"$\",\"span\",null,{\"children\":\"Home\"}]]}]}],[[\"$\",\"li\",\"0\",{\"className\":\"flex items-center gap-1.5\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3.5 w-3.5 text-gray-400\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],[\"$\",\"$L16\",null,{\"href\":\"/tools\",\"className\":\"hover:text-gray-900 transition-colors\",\"children\":\"tools\"}]]}],[\"$\",\"li\",\"1\",{\"className\":\"flex items-center gap-1.5\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3.5 w-3.5 text-gray-400\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],[\"$\",\"span\",null,{\"className\":\"text-gray-900 font-medium\",\"children\":\"Embed a Transliteration Widget on Your Website\"}]]}]]]}]}],[\"$\",\"div\",null,{\"className\":\"grid gap-10 lg:grid-cols-[1fr_280px]\",\"children\":[[\"$\",\"article\",null,{\"className\":\"prose prose-lg max-w-none\",\"children\":[[\"$\",\"header\",null,{\"className\":\"not-prose mb-10\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-wrap items-center gap-3 text-sm text-gray-500\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-calendar h-4 w-4\",\"children\":[[\"$\",\"path\",\"1cmpym\",{\"d\":\"M8 2v4\"}],[\"$\",\"path\",\"4m81vk\",{\"d\":\"M16 2v4\"}],[\"$\",\"rect\",\"1hopcy\",{\"width\":\"18\",\"height\":\"18\",\"x\":\"3\",\"y\":\"4\",\"rx\":\"2\"}],[\"$\",\"path\",\"8toen8\",{\"d\":\"M3 10h18\"}],\"$undefined\"]}],\"March 26, 2026\"]}],[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-clock h-4 w-4\",\"children\":[[\"$\",\"circle\",\"1mglay\",{\"cx\":\"12\",\"cy\":\"12\",\"r\":\"10\"}],[\"$\",\"polyline\",\"68esgv\",{\"points\":\"12 6 12 12 16 14\"}],\"$undefined\"]}],\"7 min read\"]}]]}],[\"$\",\"h1\",null,{\"className\":\"mt-5 text-4xl font-extrabold tracking-tight text-gray-900 sm:text-5xl leading-[1.15]\",\"children\":\"Embed a Transliteration Widget on Your Website\"}],[\"$\",\"p\",null,{\"className\":\"mt-4 text-xl leading-relaxed text-gray-500\",\"style\":{\"fontFamily\":\"var(--font-serif)\"},\"children\":\"How to add Indian language typing capability to any website using the TranslitHub embeddable widget — embed code, customization options, and use cases for blogs, forums, and portals.\"}],[\"$\",\"div\",null,{\"className\":\"mt-5 flex flex-wrap gap-2\",\"children\":[[\"$\",\"span\",\"widget\",{\"className\":\"flex items-center gap-1 rounded-full px-3 py-1 text-xs font-semibold\",\"style\":{\"border\":\"1px solid #ff993333\",\"background\":\"#ff99330d\",\"color\":\"#ff9933\"},\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-tag h-3 w-3\",\"children\":[[\"$\",\"path\",\"vktsd0\",{\"d\":\"M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z\"}],[\"$\",\"circle\",\"kqv944\",{\"cx\":\"7.5\",\"cy\":\"7.5\",\"r\":\".5\",\"fill\":\"currentColor\"}],\"$undefined\"]}],\" \",\"widget\"]}],[\"$\",\"span\",\"embed\",{\"className\":\"flex items-center gap-1 rounded-full px-3 py-1 text-xs font-semibold\",\"style\":{\"border\":\"1px solid #ff993333\",\"background\":\"#ff99330d\",\"color\":\"#ff9933\"},\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-tag h-3 w-3\",\"children\":[[\"$\",\"path\",\"vktsd0\",{\"d\":\"M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z\"}],[\"$\",\"circle\",\"kqv944\",{\"cx\":\"7.5\",\"cy\":\"7.5\",\"r\":\".5\",\"fill\":\"currentColor\"}],\"$undefined\"]}],\" \",\"embed\"]}],[\"$\",\"span\",\"website\",{\"className\":\"flex items-center gap-1 rounded-full px-3 py-1 text-xs font-semibold\",\"style\":{\"border\":\"1px solid #ff993333\",\"background\":\"#ff99330d\",\"color\":\"#ff9933\"},\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-tag h-3 w-3\",\"children\":[[\"$\",\"path\",\"vktsd0\",{\"d\":\"M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z\"}],[\"$\",\"circle\",\"kqv944\",{\"cx\":\"7.5\",\"cy\":\"7.5\",\"r\":\".5\",\"fill\":\"currentColor\"}],\"$undefined\"]}],\" \",\"website\"]}],[\"$\",\"span\",\"transliteration\",{\"className\":\"flex items-center gap-1 rounded-full px-3 py-1 text-xs font-semibold\",\"style\":{\"border\":\"1px solid #ff993333\",\"background\":\"#ff99330d\",\"color\":\"#ff9933\"},\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-tag h-3 w-3\",\"children\":[[\"$\",\"path\",\"vktsd0\",{\"d\":\"M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z\"}],[\"$\",\"circle\",\"kqv944\",{\"cx\":\"7.5\",\"cy\":\"7.5\",\"r\":\".5\",\"fill\":\"currentColor\"}],\"$undefined\"]}],\" \",\"transliteration\"]}],[\"$\",\"span\",\"integration\",{\"className\":\"flex items-center gap-1 rounded-full px-3 py-1 text-xs font-semibold\",\"style\":{\"border\":\"1px solid #ff993333\",\"background\":\"#ff99330d\",\"color\":\"#ff9933\"},\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-tag h-3 w-3\",\"children\":[[\"$\",\"path\",\"vktsd0\",{\"d\":\"M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z\"}],[\"$\",\"circle\",\"kqv944\",{\"cx\":\"7.5\",\"cy\":\"7.5\",\"r\":\".5\",\"fill\":\"currentColor\"}],\"$undefined\"]}],\" \",\"integration\"]}]]}],[\"$\",\"div\",null,{\"className\":\"mt-6 flex items-center gap-4 border-t border-gray-100 pt-5\",\"children\":[\"$\",\"$L17\",null,{\"url\":\"https://blog.transliterate.in/tools--embeddable-transliteration-widget\",\"title\":\"Embed a Transliteration Widget on Your Website\"}]}]]}],[\"$\",\"div\",null,{\"className\":\"not-prose mb-8\",\"children\":[\"$\",\"$L15\",null,{\"size\":\"rectangle\",\"className\":\"flex justify-center sm:justify-start\"}]}],[\"$\",\"div\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"$18\"}}],[\"$\",\"div\",null,{\"className\":\"not-prose mt-10 pt-8 border-t border-gray-100\",\"children\":[\"$\",\"$L15\",null,{\"size\":\"banner\",\"className\":\"flex justify-center\"}]}]]}],[\"$\",\"aside\",null,{\"className\":\"hidden lg:block\",\"children\":[\"$\",\"$L19\",null,{}]}]]}]]}],[\"$\",\"$L15\",null,{\"size\":\"mobile-sticky\"}]]\n"])</script><script>self.__next_f.push([1,"b:null\n"])</script><script>self.__next_f.push([1,"f:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1, maximum-scale=5, user-scalable=yes\"}]]\na:null\n"])</script><script>self.__next_f.push([1,"13:{\"metadata\":[[\"$\",\"title\",\"0\",{\"children\":\"Transliterate Blog\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"Indian language transliteration guides, scripts, and tools\"}],[\"$\",\"meta\",\"2\",{\"name\":\"robots\",\"content\":\"index, follow\"}],[\"$\",\"meta\",\"3\",{\"name\":\"googlebot\",\"content\":\"index, follow, max-video-preview:-1, max-image-preview:large, max-snippet:-1\"}],[\"$\",\"link\",\"4\",{\"rel\":\"canonical\",\"href\":\"https://blog.transliterate.in\"}],[\"$\",\"link\",\"5\",{\"rel\":\"alternate\",\"hrefLang\":\"x-default\",\"href\":\"https://blog.transliterate.in\"}],[\"$\",\"link\",\"6\",{\"rel\":\"alternate\",\"hrefLang\":\"en\",\"href\":\"https://blog.transliterate.in\"}],[\"$\",\"link\",\"7\",{\"rel\":\"alternate\",\"hrefLang\":\"de\",\"href\":\"https://blog.transliterate.in\"}],[\"$\",\"link\",\"8\",{\"rel\":\"alternate\",\"hrefLang\":\"fr\",\"href\":\"https://blog.transliterate.in\"}],[\"$\",\"link\",\"9\",{\"rel\":\"alternate\",\"hrefLang\":\"ja\",\"href\":\"https://blog.transliterate.in\"}],[\"$\",\"link\",\"10\",{\"rel\":\"alternate\",\"hrefLang\":\"ko\",\"href\":\"https://blog.transliterate.in\"}],[\"$\",\"link\",\"11\",{\"rel\":\"alternate\",\"hrefLang\":\"it\",\"href\":\"https://blog.transliterate.in\"}],[\"$\",\"link\",\"12\",{\"rel\":\"alternate\",\"hrefLang\":\"es\",\"href\":\"https://blog.transliterate.in\"}],[\"$\",\"link\",\"13\",{\"rel\":\"alternate\",\"hrefLang\":\"pt\",\"href\":\"https://blog.transliterate.in\"}],[\"$\",\"link\",\"14\",{\"rel\":\"alternate\",\"hrefLang\":\"nl\",\"href\":\"https://blog.transliterate.in\"}],[\"$\",\"link\",\"15\",{\"rel\":\"alternate\",\"hrefLang\":\"sv\",\"href\":\"https://blog.transliterate.in\"}],[\"$\",\"link\",\"16\",{\"rel\":\"alternate\",\"hrefLang\":\"no\",\"href\":\"https://blog.transliterate.in\"}],[\"$\",\"link\",\"17\",{\"rel\":\"alternate\",\"hrefLang\":\"da\",\"href\":\"https://blog.transliterate.in\"}],[\"$\",\"link\",\"18\",{\"rel\":\"alternate\",\"hrefLang\":\"fi\",\"href\":\"https://blog.transliterate.in\"}],[\"$\",\"link\",\"19\",{\"rel\":\"alternate\",\"hrefLang\":\"he\",\"href\":\"https://blog.transliterate.in\"}],[\"$\",\"link\",\"20\",{\"rel\":\"alternate\",\"hrefLang\":\"zh-CN\",\"href\":\"https://blog.transliterate.in\"}],[\"$\",\"link\",\"21\",{\"rel\":\"alternate\",\"hrefLang\":\"zh-TW\",\"href\":\"https://blog.transliterate.in\"}],[\"$\",\"link\",\"22\",{\"rel\":\"alternate\",\"hrefLang\":\"ar\",\"href\":\"https://blog.transliterate.in\"}],[\"$\",\"link\",\"23\",{\"rel\":\"alternate\",\"hrefLang\":\"hi\",\"href\":\"https://blog.transliterate.in\"}],[\"$\",\"link\",\"24\",{\"rel\":\"alternate\",\"hrefLang\":\"ru\",\"href\":\"https://blog.transliterate.in\"}],[\"$\",\"link\",\"25\",{\"rel\":\"alternate\",\"hrefLang\":\"tr\",\"href\":\"https://blog.transliterate.in\"}],[\"$\",\"link\",\"26\",{\"rel\":\"alternate\",\"hrefLang\":\"pl\",\"href\":\"https://blog.transliterate.in\"}],[\"$\",\"link\",\"27\",{\"rel\":\"alternate\",\"hrefLang\":\"cs\",\"href\":\"https://blog.transliterate.in\"}],[\"$\",\"link\",\"28\",{\"rel\":\"alternate\",\"hrefLang\":\"id\",\"href\":\"https://blog.transliterate.in\"}],[\"$\",\"link\",\"29\",{\"rel\":\"alternate\",\"hrefLang\":\"th\",\"href\":\"https://blog.transliterate.in\"}],[\"$\",\"link\",\"30\",{\"rel\":\"alternate\",\"hrefLang\":\"vi\",\"href\":\"https://blog.transliterate.in\"}],[\"$\",\"link\",\"31\",{\"rel\":\"alternate\",\"hrefLang\":\"ms\",\"href\":\"https://blog.transliterate.in\"}],[\"$\",\"link\",\"32\",{\"rel\":\"alternate\",\"hrefLang\":\"bn\",\"href\":\"https://blog.transliterate.in\"}],[\"$\",\"link\",\"33\",{\"rel\":\"alternate\",\"hrefLang\":\"uk\",\"href\":\"https://blog.transliterate.in\"}],[\"$\",\"meta\",\"34\",{\"property\":\"og:title\",\"content\":\"Transliterate Blog\"}],[\"$\",\"meta\",\"35\",{\"property\":\"og:description\",\"content\":\"Indian language transliteration guides, scripts, and tools\"}],[\"$\",\"meta\",\"36\",{\"property\":\"og:site_name\",\"content\":\"Transliterate Blog\"}],[\"$\",\"meta\",\"37\",{\"property\":\"og:locale\",\"content\":\"en_US\"}],[\"$\",\"meta\",\"38\",{\"property\":\"og:type\",\"content\":\"website\"}],[\"$\",\"meta\",\"39\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"40\",{\"name\":\"twitter:title\",\"content\":\"Transliterate Blog\"}],[\"$\",\"meta\",\"41\",{\"name\":\"twitter:description\",\"content\":\"Indian language transliteration guides, scripts, and tools\"}]],\"error\":null,\"digest\":\"$undefined\"}\n"])</script><script>self.__next_f.push([1,"d:{\"metadata\":\"$13:metadata\",\"error\":null,\"digest\":\"$undefined\"}\n"])</script></body></html>

What the Widget Does