Content Association

Container IDs

Viafoura uses Container IDs to logically organize content and 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 and not have any empty characters
Container IDs must be between 1 and 200 characters long and not have any empty characters (spaces). 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 tools. 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>

The advantage of the Container ID set in the head of the page is that it will be used for all widgets loaded on that page.

🚧
If moving or recreating pages within your CMS with comments already on the page you will want to ensure the container id you used on the original page remains the same for the new page so comments are not lost.

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 loads different content. For example a page with live chats on different topics.

Note that this method of Container ID assignment will take precedence over the page level assignment, and Active Conversations in the Tray may include the article the user is currently on.

Once you have defined a Container ID, you can fetch its UUID using this API if you need it for direct API integration.

Meta tags

Viafoura tracks a set of meta tags for a 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. The specified url should belong to the same domain or any of the aliases defined for the given site. Otherwise, new content would be rejected as part of our security policy to protect our users.
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. If vf:url is not provided, then the specified url should belong to the same domain or any of the aliases defined for the given site. Otherwise, new content would be rejected as part of our security policy to protect our users.
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.
vf:lang	Optional: falls back to site setting. Use this tag to set the text language of the products installed on the page. Note that the automated moderation system does not follow this tag and is based on your site setting.