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: 'https://community.discourse.org/',
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);
})();
</script>
This is straightforward, just paste the above snippet to the page where you want to integrate discourse thread comments.
React
Create a discourse-forum.js file and paste the below code
import { useEffect } from 'react';
export default function DiscourseForum() {
useEffect(() => {
window.DiscourseEmbed = {
discourseUrl: 'https://community.discourse.org/',
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>
<div id="discourse-comments"></div>
</div>
);
}
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 https://www.website.com 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';
And use like this in your page
<DiscourseForum />
You can further customise this as per your need.
Cheers!
Top comments (5)
When it comes to choosing the perfect box sleeves, A comprehesive guid to selecting ideal box sleeves, box sleeves becomes indispensable. Box sleeves play a crucial role in packaging, offering both protection and aesthetic appeal. The ideal sleeves should align with the dimensions of the box, ensuring a snug fit. Material selection is vital, considering durability and visual impact. Whether for product presentation or transportation, a well-informed choice in box sleeves can enhance brand image and safeguard the contents within. This guide navigates through key considerations for selecting the optimal box sleeves for various purposes.
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?
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?
How does the React version handle the
discourseEmbedUrl?@shahbaz17
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.