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',
    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 are required:

apiKey — your public key from Vuukle dashboard → Integration. The same key works for every article on the same site.
articleId — a unique, stable identifier per article. Typically your CMS post ID. Must not change across page loads — if it does, comments and reactions disappear from that page.

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-powerbar"></div>

<!-- Vertical sticky social share bar -->
<div class="vuukle-powerbar-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.

Article metadata (recommended)

Beyond the two required fields, 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',
  };
  (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>

Field	Type	Required	Notes
`apiKey`	string	Yes	Public key. Format: UUID.
`articleId`	string \| number	Yes	Immutable per article. Use CMS post ID.
`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.

For the full schema — theme, login methods, character limits, custom emotes, translations, moderation thresholds — see VUUKLE_CONFIG and General widget settings.

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-powerbar"></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',
      theme: { color: '#FACC2B', darkMode: false },
      comments: {
        maxChars: 1000,
        countToLoad: 10,
        sorting: 'latest',
      },
    };
    (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>
</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()); ?>',
    };
    (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>
<?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 }}',
    };
    (function () { /* ... */ })();
  </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.

Email support Open dashboard ↗ Suggest an edit ↗