Singlish Unicode Converter

Add the Singlish Widget to Your Website

The Singlish Widget is a lightweight, floating conversion tool that you can easily add to your website. It allows your visitors to convert between Singlish and Unicode Sinhala without leaving your site.

This widget is perfect for blogs, news sites, educational platforms, or any website that needs Sinhala language support.

Preview

Key Features

Lightweight (less than 30kb)
Mobile-responsive design
Real-time conversion
Customizable appearance
No account or API key required

Installation Steps

1

Add the Script to Your Website

Add the following script to your website's HTML, just before the closing </body> tag:

<script src="https://singlish.kdj.lk/widget/singlish-widget.min.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    SinglishWidget.init();
  });
</script>

2

Customize the Widget (Optional)

You can customize the widget by passing configuration options to the init() function:

<script src="https://singlish.kdj.lk/widget/singlish-widget.min.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    SinglishWidget.init({
      position: 'bottom-right',  // 'bottom-right', 'bottom-left', 'top-right', 'top-left'
      theme: 'light',            // 'light', 'dark', 'auto' (follows user's system preference)
      primaryColor: '#cc2d30',   // Custom primary color (hex code)
      buttonText: 'සිංහල',       // Text for the toggle button
      defaultMode: 'singlish',   // 'singlish' or 'unicode'
      autoOpen: false            // Whether to automatically open the widget on page load
    });
  });
</script>

Configuration Options

Option	Default	Description
position	'bottom-right'	Widget position on the screen. Options: 'bottom-right', 'bottom-left', 'top-right', 'top-left'
theme	'auto'	Widget color theme. Options: 'light', 'dark', 'auto' (follows user's system preference)
primaryColor	'#cc2d30'	Primary accent color for buttons and highlights (hex color code)
buttonText	'සිංහල'	Text displayed on the toggle button
defaultMode	'singlish'	Default input mode. Options: 'singlish', 'unicode'
autoOpen	false	Whether to automatically open the widget when the page loads
zIndex	9999	CSS z-index value for the widget (adjust if it conflicts with other elements)
showAttribution	true	Whether to show "Powered by KDJ Singlish" attribution
allowVoiceInput	true	Whether to show the voice input button (if browser supports it)

JavaScript API

In addition to the initialization options, the Singlish Widget provides a JavaScript API that allows you to control the widget programmatically:

`SinglishWidget.open()`

Opens the widget if it's closed.

// Example: Open the widget when a button is clicked
document.getElementById('open-widget-btn').addEventListener('click', function() {
  SinglishWidget.open();
});

`SinglishWidget.close()`

Closes the widget if it's open.

// Example: Close the widget when the user scrolls
window.addEventListener('scroll', function() {
  SinglishWidget.close();
});

`SinglishWidget.toggle()`

Toggles the widget's open/closed state.

// Example: Toggle the widget when a keyboard shortcut is pressed
document.addEventListener('keydown', function(event) {
  // Toggle when Ctrl+Shift+S is pressed
  if (event.ctrlKey && event.shiftKey && event.key === 'S') {
    SinglishWidget.toggle();
  }
});

`SinglishWidget.convert(text, options)`

Converts text directly without opening the widget. Returns a Promise that resolves with the converted text.

// Example: Convert text programmatically
SinglishWidget.convert('ayubowan', {
  inputType: 'singlish',
  format: 'unicode'
}).then(function(result) {
  console.log(result); // Outputs: ආයුබෝවන්
}).catch(function(error) {
  console.error('Conversion error:', error);
});

`SinglishWidget.setTheme(theme)`

Changes the widget's theme. Accepts 'light', 'dark', or 'auto'.

// Example: Switch to dark theme
SinglishWidget.setTheme('dark');

Example Implementations

Example 1: Open Widget for Specific Text Fields

This example shows how to open the widget when a specific text field is focused:

<script src="https://singlish.kdj.lk/widget/singlish-widget.min.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    // Initialize the widget (hidden by default)
    SinglishWidget.init({
      autoOpen: false
    });
    
    // Get all elements that need Sinhala input support
    const sinhalaInputs = document.querySelectorAll('.sinhala-input');
    
    // Add focus event listeners to open the widget
    sinhalaInputs.forEach(function(input) {
      input.addEventListener('focus', function() {
        SinglishWidget.open();
      });
    });
  });
</script>

<!-- In your HTML -->
<textarea class="sinhala-input" placeholder="Type in Singlish or Sinhala..."></textarea>

Example 2: Custom Button to Toggle Widget

This example shows how to create your own custom button to open/close the widget:

<script src="https://singlish.kdj.lk/widget/singlish-widget.min.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    // Initialize the widget without the default toggle button
    SinglishWidget.init({
      showButton: false
    });
    
    // Add click event to your custom button
    document.getElementById('custom-toggle-btn').addEventListener('click', function() {
      SinglishWidget.toggle();
    });
  });
</script>

<!-- In your HTML -->
<button id="custom-toggle-btn" class="your-custom-button-class">
  <img src="sinhala-icon.png" alt="Toggle Sinhala Converter">
  Open Sinhala Converter
</button>

FAQ and Support

Yes, the Singlish Widget is free to use for personal, non-commercial websites. For commercial use or high-volume websites, please contact us about our licensing options.

The Singlish Widget is designed to be lightweight and loads asynchronously, so it won't block your page's rendering. The script is only about 30KB in size and uses lazy loading, meaning it only loads the full functionality when needed.

Yes, you can add the widget to your WordPress site by adding the script to your theme's footer.php file or by using a plugin that allows custom HTML/JavaScript insertion like "Header and Footer Scripts". We're also working on a dedicated WordPress plugin that will make integration even easier.

Yes, the Singlish Widget is fully responsive and works well on mobile devices. It adjusts its size and position based on the screen size to provide an optimal experience on all devices.

If you encounter any issues with the widget, you can reach out to our support team at [email protected]. You can also check our GitHub repository to see if your issue has been reported or to file a new issue.

Need Help?

If you need any assistance with the widget installation or customization, we're here to help!

Email Support GitHub Repository

Singlish Widget