Fix Broken Emojis with Emoji-Fallback.js Library

Emoji-Fallback.js is a lightweight JavaScript library that automatically detects native emoji support and replaces Unicode emojis with Twemoji images when necessary.

We’ve all encountered situations where emojis appear as empty squares, question marks, or bizarre character combinations on certain devices.

This becomes particularly problematic when your application relies on emoji content for user interface elements, social features, or international communication.

Emoji-Fallback.js addresses these display inconsistencies by intelligently determining when native emoji support is lacking and substituting high-quality Twemoji images.

How to use it:

1. Import Emoji-Fallback.js into your document. By default, it scans the entire document.body. This single function call will:

• Check the browser for native emoji support.
• If support is missing, it will parse the entire document.body.
• Replace all Unicode emojis with Twemoji images from the jsDelivr CDN.
• Apply the class emoji to each generated <img> tag.

<script type="module">
  import { emojiFallback } from 'https://cdn.jsdelivr.net/gh/MarketingPipeline/Emoji-Fallback.js@latest/dist/emoji-fallback.min.js';
  // Run the check and replace emojis if needed
  emojiFallback(element, cdn, className);
</script>

2. API methods.

// This method skips the support check and forces the replacement of emojis with images.
// It's useful if you want a consistent emoji style regardless of browser support.
parseEmoji(element, cdn, className)
// A simple utility function that returns true or false.
emojiSupported()
// Returns a new string with Unicode emojis replaced by <img> tags.
// This is great for situations where you're building HTML strings in JavaScript before inserting them into the DOM.
parseEmojiString(str, cdn, className)