Skip to content

Quickstart — install Vuukle in 5 minutes

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.

What you’ll need

  • A free Vuukle account (sign up here if you don’t have one).
  • Your public API key — from Integration → API Key in the dashboard.
  • Access to your site’s article template (or any HTML page you control).

The five-minute install

  1. Copy your API key from the Vuukle dashboardIntegration. 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.

  2. Paste the install snippet anywhere in your article template — right before </body> is the conventional spot:

    Article template
    <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.
  3. 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.

  4. Reload the article. Widgets render automatically — no further setup required. First-paint adds ~80KB of async script, no blocking.

  5. 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.

What about article metadata?

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.

On WordPress? Just install the plugin

If your site is WordPress, do this instead — it takes 30 seconds:

  1. WordPress admin → Plugins → Add New → search Vuukle.
  2. Click Install Now on Free Comments For WordPress – Vuukle.
  3. Click Activate.
  4. Open Settings → Vuukle and paste your API key.

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.

Other install paths

Install on Blogger — template-level patches with [vuukle-*] shortcodes.

What to do next

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 →

Track engagement

Top articles, top commenters, traffic sources. Analytics →

Troubleshooting

Widgets aren’t rendering on the page. Open DevTools → Console. The most common causes:

  1. platform.js blocked — ad blocker, corporate proxy, or CSP. Whitelist cdn.vuukle.com.
  2. apiKey wrong — confirm it matches Integration → API Key exactly. No quotes, no whitespace.
  3. articleId empty — your templating engine didn’t substitute the value. Hard-code one temporarily to confirm.
  4. Widget anchors missing — make sure the <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.

Was this page helpful?
Help us improve — drop a note or open the dashboard.