Add Live Commenting to Bubble.io Sites

What This Guide Covers

This guide covers setting up live commenting with FastComments on Bubble.io.

1. Add HTML Block

First, navigate to the page/layout where you want to add FastComments. In the Bubble editor, drag and drop an HTML element from the Visual Elements sidebar onto your page.

Add HTML Element

The HTML element will allow us to embed the FastComments widget directly into your Bubble app.

2. Insert Code

Click on the HTML element you just added. In the property editor that appears, paste the following code into the HTML field:

Bubble.io Live Commenting Code Snippet

Copy

<script src="https://cdn.fastcomments.com/js/embed-v2.min.js"></script>
<div id="fastcomments-widget" style="width: 100%;height: 100%;"></div>
<script>
    (function fcLoad() {
        function tryLoad() {
            // bubble tends to change the code snippet to be async
            const container = document.getElementById('fastcomments-widget');
            if (!container) {
                return waitRetry();
            }
            if (!window.FastCommentsUI) {
                return waitRetry();
            }
            if (container.fastCommentsSetup) {
                return;
            }
            window.FastCommentsUI(container, {
                tenantId: 'demo',
                pageTitle: top.document.title,
                url: top.location.href,
                urlId: top.location.pathname
            });
            container.fastCommentsSetup = true;
        }
        function waitRetry() {
            setTimeout(tryLoad, 500);
        }
        tryLoad();
    })();
</script>

Insert FastComments Code

Inserting FastComments Code into HTML Element

Note: This code includes a retry mechanism to ensure FastComments loads properly in Bubble's dynamic environment. Other code snippets will not work.

Remember to replace 'demo' with your actual FastComments tenant ID after signing up. If you're logged in to FastComments.com, it should already be replaced.

3. Find Width Setting

To ensure the comment widget displays properly, we need to adjust the HTML element's width. Look for the Layout tab in the element's property editor.

Find Width Setting

The Layout tab contains important sizing options that will help our comment widget display correctly across different screen sizes.

4. Adjust Layout

In the Layout tab, set the width to 100%. This ensures the comment widget takes up the full width of its container and responds properly to different screen sizes.

Set Width to 100%

After changing the input value to 100 (or the desired percentage) you'll have to click the dropdown next to the number to change it from pixels to percentage.

Also, set a minimum height (e.g., 400px) to ensure the comment widget has enough space to display properly.

After making these changes, click the Preview button to see your FastComments widget in action!

Success

Nice work! You've added live commenting to your Bubble.io site.

If you've run into a permission denied error, or would like to customize FastComments, read on.

Customization

FastComments is designed to be customized to match your site.

If you'd like to add custom styling, or tweak configuration, Checkout our Customization Documentation to learn how.

Domain Errors

You may get an authorization error, like the following:

Domain Configuration Missing

This is because FastComments doesn't know it's supposed to allow your account to be used on this domain.

In this case, the fix is simple. You just have to add your site to your FastComments.com account.

Go here to add your site to your account.

Installation

undefined