Days
Hours
Minutes
Seconds
x

Froala Editor v4.2.0 is Here LEARN MORE

Skip to content

Emoticons Plugin

Let your users choose from 56 emoticons and Insert it in the WYSIWYG HTML editor.


Plugin options:

emoticonsButtons
Array -
Buttons set for emoticons popup.
Default: ["emoticonsBack", "|"]
emoticonsSet
Array -
An array of emoticons available in the insert emoticon popup. Each emoticon is defined by an Object containing the code and description of each emoticon.
Default:[
{code: '1f600', desc: 'Grinning face'},
{code: '1f601', desc: 'Grinning face with smiling eyes'},
{code: '1f602', desc: 'Face with tears of joy'},
{code: '1f603', desc: 'Smiling face with open mouth'},
{code: '1f604', desc: 'Smiling face with open mouth and smiling eyes'},
{code: '1f605', desc: 'Smiling face with open mouth and cold sweat'},
{code: '1f606', desc: 'Smiling face with open mouth and tightly-closed eyes'},
{code: '1f607', desc: 'Smiling face with halo'},
{code: '1f608', desc: 'Smiling face with horns'},
{code: '1f609', desc: 'Winking face'},
{code: '1f60a', desc: 'Smiling face with smiling eyes'},
{code: '1f60b', desc: 'Face savoring delicious food'},
{code: '1f60c', desc: 'Relieved face'},
{code: '1f60d', desc: 'Smiling face with heart-shaped eyes'},
{code: '1f60e', desc: 'Smiling face with sunglasses'},
{code: '1f60f', desc: 'Smirking face'},

{code: '1f610', desc: 'Neutral face'},
{code: '1f611', desc: 'Expressionless face'},
{code: '1f612', desc: 'Unamused face'},
{code: '1f613', desc: 'Face with cold sweat'},
{code: '1f614', desc: 'Pensive face'},
{code: '1f615', desc: 'Confused face'},
{code: '1f616', desc: 'Confounded face'},
{code: '1f617', desc: 'Kissing face'},
{code: '1f618', desc: 'Face throwing a kiss'},
{code: '1f619', desc: 'Kissing face with smiling eyes'},
{code: '1f61a', desc: 'Kissing face with closed eyes'},
{code: '1f61b', desc: 'Face with stuck out tongue'},
{code: '1f61c', desc: 'Face with stuck out tongue and winking eye'},
{code: '1f61d', desc: 'Face with stuck out tongue and tightly-closed eyes'},
{code: '1f61e', desc: 'Disappointed face'},
{code: '1f61f', desc: 'Worried face'},
{code: '1f620', desc: 'Angry face'},
{code: '1f621', desc: 'Pouting face'},
{code: '1f622', desc: 'Crying face'},
{code: '1f623', desc: 'Persevering face'},
{code: '1f624', desc: 'Face with look of triumph'},
{code: '1f625', desc: 'Disappointed but relieved face'},
{code: '1f626', desc: 'Frowning face with open mouth'},
{code: '1f627', desc: 'Anguished face'},

{code: '1f628', desc: 'Fearful face'},
{code: '1f629', desc: 'Weary face'},
{code: '1f62a', desc: 'Sleepy face'},
{code: '1f62b', desc: 'Tired face'},
{code: '1f62c', desc: 'Grimacing face'},
{code: '1f62d', desc: 'Loudly crying face'},
{code: '1f62e', desc: 'Face with open mouth'},
{code: '1f62f', desc: 'Hushed face'},

{code: '1f631', desc: 'Face screaming in fear'},
{code: '1f632', desc: 'Astonished face'},
{code: '1f633', desc: 'Flushed face'},
{code: '1f634', desc: 'Sleeping face'},
{code: '1f635', desc: 'Dizzy face'},
{code: '1f636', desc: 'Face without mouth'},
{code: '1f637', desc: 'Face with medical mask'}
]
emoticonsUseImage
Boolean -
Use EmojiOne svg images instead of Unicode text.
Default: true
emoticonsStep
Number -
The number of emoticons displayed on a line in the insert emoticon popup.
Default: 8

Plugin methods:

emoticons.insert (emoticon, image)
returns: Object
Insert an emoticon at the cursor position.
● emoticon:HTML for the emoticon to be inserted in the editor.
Type: String

● image: Image to be inserted when the moticonsUseImage option is enabled.
Type: String
emoticons.setEmoticonCategory (categoryId)
returns:


● categoryId: Category Id for the emoticons.
Type: String

Add Plugin to your code:

Plugin name: emoticons

Plugin JS Script: ../js/plugins/emoticons.min.js

Or from CDN https://cdn.jsdelivr.net/npm/froala-editor@latest/js/plugins/emoticons.min.js

Plugin CSS link: ../css/plugins/emoticons.min.css


Plugin CSS link https://cdn.jsdelivr.net/npm/froala-editor@latest/css/plugins/emoticons.min.css


Example:

● Custom Emoticons

Ready to dive in? Explore our plans

[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_2059230610" class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div style="width: 302px; height: 422px; position: relative;"> <div style="width: 302px; height: 422px; position: absolute;"> <iframe src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px !important; height: 40px !important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important; padding: 0px !important; resize: none !important;"></textarea> </div> </div> </noscript></div>
[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_1687507563" class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div style="width: 302px; height: 422px; position: relative;"> <div style="width: 302px; height: 422px; position: absolute;"> <iframe src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px !important; height: 40px !important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important; padding: 0px !important; resize: none !important;"></textarea> </div> </div> </noscript></div>
[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_2118777738" class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div style="width: 302px; height: 422px; position: relative;"> <div style="width: 302px; height: 422px; position: absolute;"> <iframe src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px !important; height: 40px !important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important; padding: 0px !important; resize: none !important;"></textarea> </div> </div> </noscript></div>