Init Emoji Picker – A Framework-Free Emoji Picker Library for Any Website

Why Choose Init Emoji Picker?

Existing emoji picker solutions on the market often come with significant limitations. Some require bulky plugin installations, while others depend on UI frameworks like Bootstrap or UIkit, making integration complex and prone to conflicts with existing code. Init Emoji Picker was built from the ground up to solve these problems thoroughly.

Zero Dependencies

Init Emoji Picker is written entirely in vanilla JavaScript. No jQuery, no React, no Vue, no Bootstrap, no UIkit. A single JavaScript file with CSS automatically injected into the page on initialization. You can use Init Emoji Picker on any website, from personal WordPress blogs to complex web applications, without worrying about conflicts with existing libraries.

Modern Interface with Two Themes

The widget features a clean, modern design supporting both light and dark themes. The dropdown picker has soft rounded corners, subtle drop shadows, and smooth animations. Emojis are arranged in an 8-column grid for easy viewing and selection. The search bar sits prominently at the top of the picker, allowing users to quickly find their desired emoji.

Smart Multilingual Search

One of the standout strengths of Init Emoji Picker is its intelligent search system supporting both English and Vietnamese. Users can search for emojis by typing keywords like “vui”, “buon”, “cafe”, “tim”, “cho”, “meo” or “happy”, “sad”, “coffee”, “heart”, “dog”, “cat”. The system also supports fuzzy matching, allowing approximate searches when users make typos.

Automatic Usage History

Init Emoji Picker automatically saves recently used emojis to localStorage, helping users quickly access frequently used emojis without searching again. The recent emoji list appears in the first tab of the picker, with a maximum of 30 emojis. You can clear the history at any time through the API.

10 Complete Emoji Categories

The library includes 10 popular emoji categories: Smileys & Emotion, People & Body, Animals & Nature, Food & Drink, Activities, Travel & Places, Objects, Symbols, Flags, and Recently Used. Each category has its own icon on the tab bar, making it easy for users to switch between emoji groups.

Key Features of Init Emoji Picker

• Zero dependencies, just a single JavaScript file
• CSS auto-injected, no additional stylesheet needed
• Two themes supported: Light and Dark
• 10 emoji categories with over 1000 emojis
• Smart search supporting English and Vietnamese
• Fuzzy matching for approximate searches
• Save recent emoji history to localStorage
• Support for input, textarea, and contenteditable
• Insert emoji at cursor position
• Auto-position within viewport, flips when needed
• Keyboard navigation (arrow keys + Enter)
• Close picker with Escape key
• Custom iep:select event on emoji pick
• Support click or hover trigger
• Auto-close option after selection
• Full API: init, destroy, updateConfig, clearRecent

How to Install Init Emoji Picker

There are several ways to install Init Emoji Picker on your website. Below are the most common methods.

Method 1: Basic Setup

Just add the script and initialize on an input or textarea:

<script src="https://inithtml.com/releases/libraries/init-emoji-picker/init-emoji-picker.min.js"></script>
<script>
  var picker = new InitEmojiPickerCore();
  picker.init('#comment');
</script>

Method 2: Multiple Inputs at Once

Initialize on multiple elements with a single selector:

<script>
  var picker = new InitEmojiPickerCore();
  picker.init('textarea, input[type="text"]');
</script>

Method 3: With Custom Configuration

<script>
  var picker = new InitEmojiPickerCore({
    theme: 'dark',
    position: 'auto',
    autoClose: true,
    maxRecent: 20
  });
  picker.init('#chat-input');
</script>

Complete Init Emoji Picker Configuration Table

How to Customize Interface Language

You can override default UI text by passing an i18n object:

<script>
  var picker = new InitEmojiPickerCore({
    i18n: {
      recent: 'Recently used',
      smileys: 'Smileys',
      people: 'People',
      search_placeholder: 'Search emoji...',
      no_recent: 'No recently used emojis'
    }
  });
  picker.init('#comment');
</script>

How to Integrate Init Emoji Picker with WordPress

To add Init Emoji Picker to your WordPress website, you can use one of the following methods:

Method 1: Add to Theme File

Open your theme’s footer.php file and add the script before the closing </body> tag:

<script src="https://inithtml.com/releases/libraries/init-emoji-picker/init-emoji-picker.min.js"></script>
<script>
  var picker = new InitEmojiPickerCore();
  picker.init('textarea#comment, textarea.wp-comment-input');
</script>
</body>

Method 2: Using Insert Headers and Footers Plugin

Install the Insert Headers and Footers plugin, then go to Settings > Insert Headers and Footers and paste the script into the Scripts in Footer box.

Method 3: Using functions.php

Add the following code to your theme’s functions.php file:

function enqueue_init_emoji_picker() {
    wp_enqueue_script('init-emoji-picker', 'https://inithtml.com/releases/libraries/init-emoji-picker/init-emoji-picker.min.js', array(), null, true);
    wp_add_inline_script('init-emoji-picker', '
        document.addEventListener("DOMContentLoaded", function() {
            var picker = new InitEmojiPickerCore();
            picker.init("textarea#comment");
        });
    ');
}
add_action('wp_enqueue_scripts', 'enqueue_init_emoji_picker');

Method 4: Using Code Snippets Plugin

If you prefer not to edit theme files, install the Code Snippets plugin and create a new snippet with code similar to Method 3.

Listening for Emoji Selection Events

Init Emoji Picker emits a custom iep:select event when a user picks an emoji. You can listen for this event to perform custom actions:

<script>
  document.addEventListener('iep:select', function(e) {
    console.log('Selected emoji:', e.detail.emoji);
    console.log('Target element:', e.detail.targetElement);

    // Example: Send emoji to server via AJAX
    // fetch('/api/log-emoji', { method: 'POST', body: JSON.stringify({ emoji: e.detail.emoji }) });
  });
</script>

Init Emoji Picker JavaScript API

After initialization, you can control the picker through the following methods:

// Initialize picker
var picker = new InitEmojiPickerCore(config);

// Initialize on elements
picker.init('#comment', { theme: 'dark' });

// Destroy specific instance
picker.destroy('#comment');

// Destroy all instances
picker.destroy();

// Update configuration
picker.updateConfig('#comment', { theme: 'light', autoClose: true });

// Clear recent emoji history
picker.clearRecent();

// Get emojis by category
var smileys = picker.getEmojisByCategory('smileys');

// Add custom emojis
picker.addCustomEmoji('custom', ['🎨', '🚀', '⭐']);

Frequently Asked Questions

Is Init Emoji Picker free?

Yes, Init Emoji Picker is an open-source library released under the MIT license. You can use it for free for both personal and commercial projects.

Does Init Emoji Picker slow down my website?

No. The JavaScript file is optimized and minified. CSS is auto-injected so no additional HTTP requests are needed. Emojis are rendered as Unicode text, no images or icon fonts to download.

Does Init Emoji Picker work on Safari?

Yes, Init Emoji Picker supports all modern browsers including Chrome, Firefox, Safari, and Edge. The widget uses standard web APIs such as DOM API, localStorage, and CustomEvent.

How do I change the theme?

You can select a theme when initializing the picker using the theme option: theme: 'dark' for dark theme or theme: 'light' for light theme.

Can I customize emoji categories?

Yes, you can pass a categories array in the config to specify which categories to display and their order.

Conclusion

Init Emoji Picker is the ideal solution if you’re looking for a lightweight, beautiful, and easy-to-use emoji picker for your website. With its framework-independent design, smart multilingual search, and modern interface supporting both light and dark themes, Init Emoji Picker will enhance user interaction on your website without adding complexity to your project.