Customize the widgets
Theme, login methods, character limits — see General settings for every option.
This is the fastest path from “I just signed up” to “Vuukle is live on my site.” If you’re on WordPress, you can do it in two clicks — skip to the WordPress plugin guide. Everyone else, read on.
Copy your API key from the Vuukle dashboard → Integration. It looks like c7368a34-dac3-4f39-9b7c-b8ac2a2da575. This is the public key — safe to expose in client-side code. The secret key (also on that page) is only for backend SSO signing.
Paste the install snippet anywhere in your article template — right before </body> is the conventional spot:
<script> var VUUKLE_CONFIG = { apiKey: 'YOUR_PUBLIC_API_KEY', articleId: 'UNIQUE_ARTICLE_ID', }; // ⛔ DON'T EDIT BELOW THIS LINE (function () { var d = document, s = d.createElement('script'); s.async = true; s.src = 'https://cdn.vuukle.com/platform.js'; (d.head || d.body).appendChild(s); })();</script>Two values change per article:
apiKey — paste the public key from step 1. The same key works for every article on the same site.articleId — a unique identifier for the article. Must be stable across page loads. Use your CMS post ID ({{post.id}}, <?php the_ID(); ?>, etc.). Don’t use URLs that change — slugs, dates in URLs, query strings.Add the widget anchors. Wherever you want a Vuukle widget to render, drop in the corresponding <div>:
<div id="vuukle-comments"></div> <!-- Threaded comments --><div id="vuukle-emote"></div> <!-- 6 reactions --><div id="vuukle-newsfeed"></div> <!-- Article recommendations --><div class="vuukle-powerbar"></div> <!-- Social share bar -->Include only what you want. Each one renders independently.
Reload the article. Widgets render automatically — no further setup required. First-paint adds ~80KB of async script, no blocking.
Test the dashboard. Refresh dash.vuukle.com — the article you just loaded appears under Analytics → Articles. Post a test comment from the live page; it should show up in Moderation within seconds.
The apiKey + articleId install is enough to render every widget. For a richer integration — better recommendations, better OG previews on shared comments — add article metadata:
<script> var VUUKLE_CONFIG = { apiKey: 'YOUR_PUBLIC_API_KEY', articleId: 'post-12345', title: 'How to grow a tomato in winter', url: 'https://example.com/blog/grow-tomato-winter', img: 'https://example.com/img/tomato.jpg', tags: 'gardening, tomato, winter', author: 'Jane Doe', }; (function () { var d = document, s = d.createElement('script'); s.async = true; s.src = 'https://cdn.vuukle.com/platform.js'; (d.head || d.body).appendChild(s); })();</script>For the complete options reference — theme, login methods, character limits, custom translations, moderation thresholds — see VUUKLE_CONFIG and general widget settings.
If your site is WordPress, do this instead — it takes 30 seconds:
Visit any post — comments, emotes, share bar, and newsletter are all live. The plugin handles articleId automatically using the WP post ID. See the WordPress install guide for plugin options.
[vuukle-*] shortcodes. Customize the widgets
Theme, login methods, character limits — see General settings for every option.
Enable Single Sign-On
Skip the Vuukle login and use your own user system. SSO overview →
Moderate the conversation
Set toxicity / spam thresholds, ban words, add moderators. Moderation overview →
Track engagement
Top articles, top commenters, traffic sources. Analytics →
Widgets aren’t rendering on the page. Open DevTools → Console. The most common causes:
platform.js blocked — ad blocker, corporate proxy, or CSP. Whitelist cdn.vuukle.com.apiKey wrong — confirm it matches Integration → API Key exactly. No quotes, no whitespace.articleId empty — your templating engine didn’t substitute the value. Hard-code one temporarily to confirm.<div id="vuukle-comments"></div> is actually in the rendered HTML, not just the template.Comments post but don’t appear. Default is auto-publish, but if you set moderation to “Approve before publish,” every new comment lands in the queue. Check Moderation in your dashboard.
Widget renders empty. The articleId is rendering as the literal placeholder string instead of being substituted. Check your template engine.
Still stuck? Email support@vuukle.com with your site URL — we usually reply within a few hours.