Integration with your Content

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

Through natively-integrated cloud solutions, Viafoura helps media companies create and foster a direct relationship with their audience. Our solutions work seamlessly with existing tools, while powering new and innovative capabilities directly on our clients’ own websites and applications. Integration is simple to setup, as Viafoura uses Container IDs to maintain unique instances of our tools across your site(s).

Introduction to Container IDs

Viafoura uses Container IDs in order to logically organize content. Put
plainly, Container IDs are the mechanism you will use to tie our engagement
tools to your content, such as a community chat attached to a sports page, or a live
conversation thread attached to a news article.

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 for the Viafoura engagement tools.

You can define your container ID in two places in your HTML page. This can be
done server side, or client side by a JavaScript application, as long as the
values are set before the Viafoura JavaScript code initializes.

Article level container ID

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

HTML

<!DOCTYPE html>
    <html>
        <head>
            <title>Article Title</title>
            <meta name="og:url" content="https://domain.com/article/canonical-url.html" />
            <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 automatically apply to all widgets that are loaded on that page, and the
page meta data is nicely grouped together.

Widget level container ID

Define your container ID directly in the widget embed code:

HTML

<vf-livestory vf-container-id="unique-article-id"></vf-livestory>

This has the advantage of finer grained control. However, if you have multiple
widgets included in the HTML page, you will need to specify the container ID for
each of the individual widgets.

Precedence

Similarly to CSS, we follow a simple order of precedence for the container ID
definitions. The more specific you get, the higher the precedence. So the widget
level container ID will override any previously set container ID in the
<head>.

Containers and Engagement Tools

A container ID can have multiple different engagement tools associated with it.
For example, you may have create a container ID such as
unique-article-about-politics. You can use this container ID to create any of
our widgets, so you may have a combination of our live stories, and community chat on the same article with the same container ID.

Page Metadata

Viafoura will track a minimal set of metadata about each article to provide end
users with direct links when they get notified, and to provide useful analytics. The article metadata we track includes: URL, title, og:url,
og:image, and other proprietary meta properties, such as: vf:topic, vf:author.

HTML

<meta name="og:image" content="http://www.example.com/header_image.jpg"/>
<meta name="og:image:alt" content="This is a textual description of the content of the image."/>

Meta Tag

Description

og:url

Optional: falls back to page URL

This will be 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

This will be used to designate the page title which we will display to users when referencing the page.

og:image

This will be 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

This will be used to provide an alternative textual image description for users with vision impairments. You are strongly encouraged to provide alt text if you also provide an image.

Updated 3 months ago