Add Comments to Ionos Sites

With FastComments, you can easily add live commenting to any site built with Ionos.

This tutorial requires a FastComments account. We recommend signing up first, then returning here. You can create an account here.

Step 1: Add a Contact Form

First, we're going to add a contact form that FastComments will replace.

To do this, open the site editor, and click Add Section on the desired page.

Then, go to Content -> Contact -> Contact Form on the left, as shown:

Add Contact Form

Next, we need to tell FastComments to replace our form. Click on the default form title:

Set Form Title

We'll set the title to FastComments Goes Here. It's very important that the casing and spacing match exactly; otherwise it won't work, so we recommend you copy and paste this text.

When done, it should appear as follows:

Done Setting Title

That's the end of step one!

Step 2: Add FastComments.com Code

Next we're going to add the FastComments widget code to your site. This code will search for all forms with the title FastComments Goes Here and replace it with FastComments.

So let's go to Settings in the bottom left of the site editor:

Open Settings

Open the Custom Head Code section:

Open Custom Head Code

For Ionos we need a special version of the FastComments widget code. Code snippets from other tutorials will not work.

Now copy the following code:

Ionos FastComments Snippet

Copy

<script src="https://cdn.fastcomments.com/js/embed-v2.min.js"></script>
<script>
    (function () {
        let loaded = false;
        let interval = null;
        function attemptLoad() {
            const nodes = document.querySelectorAll('h2');
            nodes.forEach(function (node) {
                if (node.innerText && node.innerText.trim() === 'FastComments Goes Here') {
                    // we get the element that is not full width
                    const target = node.parentNode.parentNode.parentNode.parentNode.parentNode;
                    target.innerHTML = '';
                    FastCommentsUI(target, {
                        tenantId: "demo"
                    });
                    interval && clearInterval(interval);
                    loaded = true;
                }
            });
        }
        attemptLoad();
        if (!loaded) {
            interval = setInterval(attemptLoad, 300);
        }
    })();
</script>