Emote widget

The Emote widget puts six tappable reactions on each article. Average reaction-click-through is 5–10% of pageviews — significantly higher engagement than asking for comments. It’s the lowest-friction signal you can ask a reader for.

Default reactions

Out of the box:

Slot	Default	Recommended uses
1	😊 Happy	Feel-good news, positive stories
2	😐 Unmoved	Mundane news, “interesting but…“
3	🙂 Amused	Humor, lifestyle
4	🤩 Excited	Big launches, sports wins
5	😡 Angry	Politics, controversy
6	😢 Sad	Tragedy, loss

Every image and label can be replaced — see customize emote images.

Enable the widget

JavaScript

<div id="vuukle-emote"></div>

Plus the install script.

WordPress

WordPress admin → Settings → Vuukle → Emote Widget settings → Show Emote at the end of each post → On.

For pixel-perfect placement, disable auto-insertion and drop <div id="vuukle-emote"></div> directly in your theme’s single.php.

Blogger

Add the shortcode [vuukle-emote] to your Vuukle HTML/JavaScript widget in Layout.

AMP

Use an <amp-iframe> pointing at cdn.vuukle.com/widgets/emotes.html — see Install on AMP.

Configuration

All emote options nest under emotes in VUUKLE_CONFIG:

<script>
  var VUUKLE_CONFIG = {
    apiKey: 'YOUR_PUBLIC_API_KEY',
    articleId: 'post-12345',
    emotes: {
      enabled: true,
      hideRecommendedArticles: false,      // Hide "Talk of the town" after selection
      size: undefined,                     // Icon size in px (default: auto)
      firstImg:  undefined, firstName:  'Happy',
      secondImg: undefined, secondName: 'Unmoved',
      thirdImg:  undefined, thirdName:  'Amused',
      fourthImg: undefined, fourthName: 'Excited',
      fifthImg:  undefined, fifthName:  'Angry',
      sixthImg:  undefined, sixthName:  'Sad',
      disable: [],                         // [3, 5] hides 3rd and 5th
      customText: {},                      // per-language label overrides
    },
  };
</script>

Option reference

Option	Type	Default	What it does
enabled	bool	true	Master toggle.
hideRecommendedArticles	bool	false	Hides the cross-article recommendation row that appears under the emote bar after selection.
size	number	auto	Icon size in pixels. Default scales to widget width.
firstImg … sixthImg	string	undefined	Replace the default emote image. PNG or SVG URL. Square recommended (≥80×80).
firstName … sixthName	string	varies	Label shown under the emote.
disable	number[]	[]	Array of slot indexes (1-based) to hide. [3, 5] removes “Amused” and “Angry”.
customText	object	{}	Per-string overrides for translations.

Common patterns

Replace all six emotes

emotes: {
  firstImg:  'https://cdn.example.com/emotes/love.png',     firstName:  'Love',
  secondImg: 'https://cdn.example.com/emotes/wow.png',      secondName: 'Wow',
  thirdImg:  'https://cdn.example.com/emotes/haha.png',     thirdName:  'Haha',
  fourthImg: 'https://cdn.example.com/emotes/insightful.png', fourthName: 'Insightful',
  fifthImg:  'https://cdn.example.com/emotes/angry.png',    fifthName:  'Angry',
  sixthImg:  'https://cdn.example.com/emotes/sad.png',      sixthName:  'Sad',
}

For best results, host the images on your own CDN with long cache headers. PNG 96×96 is the recommended size.

Show only three reactions

emotes: {
  disable: [4, 5, 6],   // hides slots 4, 5, 6
}

Useful for lifestyle content where harsh reactions (“Angry”, “Sad”) aren’t appropriate.

Translate the labels

emotes: {
  firstName:  'Heureux',    // French
  secondName: 'Indifférent',
  thirdName:  'Amusé',
  fourthName: 'Excité',
  fifthName:  'En colère',
  sixthName:  'Triste',
}

For deeper translations (every visible string), see Language & transliteration.

Compact emote row

emotes: {
  size: 48,   // smaller icons
}

Combined with placing the widget at the top of the article (next to the share bar) makes a nice “react before reading” pattern.

Customize via the dashboard (no code)

Replace emote images and labels without code:

1. Vuukle dashboard → your site → Site Settings → Emote settings.
2. For each emote slot, upload an image and edit the label.
3. Save. Changes propagate within a minute.

This is the right place for site-wide defaults — use VUUKLE_CONFIG for per-article overrides.

See customize emote images for the visual walkthrough.

Analytics

Reactions show up in two places in the dashboard:

• Analytics → Top articles — reactions column shows total reactions per article.
• Analytics → Top commenters — surfaces high-engagement readers (a reaction counts as engagement).

For per-article reaction breakdowns (which emote got picked most), click into an article from Analytics → Top articles.

Related

Customize emote images

Step-by-step image replacement via the dashboard. Customize emotes →

ShareBar widget

The Emote button is also embedded in the share bar. ShareBar →

General settings

Article metadata, theme, language. General settings →

Comments widget

Often paired with Emotes. Comments →