Install Vuukle on infinite scroll pages

If your site loads multiple articles on the same page — infinite scroll, swipe stories, AJAX next-post — the standard install will only initialise the first article. Use the endless mode integration below to render Vuukle widgets per dynamically-loaded article.

How it works

You give each article a unique index. Vuukle keys widget instances to that index, so multiple articles can co-exist on a page without colliding.

Step 1 — per-article markup

For each article you render, include the widget anchor divs with a unique index suffix:

<div class="vuukle-powerbar-{UNIQUE_INDEX}"></div>
<div id="vuukle-emote-{UNIQUE_INDEX}"></div>
<div id="vuukle-comments-{UNIQUE_INDEX}"></div>

Use anything stable as the index — your CMS post ID, the article slug, a UUID.

Step 2 — bootstrap once per page

Put this once in your page template:

<script>
  var VUUKLE_CONFIG = {
    host: 'YOUR_HOST',           // e.g. 'example.com'
    apiKey: 'YOUR_API_KEY',
    language: 'en',
    endlessMode: true,
  };
</script>
<script type="text/javascript" src="https://cdn.vuukle.com/platform.js"></script>

Step 3 — render each article

When a new article is appended to the page, call newVuukleWidgets with the same index you used in step 1:

<script>
  window.newVuukleWidgets({
    elementsIndex: 'UNIQUE_INDEX',
    articleId: 'UNIQUE_ARTICLE_ID',
    img: 'https://example.com/img/article.jpg',
    title: 'Article title',
    tags: 'tag1, tag2',
    url: 'https://example.com/article/slug'
  });
</script>

Indexes must match

The elementsIndex you pass to newVuukleWidgets() must be the same as the -{UNIQUE_INDEX} suffix on your div anchors, otherwise nothing will render.

Related

• JavaScript install (single article)
• General settings (VUUKLE_CONFIG)