Live Preview Box

Start typing shortnames (:smile:, :blush:, :heart:, etc.) or entering native emojis from a compatible device.

Required extras

To get this example working correctly we needed to include a few extra pieces, including:

• jQuery
• Custom JS (see below)

jQuery Snippet:

<script type="text/javascript">
  $(document).ready(function() {
    $("#inputText").on('keyup change input',function(e) {
      var source = $('#inputText').val();
      var preview = emojione.toImage(source);
      $('#outputText').html(preview);
    });
  });
</script>