Install Disfora on your website

1. Add your site

Create a free account, start a project and enter your site's domain, for example yoursite.com. A project is one site. The www and non-www addresses count as the same site.

2. Add the script

Add this to every page that should show comments. It works anywhere on the page, in the <head> or the body; just before the closing </body> tag is usual:

<script src="https://disfora.com/public/disfora.js" async></script>

Every site uses this same tag: Disfora finds your project from the page's domain. It only downloads the comments code on pages that have a container, so you can add it to every page.

3. Add a container

Put an empty element where the widget should appear, usually after the post:

<div data-disfora-comments></div>

A page can have several, for example a rating under the title and comments at the end. Colours, font and corners are set on your project's Styles page. The widget draws inside its own shadow root, so your site's CSS doesn't change it and its CSS doesn't change your site.

4. Verify your domain

The widget only loads on a domain once you've shown you own it. In your project, open Settings, click Verify next to your domain and pick one of these. The dashboard fills in your token.

• Meta tag in the <head> of your homepage: <meta name="disfora-site-verification" content="…">
• File at https://yoursite.com/.well-known/disfora-verify.txt containing disfora-verify=…
• DNS TXT record named _disfora.yoursite.com with the value disfora-verify=…. DNS changes can take up to 24 hours.

Click Verify on the method you used. Comments start loading straight away.

Serve comments from your own subdomain

Recommended once the domain is verified. Add a CNAME record at your DNS provider, then click Check subdomain in Settings:

comments.yoursite.com  CNAME  comments.disfora.com

The widget then sends its requests to comments.yoursite.com instead of disfora.com, and readers' sign-in is kept in a cookie on your own domain. Browsers treat it as your site's own cookie, so settings that block third-party cookies don't affect it. Nothing on your pages changes: keep the same script tag.

How pages are matched

Each thread belongs to a page address. These count as the same address:

• http and https, with or without www
• With or without a trailing slash, in any letter case
• With a # anchor, or tracking parameters like utm_source, gclid, fbclid and ref

Other query parameters make a different page, so /post?id=1 and /post?id=2 get their own threads. If you change a post's address, its comments stay with the old one, so settle your permalinks before launch. If you do move posts, contact us and we'll move their comments.

Polls and forms

Create a poll or a form in your dashboard and click Copy embed code. You get a container with the poll's or form's id, which uses the same script:

<div data-disfora-poll-id="…"></div>
<div data-disfora-form-id="…"></div>

See Polls and Forms for their settings.

Sites that change pages without reloading

Next.js, Gatsby, Docusaurus, Astro with its client router, and MkDocs with instant navigation swap the page in the browser instead of loading a new one. On these sites, load the script once in the layout every page shares, and put the container in your post or page template. When a container appears, Disfora loads the thread for the new address; when it goes away, the widget is removed with it.

Testing before launch

Disfora only loads on the domain in your project, so you won't see the widget on localhost or a staging address. Deploy the change, then check a post on your live site.

Platform guides

Where to put the script and the container on each platform:

• Astro
• Docusaurus
• Gatsby
• Ghost
• Hugo
• Jekyll
• MkDocs
• Next.js
• Squarespace
• Webflow
• WordPress

Moving from Disqus or Commento? Import your comments first, then follow these steps.

Ask a question

Something missing or unclear? Ask here and we'll answer in the thread.