Guides

Getting Started

Suggest Edits

Welcome to Viafoura! Our digital experience platform is designed to help you activate your audience, grow registrations and retention, and leverage first-party data to create targeted content and revenue strategies.

The documentation you’ll find in this hub provides all the information you need to implement our solutions.

Ready to get started?

🚧

Note

An example implementation of all Viafoura components can be viewed on our DEMO SITE

This document is intended for Viafoura customers and requires your domains to be allow-listed on our platform. Please contact [email protected] to have your domains activated.

Testing on local host is not supported, you must publish changes on a domain that we have provisioned for you.

Step 1: Load the Viafoura JavaScript

The first thing you need to do is to integrate our script into the pages of your site, which is done by pointing to the javascript hosted on our CDN. We recommend including the below code near the end of your body tag. Please ensure a doctype tag is present at the top of the page or else widgets will not be rendered correctly.

<!DOCTYPE html>
<html>
<body>
...
<script type="text/javascript" async src="//cdn.viafoura.net/entry/index.js"></script>
</body>
</html>

📘

Recommendation

To ensure that your audience engagement data is correct and complete, we highly recommend loading the Viafoura javascript on every page of your site. This script implements lazy loading automatically so deferred loading of the script is not required.

🚧

Note

We currently support port 80 for HTTP, and 443 for HTTPS. Please ensure your site is accessible from one of these two ports before installing Viafoura. All API requests are made over HTTPS to limit the potential security risks involved with unencrypted sessions.

Please do not copy our javascript file to host on your domain, as the script must load from https://cdn.viafoura.net/entry/index.js.

This script is our "entry point" which will scan the DOM and determine what Viafoura components you have on the page. It will make a couple of small requests, and set the page up with IntersectionObserver listeners that will load more scripts and stylesheets as Viafoura components appear on the page.

Step 2: Install a Viafoura component on the page

Place the code below wherever you want it to be placed on your page. It is recommended to wrap all Viafoura tags within their own

tags. (do not stack tags within the same div)

Example: Viafoura Conversations component with a [container-id].(https://documentation.viafoura.com/docs/container-ids).
The conversations tool allows users to comment on a page.

<div class="viafoura">
  <vf-conversations vf-container-id="your-unique-container-id"></vf-conversations>
</div>

See detailed conversations implementation instructions

📘

Server Side Rendering

If using server side rendering the Viafoura components should not be hydrated.

Step 3: Refresh browser

Refresh the page and you should see the tools you have implemented on the page. For example, if you have placed the conversations tool on the page you should see the following:

🚧

Note

Our browser support is based on a rolling relative version support system (with exceptions) that is updated each build and automatically ensures backwards compatibility based on a rule set listed below.

  • Chromium based browsers (Chrome, MS Edge): last 5 versions
  • Firefox: last 5 version
  • Apple Safari: last 5 versions

We try to ensure that these are functionally consistent across browsers

*MS Internet Explorer 11 support has been deprecated and is no longer supported.

Updated 3 months ago