Webflow Comments Free Template

‍Steps to insert a commenting thread:

‍
1. Create a new empty "div" where you want the comment thread to appear
2. Set the ID of the div to "coral_thread"
3. Add an HTML embed element to the div and copy/paste the script code

‍

You will need to replace {{YOUR_CORAL_INSTALLATION}} with your Coral Installation URL, removing the brackets.

‍

4. Publish your site to view the comment thread.

<script type="text/javascript">
  (function() {
      var d = document, s = d.createElement('script');
      s.src = '{{YOUR_CORAL_INSTALLATION}}/assets/js/embed.js';
      s.async = false;
      s.defer = true;
      s.onload = function() {
          Coral.createStreamEmbed({
              id: "coral_thread",
              autoRender: true,
              rootURL: '{{YOUR_CORAL_INSTALLATION}}',
          });
      };
      (d.head || d.body).appendChild(s);
  })();
</script>

‍

What's a Coral Installation URL?

‍This is the URL where you have installed Coral by Vox Media, the free open source commenting platform.

If you're not already running Coral by Vox Media, you can either:

Install it from DockerHub for free on your own webserver, or host it in the cloud on heroku, gcp, aws, or anywhere else you choose
Let CommentsHome host it for you (learn more)

‍

As an open source application the Coral by Vox Media comment software is available as a free download. It must be installed on a Node.js server and requires both MongoDB & Redis databases.

You can run Coral yourself or use a hosting service provider that runs it for you and manages things like DB backups and server security. CommentsHome offers secure hosting of your comment database for a low monthly fee.

‍

Feel free to comment below to try it out!

Add Comments to Collection pages

It's also possible to modify your collections to include a "comments" toggle that will automatically add comment threads to collection pages:

First add a new field to your collection

Open your collection’s settings and click Add New Field
Select type SWITCH (this will let you toggle if comments appear or not)
Name it “Comments Enabled” or something like that
Save the Collection

Next, use the field to conditionally render comment threads:

In your collection page template insert a new Div where you want comments to be (IF they are enabled for that post)
Give the Div an ID of “coral_thread” and a class name of “coral”
Make the div conditionally visible if “Comments Enabled” field is set to true
Inside the div create an HTML custom code embed and copy paste the script above. Make sure you set the rootURL and s.src to the URL for your running installation of Coral by Vox Media.
Set the toggle to TRUE on posts where comment threads should show up and publish

‍

How to style the Comment Thread with Custom CSS:

You can use Webflow's Variables to map to the comment thread's predefined variables. This let's you style the div without worrying about custom CSS files.

Use Custom Fonts

Create a font variable called "font-family-sans-serif" and then set that to your preferred font. You can also set a "font-family-secondary".

Use Custom Colors

Create the following color variables in Webflow and it will auto override them on the coralStreamEmbed object. These are the common ones, but you can fully customize many more.

palette-primary-main
palette-primary-light
palette-primary-lighter
palette-primary-lightest
palette-primary-dark
palette-primary-darkest
palette-grey-lightest
palette-grey-darkest

You can use Inspect in your browser to play with the thread's CSS.

For more advanced custom styling options see https://docs.coralproject.net/css

‍

Default CSS Styles

This clone-able template includes the embed script without any custom styles applied. It uses {{YOUR_CORAL_INSTALLATION}} set to: sandbox.commentshome.com. (<- This url will not work on your site, sorry).
‍

Add Comments to your Webflow site