VUUKLE_CONFIG schema

VUUKLE_CONFIG is the global object every Vuukle widget reads from on page load. The schema is deliberately small — it carries the things only the browser knows (which article you’re on, what its title is, what its image is), plus an optional SSO hook.

Everything else — theme, login methods, character limits, sort order, moderation thresholds, emote images, custom translations — is configured from the Vuukle dashboard → Site Settings, not from this object. That separation means non-technical admins can change behaviour without redeploys, and all sites on the same account stay consistent.

Complete schema

interface VuukleConfig {
  // Required
  apiKey: string;

  // Article identity (optional — articleId falls back to page URL)
  articleId?: string | number;

  // Article metadata (strongly recommended)
  title?: string;
  url?:   string;
  img?:   string;
  tags?:  string;
  author?: string;

  // SSO — the one auth integration that has to be wired browser-side
  comments?: {
    auth?: {
      sso?: { onClick: () => void };
    };
  };
}

Required

Field	Type	Description
`apiKey`	string	Public API key from Integration → API Key in the dashboard. The same key works across every article on the same site.

Article identity & metadata

Field	Type	Description
`articleId`	string \| number	Optional. Stable per-article identifier. If omitted, Vuukle uses the page’s URL. Recommended for sites where URLs can change.
`title`	string	Article title. Used in shared comment URLs and Open Graph previews.
`url`	string	Canonical article URL with scheme.
`img`	string	Article hero image URL. Surfaces in recommendation cards and OG previews.
`tags`	string	Comma-separated tags. Improves recommendation matching.
`author`	string	Byline.

SSO (the only auth method wired browser-side)

Field	Description
`comments.auth.sso.onClick`	Function called when the visitor clicks “Sign in” in the comment widget. Open your own login modal here, then call `window.vuukleLogin(token)` with a signed SSO token once they’re authenticated.

All other login providers (Facebook, Google, Twitter, Disqus, email/password, Vuukle native) are toggled from Site Settings → Comment Widget → Login methods in the dashboard.

Drop the corresponding <div> wherever you want a widget to render:

HTML	Renders
`<div id="vuukle-comments"></div>`	Comments
`<div id="vuukle-emote"></div>`	Emotes
`<div id="vuukle-newsfeed"></div>`	Newsfeed
`<div class="vuukle-subscribe"></div>`	Newsletter subscribe
`<div class="vuukle-sharebar"></div>`	ShareBar (horizontal)
`<div class="vuukle-sharebar-vertical"></div>`	ShareBar (vertical sticky)
Any element with `data="vuukle-count"`	Live comment count

For endless / infinite-scroll mode, append -{UNIQUE_INDEX} to each anchor — see infinite scroll install.

What lives in the dashboard, not here

If you’re looking for a config option that used to be in VUUKLE_CONFIG, this is where it moved:

Old config key	Now configured in
`theme.color`, `theme.darkMode`	Site Settings → Comment Widget → Theme
`comments.maxChars`, `commentingClosed`, `countToLoad`, `sorting`	Site Settings → Comment Widget
`comments.auth.{facebook,google,twitter,disqus,password,vuukle}`	Site Settings → Comment Widget → Login methods
`comments.editorOptions`	Site Settings → Comment Widget → Editor
`comments.toxicityLimit`, `spamLimit`	Site Settings → Comment Widget → Moderation
`comments.customText`, `emotes.customText`, `powerbar.customText`	Translations are shipped centrally; missing strings → email support
`comments.transliteration`	Site Settings → Comment Widget → Transliteration
`emotes.firstImg`/`firstName` … `sixthImg`/`sixthName`	Site Settings → Emote settings
`emotes.disable`, `emotes.size`, `emotes.hideRecommendedArticles`	Site Settings → Emote settings
`powerbar.defaultEmote`, `powerbar.verticalPosition`	Site Settings → ShareBar Settings
`recommendationsWideImages`, `globalRecommendations`, `link`	Site Settings → Newsfeed
`language`	Auto-detected from `<html lang>` and `navigator.language`; site default in Site Settings → Comment Widget → Language
`wordpressSync`	Handled automatically by the WordPress plugin

Minimum install

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

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

That’s a complete working integration. articleId defaults to the page URL.

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

SSO token generation

Server-side signing in Node, Python, PHP. SSO token →

Widget shortcodes

All anchor markup in one place. Shortcodes →

JavaScript install

Walk through a fresh install. JS install →

Dashboard tour

What lives where in Site Settings. Dashboard →

Was this page helpful?

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

Suggest an edit ↗ Email support Open dashboard ↗