Viafoura

The Viafoura Documentation Hub

Welcome to the Viafoura documentation hub. You'll find comprehensive guides and documentation to help you start working with Viafoura as quickly as possible, as well as support if you get stuck. Let's jump right in!

Get Started    API Reference

Integration with your content

Using Container IDs and Meta tags to associate your content with our engagement tools.

Container IDs

Viafoura uses Container IDs in order to logically organize content. Container IDs are used to tie the engagement tools to your content.

Typically your CMS, or database will have a persistent unique identifier associated with each piece of content or article you publish. This can directly be used as the Container ID.

Container IDs can be assigned server side, or client side as long as values are set before the Viafoura JavaScript code initializes.

❗️

Container IDs must be between 1 and 200 characters long

Container IDs must be between 1 and 200 characters long. Because of this, we do not recommend using the article URL as container ID, even if its permanent and won't change in the future, since the URL might be longer than 200 characters.

A Container ID can be assigned to multiple engagement tool. For example, you can create a container ID such as unique-article-about-politics and use it to create any of our widgets (live stories, conversations or community chat).

The Container ID can be defined at two levels:

  • Article level
  • Widget level

Article level container ID

You can define your Container ID in the <head> of the article:

<!DOCTYPE html>
    <html>
        <head>
            <meta name="vf:container_id" content="unique-article-id" />
        </head>
        ...
    </html>

This has the advantage that the Container ID you set in the head of the page
will be used for all widgets that are loaded on that page.

Widget level Container ID

You can also set a Container ID directly in the widget embed code. Below is an example of that for the Conversations product.

<vf-conversations vf-container-id="unique-container-id"></vf-conversations>

This has the advantage of being able to include multiple containers on a single page that load different content. For example a page with live chats on different topics.

This method of Container ID assignment takes precedence over the page level assignment.

Meta tags

Viafoura tracks a set of meta tags for variety of functional and analytics purposes.
These are listed below:

Meta Tag

Description

vf:container_id

Required: can be overwriten at widget level with the vf-container-id parameter.

Used to tie the engagement widgets to your content.

vf:url

Optional: falls back to og:url

Used to generate links back to the page from our tools and will serve as the canonical URL for the page.

vf:image

Optional: falls back to og:image

This link is used to associate an image with the article. The image will be used across our products, namely, Trending Conversations - Carousel, browser push notifications and notifications in the feed. We recommend using images that are 210 pixels by 140 pixels for optimal performance.

vf:image:alt

Optional: falls back to og:image:alt

Used to provide an alternative textual image description for users with vision impairments. We recommend to provide alt text if you also provide an image.

og:url

Optional: falls back to page URL

Used to generate links back to the page from our tools and will serve as the canonical URL for the page.

og:title

Optional: falls back to page title tag

Used to designate the page title which we will display to users when referencing the page.

og:image

Used to determine the image thumbnail to display when referencing the page.

It should be a fully qualified URL of the image you want to associate with the page. We recommend that this image be served over HTTPS.

og:image:alt

Used to provide an alternative textual image description for users with vision impairments. We recommend to provide alt text if you also provide an image.

Updated 17 days ago



Integration with your content


Using Container IDs and Meta tags to associate your content with our engagement tools.

Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.