Note
This version of our Conversations (version 3) tool is replacing the legacy Commenting tool
Introduction
The Conversations tool gives your audience a voice and a way to engage deeply with your content, your organization, and each other. We have designed this tool to facilitate real-time discussions. Using our industry-leading moderation system,
the tool provides a civil environment for users to interact while maintaining your brand image.
Installation
Step 1: Install the Viafoura JavaScript
The Viafoura Conversations tool requires the Viafoura base JavaScript to be installed on the page where the conversations are to appear.
<!DOCTYPE html>
<html>
<body>
...
<script type="text/javascript" async src="//cdn.viafoura.net/vf-v2.js"></script>
</body>
</html>
NOTE: it should be placed in the 'body' section.
Step 2: Install the Conversations Tool
Place the following code anywhere you would like a Conversations tool to appear on the page.
<div class="viafoura">
<vf-conversations></vf-conversations>
</div>
NOTE: it should be placed in the 'body' section.
Step 3: Define Custom Parameters
You can customize how the Conversations tool displays and renders comments within your page using the following parameters.
Name | Type(s) | Default | Notes |
|---|---|---|---|
vf-container-id (*required) | String | The container ID of the current commenting tool. It's recommended to implement the container ID as a metatag on the page. Please refer to our documentation on Container IDs for more details on the purpose and use of Contanier IDs. | |
limit | Number | 10 | Defines the number of comments that are initially loaded before paginating. Accepts: 1-100. |
pagination-limit | Number | 10 | Defines the number of comments that are loaded when the user clicks to load more comments. Accepts 1-100 |
reply-limit | Number | 2 | Defines the number of replies that are initially loaded for top-level comments. Accepts: 0-100. |
pagination-reply-limit | Number | 10 | Defines the number of replies that are loaded when the user clicks to load more replies. Accepts: 1-100 |
sort | String | newest | Defines the sort order for top-level comments (not including replies). Accepts one of: |
featured-tab-active-threshold | Number | 3 | Defines the minimum number of "featured" comments that are needed to automatically load the "Featured Comments" tab as default. |
first-promo-position | Number | 2 | This will define where the first ad positions can be inserted. Default is between the 2nd and 3rd comments. |
promo-interval | Number | 7 | This will determine how much space to place between ad positions. Default is that they will appear every 7 comments. |
initial-height | Number | null | This will determine the initial widget height (in pixels). The component can increase if the user clicks on "View More Comments". |
A typical CMS Example (your meta-tag interface may be different):
<meta name="vf:container_id" content="995" />
Having embedded the Viafoura code snippets above will activate the Conversations widget on the page it is intended to appear on.
Step 4: Implement the On-Site Notification Tray
The Viafoura Conversations tool requires that the On-Site Notification Tray is also implemented on the page, which can be done by simply adding the Notification Bell on the page.
The On-site Notification Tray is where a user can view their notifications. It acts as a personalized newsfeed for users to view all of the interactions the community has made with them. Replies to a user's comment, comment likes, new followers and push notifications pertaining to topics the user has followed will all be housed here.
The Notification Tray is Required for the User Experience
The Conversations widget includes several call to actions and buttons, such as "follow", "login/signup", "post", "reply" and others that rely on the Notification Tray to be implemented and available on the page.
Failing to implement the Notification Tray will result in a broken user experience.
Updated 3 months ago