Guides

AMP Conversations

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

Suggest Edits

Step 1: Host an HTTPS Page that Serves the Widget

To integrate Viafoura conversations, you must host a non AMP https page that serves the commenting 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 to enable commenting, 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 conversations page with tray:
https://amp.[domain].com/viafoura-amp-conversations.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
    </head>
    <body>
        <div class="viafoura">
            <vf-conversations amp-widget></vf-conversations>
        </div>
        <div class="viafoura">
            <vf-tray class="vf-amp-tray"></vf-tray>
        </div>
        <script>
            function getQueryStringParam(key) {
                const queryString = window.location.search.substring(1);
                return decodeURIComponent((queryString.match(new RegExp(key + "=([^&]*)")) || [])[1] || "");
            }

            function createMetaTag(property, content) {
                const metaTag = document.createElement("meta");
                metaTag.setAttribute("property", property);
                metaTag.setAttribute("content", content);
                document.head.appendChild(metaTag);
            }

            const containerId = getQueryStringParam("containerId");
            if (containerId) {
                createMetaTag("vf:container_id", containerId);
            }

            const path = getQueryStringParam("path");
            if (path) {
                createMetaTag("og:url", path);
            }

            function setViafouraJS() {
                const vfjs = document.createElement("script");
                vfjs.setAttribute("async", true);
                vfjs.setAttribute("src", "//cdn.viafoura.net/vf-v2.js");
                document.head.appendChild(vfjs);
            }
            setViafouraJS();

            window.vfQ = window.vfQ || [];
            window.vfQ.push(function() {
                var locked = false;
                vf.$subscribe("commenting", "resized", function() {
                    if (!locked) {
                        locked = true;
                        setTimeout(function() {
                            locked = false;
                            const conversationsHeight = document.querySelector(".vf3-comments").clientHeight;
                            const loadMoreCommentsHeight = 100;
                            const parentIframeHeight = conversationsHeight + loadMoreCommentsHeight;
                            window.parent.postMessage({
                                sentinel: "amp",
                                type: "embed-size",
                                height: parentIframeHeight
                            }, "*");
                        }, 50);
                    }
                });
            });
        </script>
    </body>
</html>

Note on Authentication

🚧

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.

Note on Metatags

🚧

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 the previous step

Place the amp-iframe on the page pointing to the AMP conversations page above. The Viafoura AMP conversations widget will parse the query string of the url to load the comments 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-conversations.html?containerId=[yourContainerId]&isAmpPage=true"
        >
            <div overflow placeholder></div>
        </amp-iframe>
    </body>
</html>

Next up, we shall look at an example of Live blog integration with AMP:

Updated almost 3 years ago

What’s Next