{"componentChunkName":"component---src-templates-blog-post-js","path":"/how-to-embed-vuukle-on-endless-pages/","result":{"data":{"site":{"siteMetadata":{"title":"Vuukle Docs","author":"Vuukle"}},"markdownRemark":{"id":"2898d602-c9e6-55f0-8fa7-00ee75f15267","html":"

Infinite Scrolling provides a seamless experience by automatically loading in new content as the user scroll down the page. Research findings consider it to be a superior implementation in comparison to pagination because it allows the user to view much more content smoothly and without the need for unnecessary and redundant interactions in form of loading in new content. Vuukle provides a solution for integrating with your Infinite Scrolling implementation so that it is possible to load multiple instances of Vuukle comments and Emotes widget on a single page.

\n

How to integrate Vuukle with your Infinite Scrolling implementation

\n

The following steps would help you integrating Vuukle with your Infinite Scrolling implementation –

\n

1. Add the following code in each of your stories. This is used for rendering the Vuukle Comments and Emotes widgets. Make sure to add unique identifiers across stories (in the form of id attribute) to the Emotes and comment section.

\n
<div class=\"vuukle-powerbar-{UNIQUE ARTICLE INDEX}\"></div>\n<div id=\"vuukle-emote-{UNIQUE ARTICLE INDEX}\"></div>\n<div id=\"vuukle-comments-{UNIQUE ARTICLE INDEX}\"></div>
\n

Note: The Vuukle widgets are rendered in the div by unique index, more about that in Step 3

\n

2. Now include the JavaScript code for rendering Vuukle on the page –

\n
<script>\n  var VUUKLE_CONFIG = {\n    host: 'Your Host',\n    apiKey: 'Your API key',\n    language: 'en',\n    endlessMode: true,\n  };\n</script>\n<script type=\"text/javascript\" src=\"https://cdn.vuukle.com/platform.js\"></script>
\n

3. Lastly, to render the Vuukle Emotes, Comment widget and powerbar on stories loaded by the Infinite Scrolling implementation, add the following JavaScript code into the articles

\n
<script>\n  window.newVuukleWidgets({\n      elementsIndex: 'UNIQUE INDEX',\n      articleId: Unique article ID,\n      img: 'Article image',\n      title: 'Article title',\n      tags: 'tag1, tag2',\n      url: 'Article URL'\n  });\n</script>
\n

Note: Unique index in <script> should be the same for the corresponding <div> element for the widget.

\n

​

","frontmatter":{"title":"How to install Vuukle 2.0 platform on infinite scroll pages","date":"August 22, 2017","category":"Install Vuukle","tags":["javascript","installation","Infinite scroll"],"shortDescription":"How to integrate Vuukle with your Infinite Scrolling implementation"}}},"pageContext":{"id":"2898d602-c9e6-55f0-8fa7-00ee75f15267"}}}