{"componentChunkName":"component---src-templates-blog-post-js","path":"/emotes-widget/","result":{"data":{"site":{"siteMetadata":{"title":"Vuukle Docs","author":"Vuukle"}},"markdownRemark":{"id":"0faaf433-a912-5ac2-b826-f58837d31ad1","html":"<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 960px;\"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/f48fc9b9437a75dea3338a86355aa71f/bb3ba/emote-widget.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 16.666666666666664%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAADCAYAAACTWi8uAAAACXBIWXMAAAsSAAALEgHS3X78AAAAtElEQVQI1yWOPQvCMBBA/f+4CA5ODu6u4igiLi6KIqJFEbFW8SOaENsm6fMah4P3HtxxDfvNMUZjrWZ2unJUH6DCFCWhqoR9ZB9C7NZ5chkJlNJrr3uoHFq8IcZjNySZdtgoT6E2qEWLw8vgCoVdNtmmR75yOxm3mc0nKNlxgx7pqM9Fus/G3Fddkpf9H9SPM+/zrkZ8/kZn68gEJ30pD7io2X6F08/INtvjVBq5NDeK5yHyDwvd4w/+SWEZAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"Emotes Widget\"\n        title=\"Emotes Widget\"\n        src=\"/static/f48fc9b9437a75dea3338a86355aa71f/d9199/emote-widget.png\"\n        srcset=\"/static/f48fc9b9437a75dea3338a86355aa71f/8ff5a/emote-widget.png 240w,\n/static/f48fc9b9437a75dea3338a86355aa71f/e85cb/emote-widget.png 480w,\n/static/f48fc9b9437a75dea3338a86355aa71f/d9199/emote-widget.png 960w,\n/static/f48fc9b9437a75dea3338a86355aa71f/bb3ba/emote-widget.png 1121w\"\n        sizes=\"(max-width: 960px) 100vw, 960px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n  </a>\n    </span></p>\n<br>\n<br>\n<h2>HOW TO ENABLE</h2>\n<h3>Enable Vuukle Emote widget using WordPress plugin:</h3>\n<p>In your WordPress Admin panel, go into Settings > Vuukle and choose On for Show Emote at the end of each post option</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 909px;\"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/7533d55dbb808cd1e9a381eda7e65ada/b3ad9/emotes-widget-Vuukle-Enable-Emotes-Wordpress.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 77.08333333333333%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAYAAADkmO9VAAAACXBIWXMAAA7DAAAOwwHHb6hkAAACiUlEQVQ4y42Ty08TURjF538wGBEfYCoEI0qTUgstpeERCcFEYmKMW3f+DQrKI0SCuDBhw15XssWVK1cmgo08Axvazkxn2s7cO3dmMMHk+N3bTCOJkS5OJvO4vznne2iJ1CASqQzaOjrxYmYWhUIBO7t72N7ewU/S7t4+Nje3YBgmfD+A5wl4wgfnHhjndOVgQoB5Pr3zoCX6s+hN9KOlrR3Tr+fVQ8M0YVkWyuUyXNdFeHICEQawrRJ0U0elcATh2BA+JzjDL6sMr1KCaZnQ0kOjiPcNoOXy9QawUqmgVqspOYzBJtdWPo+jL2swf6yjuvUBbv4jCt8/4fDrOvx3qwi/rcE4+AwtlRnGvXQOrddimJldwO/TUwViBJJxOMUx9g9wuLEBZhoIBIdgDgR3wN1IDMLjCMmtdpfiJvoHcbWjCy9fzSlIsVhCpVqt14fAjuMg8H0V3ZP1YlzV74xYXVqS3CUHhnDxSgc5nFeQUolqpRuqfvI+DEOcECwMAlWSunsS+0u8Li2eSqMnnsCFS22YJqBPTkzZFNtWf5QfSYcuxQrOAPk/pT2deobhR89xI/0Yy4vvIdwadBoR2eHoYASUToWK/B/gxPgUsiMP0N2bxtKbFfrYRUnXKbIOm7otHanIpKYcZkfHkcrkEOvuweLSsopYLBZpdKqNw5ZtqUGW4HOBYxMPkRm+j9itXgK+pfZ7aitkZBk1chjp3Mg5cpjJjqArAoo60LLsRpelZLOacviENmWSdjnZHsMqddmhQT0+PlbQaA6rNJPSWVPAyb44xvpSSN7sxgoNttplw1BzKIdb3kcNaaopt3Oj6EwOobXzDqbnFtQBuSlVBas7rMlNIZgc7vNq+AcZEvoPeRpPxgAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"Enable Emotes in WordPress\"\n        title=\"Enable Emotes in WordPress\"\n        src=\"/static/7533d55dbb808cd1e9a381eda7e65ada/b3ad9/emotes-widget-Vuukle-Enable-Emotes-Wordpress.png\"\n        srcset=\"/static/7533d55dbb808cd1e9a381eda7e65ada/8ff5a/emotes-widget-Vuukle-Enable-Emotes-Wordpress.png 240w,\n/static/7533d55dbb808cd1e9a381eda7e65ada/e85cb/emotes-widget-Vuukle-Enable-Emotes-Wordpress.png 480w,\n/static/7533d55dbb808cd1e9a381eda7e65ada/b3ad9/emotes-widget-Vuukle-Enable-Emotes-Wordpress.png 909w\"\n        sizes=\"(max-width: 909px) 100vw, 909px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n  </a>\n    </span></p>\n<br>\n<br>\n<h3>For Blogger:</h3>\n<p>In your Blogger dashboard, go into Layout tab, edit the Vuukle HTML/JavaScript widget and insert the shortcode <code class=\"language-text\">[vuukle-emote]</code>. Then click the Save button.</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 558px;\"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/b1120bf33043b8d04ccd7909d43db1fc/42a8d/emotes-widget-Vuukle-Enable-Emotes-Blogger.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 105.41666666666667%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAVCAIAAADJt1n/AAAACXBIWXMAAAsSAAALEgHS3X78AAAB0klEQVQ4y61UzY7TMBDuA/MaPAEXXoATBw7cEBJIXJAQHNDuAiukUG3a4tiO7djOnz1jJk5buuymLBJfHMc/8804/sZe9V/e1rV0vjXGaKWdc0ZrY5oMY51tGmtyfzyg67phGPq+X/2QxVZtKyl4xbfbXVneMPZTClFLqghcSqmUErdRVZwMVrLx7fUb/eH5xdXXi8vLoig02dYTqFYZWut9Q+n9N2Plun5g37vN1Y7LdVkKpdth9F2fy+B965exSilhCOhtcnUaW/QKG4m2RqvQyhTGtIyJnAYPDQ+8jFaBU6A5qAqMAM1w7M6SEYcQIsDdOaRyFlNk0qhiLIYAMZ4WvM/jn8sGAFKSpEPAiXYA+Z6NqB1jJGGpDuNI9Tw1kZ21VVUF2rZsh5k2A3Jway0Jvi4LSid6SKR5fCK3rRecm8aKzW4UZnJxEh9OfM0Bj4vaLzvlTqTsfPQU1jxvFy796uzxhHyw7q9v3Mv3uMxcIM/iUPy2xxD/nTxRIf1NoWXyA/AfyTHQm/ChLo6aTWTaHMhlHjrOzUlyF5ROvyNj+Qk+PoPPLzrDtWnolqGUoguAbpx7z8OtJMFvr+HVY3j3pJUbxgWdcrpKGGOU7efX/wu6iciNbdKjNAAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"Enable Emotes in Blogger\"\n        title=\"Enable Emotes in Blogger\"\n        src=\"/static/b1120bf33043b8d04ccd7909d43db1fc/42a8d/emotes-widget-Vuukle-Enable-Emotes-Blogger.png\"\n        srcset=\"/static/b1120bf33043b8d04ccd7909d43db1fc/8ff5a/emotes-widget-Vuukle-Enable-Emotes-Blogger.png 240w,\n/static/b1120bf33043b8d04ccd7909d43db1fc/e85cb/emotes-widget-Vuukle-Enable-Emotes-Blogger.png 480w,\n/static/b1120bf33043b8d04ccd7909d43db1fc/42a8d/emotes-widget-Vuukle-Enable-Emotes-Blogger.png 558w\"\n        sizes=\"(max-width: 558px) 100vw, 558px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n  </a>\n    </span></p>\n<br>\n<br>\n<h3>For JavaScript:</h3>\n<p>In your website’s HTML, insert the following code where you want the Emotes widget to display</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token operator\">&lt;</span>div id<span class=\"token operator\">=</span><span class=\"token string\">\"vuukle-emote\"</span> <span class=\"token operator\">/</span><span class=\"token operator\">></span></code></pre></div>\n<hr>\n<br>\n<br>\n<h2>HOW TO CUSTOMIZE</h2>\n<br>\n<h3>JS variables:</h3>\n<div class=\"gatsby-highlight\" data-language=\"html\"><pre class=\"language-html\"><code class=\"language-html\">emotes: { enabled: true, //Enables Emote widget on the page hideRecommendedArticles: false, //Hides Article recommendations on Emote selection size:\nundefined, // icons size firstImg: undefined, // Set here the image URL to the desired emoji or image firstName: 'Happy', //Change the name of the\nEmote secondImg: undefined, secondName: 'Unmoved', thirdImg: undefined, thirdName: 'Amused', fourthImg: undefined, fourthName: 'Excited', fifthImg:\n'https://upload.wikimedia.org/wikipedia/commons/1/10/Linea_5.png', fifthName: 'Angry', sixthImg: undefined, sixthName: 'Sad', disable: [], //You can\ndisable some emotes (Emotes id's 1,2,3,4,5,6) customText: {}, },</code></pre></div>\n<br>\n<h3>WordPress Settings</h3>\n<p>Same as the JS variable list but with User friendly settings look:</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 740px;\"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/e237658f09465035ea1118e27b7fa15a/50383/emotes-widget-img-2.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 109.58333333333331%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAWCAYAAADAQbwGAAAACXBIWXMAAA7DAAAOwwHHb6hkAAACDUlEQVQ4y6VUyW7UQBT0H/ML3BDiwDdw48AVgQSISw5RFIGCkCAMmcHjfby0PV5m4VC8ek47TiJBWhxKLbv7VVd19Wvv8vIHVr98rNdr+P6IOEmw3TZomi3ausTi60csrr5jefEOZnGKLP6GtrhCmPk4fDrH7y8nSJbvsVr78MqylMJGCLYT+F1VFcrKYOgMlm8fo1l+QHf+BN3qDczZUwRnL/Hz9AWqZ88xvH6F7vMjNMkFvDlRXdcTiqLAJs9RmhqNfLdtC2PGcdy0HYV0Hdp+J/87nfOiKEIQhIrKGF1EWOX7/R47ARffbMg1tc7PRRBemmZI5MyIzWYzEdpj6EQBYR0o0YygmUNqhDDVEEgYx8m0cBgGHA6ibrdTkLS+LvobVCFJR4X5LctZlukxkNxa/idhLgdPqyzO82KaMLXRpBux2vf9wwlpM5Rg4jjWO0hiTlDV8XhUu04K9QyFjCiKcprQeyi2u653U5iKIqokyrK6R0gyJ4UMIwhDVcj2MxLCTcoHHZ0I2REMhoFQkS2yIxU6WaZCdguDIbHtZW5EOCu0oSRJqsQkscrYdv9BmOgF17t3PUmS+633AMuhhBKGkRZYy7RfCrlz62XSJVYdYXuZBLTqHIptuywT4juElsw5ZZ4hUzZ33kM+ms6tR3X6Hoo62p8X2UCcQlF1EkqknRLoM89C2rSBuITyB2oOgX+r3wU5AAAAAElFTkSuQmCC'); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"wp emote s\"\n        title=\"wp emote s\"\n        src=\"/static/e237658f09465035ea1118e27b7fa15a/50383/emotes-widget-img-2.png\"\n        srcset=\"/static/e237658f09465035ea1118e27b7fa15a/8ff5a/emotes-widget-img-2.png 240w,\n/static/e237658f09465035ea1118e27b7fa15a/e85cb/emotes-widget-img-2.png 480w,\n/static/e237658f09465035ea1118e27b7fa15a/50383/emotes-widget-img-2.png 740w\"\n        sizes=\"(max-width: 740px) 100vw, 740px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n  </a>\n    </span></p>","frontmatter":{"title":"Emote widget and everything you need to know about it","date":"August 23, 2017","category":"Vuukle Widgets","tags":["widgets","emotes","wordpress","javascript","blogger"],"shortDescription":"Simple steps to enable Emotes widget in your article with WordPress, javascript or blogger"}}},"pageContext":{"id":"0faaf433-a912-5ac2-b826-f58837d31ad1"}}}