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).
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.
You can define your container ID in the <head> of the article:
<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.
Define your container ID directly in the widget embed code:
<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.
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>.
A container ID can have multiple different engagement tools associated with it.
For example, you may have create a container ID such asunique-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.
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.
<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."/>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.