Embedding The Singlish Typing Tool On Your Website
Technical guide for embedding the Singlish.lk typing widget on third-party websites using an iframe.
Embedding The Typing Tool
You can embed the Singlish typing tool on any website using a simple iframe. The embed widget provides the full typing tool with Singlish input, voice typing, and suggestion popup.
The widget is available at singlish.lk/embed and supports frame-ancestors * in CSP, allowing embedding on any domain.
Basic Embed Code
<iframe src="https://singlish.lk/embed" width="100%" height="500" style="border:none;border-radius:12px;" allow="microphone" title="Singlish Typing Tool"></iframe>
Place this code anywhere in your HTML. The iframe will load the full typing tool interface.
Configuration Options
The microphone permission (allow="microphone") is needed for voice typing. If voice typing is not required, you can omit this.
The widget auto-saves typing sessions to localStorage. Each domain gets its own storage context.
The widget respects the user's theme preference from localStorage (singlish-theme key).
For custom styling, wrap the iframe in a div and apply your own CSS (borders, shadows, sizing).
Privacy Note
The embed widget works exactly like the main site — all processing happens in the browser (voice, text conversion, OCR). No data is sent to any server.
The iframe is sandboxed from your page by default browser security. No cross-origin data sharing.