Guides

AMP Community Chats

This page will provide you a guide and example for the implementation of Viafoura Community Chats within your AMP pages.

Suggest Edits

Step 1: Host an HTTPS Page that Serves the Widget

To integrate Viafoura Live blog, you must host a non-AMP https page that serves the chat widget. The page must be on a different domain than the one that you will serve your AMP pages on. You will need to have this domain allowlisted with Viafoura, please contact us and ask for the domain to be allowlisted, along with the domain alias you wish to use for your AMP pages.

📘

Note

We recommend that you host this page on your regular domain and host your AMP pages on https://amp.[domain].com

Example AMP Viafoura Live blog page with tray:
https://amp.[domain].com/viafoura-amp-chat-widget.html

<!doctype html>
<html lang="en">
    <head></head>
    <body>
        <div class="viafoura" style="height: 550px;">
			<vf-livechat></vf-livechat>
		</div>
        <div class="viafoura">
            <vf-tray class="vf-amp-tray vf-tray--modal-override"></vf-tray>
        </div>
        <script>
            var queryString = window.location.search.substring(1);
            const getQueryStringParam = function(key) {
                return decodeURIComponent((queryString.match(new RegExp(key + '=([^&]*)'))|| [])[1] || '');
            }
            const setMetaTag = function(property, content) {
                const metaTag = document.createElement('meta');
                metaTag.setAttribute('property', property);
                metaTag.setAttribute('content', content);
                head.appendChild(metaTag);
            }

            const title = getQueryStringParam('title');
            const container = getQueryStringParam('container');

            // Set the title and container id meta tags on the head
            var head = document.head;

            if (title) {
                setMetaTag('vf:title', title);
            }
            if (container) {
                setMetaTag('vf:container_id', container);
            }

            // inject vf js so we can guarantee the meta tags are set before viafoura runs
            var vfjs = document.createElement('script');
            vfjs.setAttribute('type', 'text/javascript');
            vfjs.setAttribute('async', true);
            vfjs.setAttribute('src', 'options.js');
            document.getElementsByTagName('script')[0].insertBefore(vfjs, null);
            // Listen for commenting resize events and then bubble that event up that event to the amp-iframe to resize it
            // And throttle the resize since comments rerender and resize themselves frequently
            window.vfQ = window.vfQ || [];
            var locked = false;
        </script>
    </body>
</html>

🚧

The page that serves the widget must include the user authentication workflow

In order for users to be able to engage with Viafoura's widget, they will be required to be authenticated. Therefore the HTML page that is loading the widget must have all the necessary items to allow users to login or signup. Make sure to review the authentication integration details and enable authentication in your page.

🚧

The page that serves the widget must include the corresponding page metatags

To ensure consistency across page analytics, moderation settings, and tools that retrieve and display page details (like the Trending Articles widget), the https page that serves the conversations widget for the AMP page must also include the Viafoura required metatags, displaying the same value of the corresponding article page.

Step 2: Create an AMP page that points to the page created in Step 1

Place the amp-iframe on the page pointing to the AMP Community Chat page above. The Viafoura AMP chat widget will parse the query string of the url to load the posts from that page.

Example AMP-iFrame:
Replace [yourContainerId] with the containerId of the page you would like to display the thread for.

<!DOCTYPE html>
<html amp lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <script async src="https://cdn.ampproject.org/v0.js"></script>
        <script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
        <style amp-boilerplate>
            body {
                -webkit-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
                -moz-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
                -ms-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
                animation: -amp-start 8s steps(1, end) 0s 1 normal both;
            }
            @-webkit-keyframes -amp-start {
                from {
                    visibility: hidden;
                }
                to {
                    visibility: visible;
                }
            }
            @-moz-keyframes -amp-start {
                from {
                    visibility: hidden;
                }
                to {
                    visibility: visible;
                }
            }
            @-ms-keyframes -amp-start {
                from {
                    visibility: hidden;
                }
                to {
                    visibility: visible;
                }
            }
            @-o-keyframes -amp-start {
                from {
                    visibility: hidden;
                }
                to {
                    visibility: visible;
                }
            }
            @keyframes -amp-start {
                from {
                    visibility: hidden;
                }
                to {
                    visibility: visible;
                }
            }
        </style>
        <noscript>
            <style amp-boilerplate>
                body {
                    -webkit-animation: none;
                    -moz-animation: none;
                    -ms-animation: none;
                    animation: none;
                }
            </style>
        </noscript>
    </head>
    <body>
        <amp-iframe
            width="600" 
            height="400" 
            layout="responsive"
            sandbox="allow-scripts allow-same-origin allow-modals allow-popups allow-forms" 
            resizable
            src="https://amp.[domain].com/viafoura-amp-chat-widget.html?containerId=[yourContainerId]&isAmpPage=true"
        >
            <div overflow placeholder></div>
        </amp-iframe>
    </body>
</html>

Updated about 3 years ago