Community Chat

Introduction

The Viafoura Community Chat tool generates excitement and brings your community together for major events by creating dedicated chat windows. Implement real-time, civil and highly engaging social chat experiences on your sites and take full advantage of Viafoura's automated moderation to meet the high demands of the rapid-fire nature of Live Chat platforms — eliminate the power that internet trolls think they have when attempting to harass other users online. The Community Chat feature can fit anywhere on your site, and is easily displayed beside a live video stream, below an article or even in a dedicated window on-site when clicked on a hyperlink.

Installation

Step 1: Install the Viafoura JavaScript

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

Step 2: Add the Community Chat code to your page

Add the following code to the page where you want the Community Chat to appear.

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

<div id="livechat-wrapper" style="height: 550px;" class="viafoura">
 <vf-livechat></vf-livechat>
</div>

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

<div id="livechat-wrapper" style="height: 550px;" class="viafoura"> 
 <vf-livechat vf-container-id=“[ENTER UNIQUE ID]“></vf-livechat>
</div>

❗️

The height attribute ​is required

The height attribute ​is required ​and defines the overall height of the chat tool as it will appear on the page. The recommended height is between 400px to 800px, but you can set the height to your specific needs.

Step 3: Refresh browser

Once loaded you should see a Community Chat widget on the page like this:

Step 4: Implement the On-Site Notification Tray

The Viafoura Community Chat 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 acts as a personalized newsfeed for users to view 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 housed here.

❗️

The Notification Tray is Required for the User Experience

The Community Chat widget includes several call to actions and buttons, such as "login/signup", "post", "reply" and others that rely on the On-site Notification Tray to be implemented and available on the page.

Failing to implement the On-site Notification Tray will result in a broken user experience.

Step 5: Setting up and managing Community Chats

See our user guide to set up and manage Community Chats.