Install Vuukle with JavaScript

The JavaScript install is the universal way to add Vuukle to any website. It works on every CMS, every custom stack, every static-site generator. If you can paste a <script> tag into your article template, you can run Vuukle.

If you’re on a platform with a dedicated guide (WordPress, Blogger, Squarespace, GTM, AMP, iOS, Android), use that instead — those pages take care of platform-specific quirks.

The install snippet

Paste this once per article template — usually right before </body>:

<script>
  var VUUKLE_CONFIG = {
    apiKey: 'YOUR_PUBLIC_API_KEY',
  };
</script>
<script src="https://cdn.vuukle.com/platform.js" async></script>

That’s the entire install. One value is required:

apiKey — your public key from Vuukle dashboard → Integration. The same key works for every article on the same site.

By default, Vuukle uses the page’s URL as the article identifier. If you want explicit control (recommended for production), pass articleId too — see article metadata below.

Wherever you want a widget to render, drop in its anchor <div>. The script swaps the contents of each div with the real widget after load.

<!-- Threaded comments -->
<div id="vuukle-comments"></div>

<!-- 6-emote reactions row -->
<div id="vuukle-emote"></div>

<!-- Article recommendations grid -->
<div id="vuukle-newsfeed"></div>

<!-- Horizontal social share bar -->
<div class="vuukle-sharebar"></div>

<!-- Vertical sticky social share bar -->
<div class="vuukle-sharebar-vertical"></div>

Include only the widgets you want. Each renders independently — there’s no “all or nothing.” A typical news article runs Comments + Emotes + ShareBar; a long-form blog often adds Newsfeed too.

The older anchor names vuukle-powerbar / vuukle-powerbar-vertical still work for backward-compat, but new sites should use vuukle-sharebar / vuukle-sharebar-vertical.

Article metadata (recommended)

Beyond the API key, pass article metadata so recommendations, shared-comment URLs, and OG previews work properly:

<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',
  };
</script>
<script src="https://cdn.vuukle.com/platform.js" async></script>

Field	Type	Required	Notes
`apiKey`	string	Yes	Public key. Format: UUID.
`articleId`	string \| number	Optional	Falls back to the page URL if omitted. Recommended for sites where URLs can change.
`title`	string	Recommended	Article headline. Used in shared comment URLs and OG previews.
`url`	string	Recommended	Canonical article URL with scheme.
`img`	string	Recommended	Hero image URL. Surfaces in recommendation cards and OG previews.
`tags`	string	Optional	Comma-separated. Improves recommendation matching.
`author`	string	Optional	Byline.

That’s the complete browser-side config. Per-site behaviour — theme/colors, dark mode, login methods, character limits, sort order, moderation thresholds, custom translations, and customised emotes — is now controlled from the Vuukle dashboard → Site Settings, not from VUUKLE_CONFIG. The browser snippet stays focused on per-article metadata, which is the only thing the browser actually knows.

Full example — everything in one page

<!DOCTYPE html>
<html lang="en">
<head>
  <title>How to grow a tomato in winter</title>
  <!-- ... your head ... -->
</head>
<body>
  <article>
    <h1>How to grow a tomato in winter</h1>
    <div class="vuukle-sharebar"></div>  <!-- share bar at the top -->

    <p>Your article content...</p>

    <!-- Reactions just before the comment thread -->
    <div id="vuukle-emote"></div>

    <!-- Threaded comments -->
    <div id="vuukle-comments"></div>

    <!-- Newsfeed at the very bottom -->
    <div id="vuukle-newsfeed"></div>
  </article>

  <!-- Vuukle bootstrap -->
  <script>
    var VUUKLE_CONFIG = {
      apiKey: 'c7368a34-dac3-4f39-9b7c-b8ac2a2da575',
      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',
    };
  </script>
  <script src="https://cdn.vuukle.com/platform.js" async></script>
</body>
</html>

Common gotchas

Conditional rendering — only some pages

If you only want Vuukle on article pages (not your home page, category pages, etc.), wrap the install snippet in a template conditional. Examples:

<?php if (is_singular('post')) : ?>
  <script>
    var VUUKLE_CONFIG = {
      apiKey: 'YOUR_PUBLIC_API_KEY',
      articleId: '<?php the_ID(); ?>',
      title: '<?php echo esc_js(get_the_title()); ?>',
      url: '<?php echo esc_url(get_permalink()); ?>',
    };
  </script>
  <script src="https://cdn.vuukle.com/platform.js" async></script>
<?php endif; ?>

Or just install the WordPress plugin — it handles this for you.

{% if page.type == 'article' %}
  <script>
    var VUUKLE_CONFIG = {
      apiKey: 'YOUR_PUBLIC_API_KEY',
      articleId: '{{ post.id }}',
      title: '{{ post.title | escape }}',
      url: '{{ post.url }}',
    };
  </script>
  <script src="https://cdn.vuukle.com/platform.js" async></script>
{% endif %}

import { useEffect } from 'react';

export default function BlogPost({ post }) {
  useEffect(() => {
    window.VUUKLE_CONFIG = {
      apiKey: 'YOUR_PUBLIC_API_KEY',
      articleId: post.id,
      title: post.title,
      url: window.location.href,
      img: post.coverImage,
    };
    const s = document.createElement('script');
    s.async = true;
    s.src = 'https://cdn.vuukle.com/platform.js';
    document.body.appendChild(s);
    return () => s.remove();
  }, [post.id]);

  return (
    <article>
      <h1>{post.title}</h1>
      {/* ... */}
      <div id="vuukle-comments" />
      <div id="vuukle-emote" />
    </article>
  );
}

For SPAs that change routes without a hard reload, see endless mode — re-initializing on route change.

Troubleshooting

Widgets don’t render. Open DevTools → Console:

A 404 on cdn.vuukle.com/platform.js → your CSP or ad blocker is stripping it. Whitelist cdn.vuukle.com.
Error like “Invalid API key” → your key isn’t right. Re-copy from Integration.
No errors but nothing renders → check the rendered HTML has the <div> anchors (View Source — not just the template).

Widget renders empty. Your templating engine didn’t substitute articleId. Open DevTools → Elements, find your Vuukle config object, confirm articleId is a real value, not {{post.id}} literal.

Comments don’t appear after posting. Default is auto-publish. If you turned moderation to “Approve before publish,” every comment lands in the queue. Check Moderation → Pending in your dashboard.

Old comments disappeared after I changed URLs. The articleId changed too. Email support@vuukle.com with old → new mappings and we can re-key the data.

What to do next

Customize the widgets

Every option for every widget. General settings →

Bypass the Vuukle login

Use your own user system via signed SSO tokens. SSO overview →

Multi-article pages

Infinite scroll, swipe stories, AJAX next-article. Endless mode →

GTM deployment

Deploy via Google Tag Manager instead. GTM install →

Was this page helpful?

Help us improve — drop a note or open the dashboard.

Suggest an edit ↗ Email support Open dashboard ↗