Add Live Commenting to Framer Sites

With FastComments we can easily add live commenting to any site built with Framer.

In this tutorial we'll cover just installing the Live Commenting widget. If you require assistance installing other widgets, or setting up SSO, feel free to create a support ticket.

Step 1: Open Editor Internal Link

First, open the editor for your site.

In our example we'll be adding FastComments to our Blog pages, but any type of page should work.

Open Editor
Open Editor

Step 2: Add Embed Block Internal Link

Now, let's add an Embed block.

Go to Insert in the top left:

Click Insert
Click Insert

Then scroll the left hand sidebar down and mouse over Utility.

Next you'll want to click and drag the Utility block to the end of your blog.

It's important you click and drag as shown, and not just click it. If you just click it, then Framer will insert it outside of your blog and you'll have to drag it around later.

Locate Embed Widget
Locate Embed Widget
Drag and Drop Embed Widget
Drag and Drop Embed Widget

Now you'll have an empty Embed widget, and when you select it you'll get a sidebar on the right. You can expand the sidebar, and you'll see something like this:

Open Embed Settings
Open Embed Settings

Now let's change the Embed widget type to HTML:

Set as HTML Widget
Set as HTML Widget

Now you're ready for the FastComments Framer Code snippet in the next step.

Step 3: Copy and Paste Framer-Specific FastComments Code Internal Link

The Framer Live Comments FastComments snippet is below.

FastComments Framer-Specific Comments Snippet
Copy Copy
2<script src=""></script>
3<div id="fastcomments-widget" style="width: 100%;height: 100%;"></div>
5 (function fcLoad() {
6 function tryLoad() {
7 // some providers change the code snippet to be async
8 const container = document.getElementById('fastcomments-widget');
9 if (!container) {
10 return waitRetry();
11 }
12 if (!window.FastCommentsUI) {
13 return waitRetry();
14 }
15 if (container.fastCommentsSetup) {
16 return;
17 }
18 window.FastCommentsUI(container, {
19 tenantId: 'demo',
20 pageTitle: top.document.title,
21 urlId: top.location.pathname
22 });
23 container.fastCommentsSetup = true;
24 }
25 function waitRetry() {
26 setTimeout(tryLoad, 500);
27 }
28 tryLoad();
29 })();

Or, alternatively, you can use the Streaming Chat widget. The Framer Streaming Chat FastComments snippet is:

FastComments Framer-Specific Streaming Chat Snippet
Copy Copy
2<script src=""></script>
3<div id="fastcomments-live-chat-widget" style="width: 100%;height: 100%;"></div>
5 (function fcLoad() {
6 // Fill these in!
7 const PAGE_TITLE = "My Cool Page";
8 const PAGE_URL = "My Page URL";
10 function tryLoad() {
11 // some providers change the code snippet to be async
12 const container = document.getElementById('fastcomments-live-chat-widget');
13 if (!container) {
14 return waitRetry();
15 }
16 if (!window.FastCommentsLiveChat) {
17 return waitRetry();
18 }
19 if (container.fastCommentsSetup) {
20 return;
21 }
22 window.FastCommentsLiveChat(container, {
23 tenantId: 'demo',
24 pageTitle: PAGE_TITLE,
25 url: PAGE_URL,
26 urlId: PAGE_URL
27 });
28 container.fastCommentsSetup = true;
29 }
30 function waitRetry() {
31 setTimeout(tryLoad, 500);
32 }
33 tryLoad();
34 })();

FastComments supports the Framer editor, so you should see something like this once you paste the code in (you might have to click Publish):

Comment Widget Preview
Comment Widget Preview

Now when you view your site you should see the comment area! In the sidebar of Framer you can set the widget as full width as well, if desired.

Note that Framer limits the height of widgets and does not support auto-resizing, so we've chosen the Live Chat widget here since it is fixed height.

Step 4: Adjust Widget and Page Height Internal Link

We can improve the widget's positioning by doing two things.

First, on the left pane, set the widget's height to fill and 1fr:

Comment Widget Height
Comment Widget Height

Next we need to fix the default Framer page config. By default it sets the page height to a fixed size, which can cut off comment threads. So let's set this to fill, too.

Set Page Height
Set Page Height

You may have to play with the page height to get it how you want it.

Customization Internal Link

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.