Conversations

Introduction

The Conversations tool provides your audience with the opportunity to become deeply engaged with your content, your organization, and each other. Using our industry-leading moderation system, the tool provides a civil environment for users to interact in real-time discussions while maintaining your brand image.

Installation

Step 1: Install the Viafoura JavaScript

The Viafoura Conversations component requires the Viafoura base JavaScript to be installed on the page where this component is to appear.

Step 2: Add the Conversations code to your page

Add the following code to the page where you want the Conversations component to appear.

If you are using article-level container ids, then you will not need to specify your container id in this code:

<div class="viafoura">
  <vf-conversations></vf-conversations>
</div>

If you are using widget-level container ids, then use this:

<div class="viafoura">
  <vf-conversations vf-container-id=“[ENTER UNIQUE ID]“></vf-conversations>
</div>

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 Container 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: `newest` `oldest` `num_likes_desc` `num_replies_desc`
featured-tab-active-threshold	Number	1	Defines the minimum number of "featured" comments that are needed to automatically load the "Featured Comments" tab as default.
initial-height	Number	null	Determines the initial widget height (in pixels). The component can increase if the user clicks on "View More Comments". 600px is the standard recommended height.

A typical CMS Example (your meta-tag interface may be different):

<meta name="vf:container_id" content="995" />

The Conversations widget will be activated once the code snippets have been embedded 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.

The On-site Notification Tray acts as a personalized newsfeed for users to view all of their notifications for 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 are all housed here.

To implement the On-site Notification Tray, simply add the Notification Bell on the page.

❗️
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.