DEV Community

Mohammad Shahbaz Alam
Mohammad Shahbaz Alam

Posted on

Discourse thread integration on a React Website

Discourse is an open-source civilised discussion forum and used by many Developer communities. Mozilla, Magic, Netlify, Auth0, MongoDB to name a few.

This is a simple walkthrough integration of a discourse thread in a React application.

If you are an admin or a moderator of a discourse forum, I am pretty sure you have integrated the thread post onto your website's blog, guides, or product announcements page.

For others, who are not, discourse gives the below snippet:

<div id='discourse-comments'></div>

<script type="text/javascript">
  DiscourseEmbed = { discourseUrl: '',
                     discourseEmbedUrl: 'REPLACE_ME' };

  (function() {
    var d = document.createElement('script'); d.type = 'text/javascript'; d.async = true;
    d.src = DiscourseEmbed.discourseUrl + 'javascripts/embed.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(d);
Enter fullscreen mode Exit fullscreen mode

This is straightforward, just paste the above snippet to the page where you want to integrate discourse thread comments.


Create a discourse-forum.js file and paste the below code

import { useEffect } from 'react';

export default function DiscourseForum() {
  useEffect(() => {
    window.DiscourseEmbed = {
      discourseUrl: '',
      topicId: 123,

    const d = document.createElement('script');
    d.type = 'text/javascript';
    d.async = true;
    d.src = window.DiscourseEmbed.discourseUrl + 'javascripts/embed.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(d);
  }, []);

  return (
      <div id="discourse-comments"></div>

Enter fullscreen mode Exit fullscreen mode

Replace discourseUrl with your community forum URL and topicId with the thread id from your community forum.

And make sure to go to the admin settings and click on Customise>Embedding>+Add Host and add as the host.

Using DiscourseForum()

Import DiscourseForum to the page where you want to integrate the thread comments.

import DiscourseForum from '../link/to/the/file/discourse-forum.js';
Enter fullscreen mode Exit fullscreen mode

And use like this in your page

<DiscourseForum />
Enter fullscreen mode Exit fullscreen mode

You can further customise this as per your need.


Top comments (4)

mharis111 profile image

Hi, nice post. I am showing the comments in my reactjs applications. But following the steps which you mentioned, it just shows the comments of the main thread. The first comment of the topic is not shown on the page where I integrated it. Do you have any idea about this issue?

shahbaz17 profile image
Mohammad Shahbaz Alam

Hey @mharis111

Glad you liked it. Did you mean the previous comments or the first comment you post?

To display the comments, you need to make a comment on your created topic.

Can you share your live url where it's implemented?

dandv profile image
Dan Dascalescu

How does the React version handle the discourseEmbedUrl?

jaypaltagline profile image

I try to above step it's worked on my pc.
but when I try to login then I got the cookies-related error.
Already my browser cookies setting was on.

Image description