Add Comments to Wix Sites

For this example, we're going to add FastComments Live Commenting to blog post pages.

To do this, we'll open our site in the Wix editor.

Then, we'll need to make sure we're editing the right page.

We want to make sure that we show a unique comment thread for each blog post, so let's edit Blog Pages -> Post.

Step One: Edit The Dynamic Post Page

Then, we'll go to Add -> Embed Code -> Embed HTML.

Step Two: Add an Embed HTML Block

This will give us a sad looking box to start with:

The Starting Block

This example uses custom code to be compatible with Wix. You won't be able to use the FastComments code snippets from other tutorials.

Open the form to add our custom HTML dialog by clicking Enter Code and selecting HTML:

Step 3: Open HTML Dialog

Copy the following HTML snippet and paste it into the dialog, and click Update:

Wix Comments Code Snippet

Copy

1

2<script src="https://cdn.fastcomments.com/js/embed-v2.min.js"></script>

3<div id="fastcomments-widget"></div>

4<script>

5 (function () {

6 const config = {

7 tenantId: "demo"

8 };

9 const instance = FastCommentsUI(document.getElementById('fastcomments-widget'), config);

10 window.onmessage = (event) => {

11 if (event.data) {

12 if (event.data.action === 'reload') {

13 console.log('Updating FastComments:', event.data.url);

14 config.urlId = event.data.url;

15 config.url = event.data.url;

16 instance.update(config);

17 }

18 }

19 }

20 })();

21</script>

22

Step 3: Paste and Save

You should now see a very tiny version of the comment widget:

Step 3: The Result

Next we will position and size this to fit our page.

Now that we have the comment widget added, let's get it arranged on our page.

Step 4: Resize

With this tutorial we will be able to change the current thread based on the active page. However, we won't be able to resize the comment widget dynamically until Wix opens up this functionality. Until then, you will have to decide how big you'd like the comment area on your page and size it appropriately.

Next, let's set things up so that the comment thread changes based on the current page, allowing users to discuss the currently displayed content.

Without the following steps, you will only have one global comment thread for your entire site - which is not very useful.

Dev Mode

To add this functionality, we'll have to go into what Wix calls Dev Mode.

Click the Dev Mode option at the top of the screen.

Enable Dev Mode

Set the Element ID

We're going to add custom code to accomplish this, but first we need to give the new embed element an ID to refer to it by.

Let's call it fastcomments.

Click the new embed element we added, and in dev mode in the bottom right you should see an ID field with a value like html1:

The ID Field

Change this to fastcomments and hit enter:

Set the ID

Now we can add our custom code that tells the comment area what page we are viewing.

At the bottom of the screen you should see a code editor like this:

Open The Editor

Copy the following code and paste it in there:

Wix Comments Navigation Snippet

Copy

1

2import wixLocation from 'wix-location';

3

4$w.onReady(function () {

5 function updateFastCommentsLocation() {

6 try {

7 const url = (wixLocation.baseUrl + '/' + wixLocation.path).replace(/,/g, '/');

8 $w('#fastcomments').postMessage({'action': 'reload', 'url': url});

9 } catch (err) {

10 console.error('Wix -> FastComments Error', err);

11 }

12 }

13

14 updateFastCommentsLocation();

15 wixLocation.onChange( () => {

16 updateFastCommentsLocation();

17 });

18});

19

Add The Navigation Code

Now we can take a breath and preview our site. You should see a comment area that changes based on the given page. Congratulations!

If you have any problems, let us know in the comment box below.

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.