Hello! I have this issue when trying to embed Discourse to our NextJS Web App. I already tried searching for answers from the already existing thread that touches on the same error, but I haven’t been able to find a resolution for my issue. Here’s how our embed code looks like: DiscourseEmbed = { discourseUrl: 'https://qanvast.discourse.group/', discourseEmbedUrl: 'https://web-uat.qanvast.com/sg/interior-design-singapore/forefront-interior-the-alcove-26226?image=769596', // className: 'CLASS_NAME', }; (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); })(); In the front-end, it’s just stuck in “Loading Discussions…”. At first I thought it has something to do with the CSP, but I already added the domain to the Embedding Allowlist. No errors show up in the console logs nor the Network calls. I’ve been stuck at this for a few hours now so I’d appreciate any help.

Hi @Edrian_C_Bertulfo welcome :wave: Did you follow this topic? This is how to do it, but I have no idea if it will work for a NexJS web app… [image] Embed Discourse comments on another website via Javascript Integrations Discourse has the ability to embed the comments from a topic in a remote site using a Javascript API that creates an IFRAME. For an example of this in action, check out Coding Horror’s blog. The blog is run via Ghost but the comments are embedded from his Discourse forum. One important thing to note with this setup is that users have to navigate to your forum to post replies. This is intentional, as we feel that the posting interface on a Discourse forum is currently much richer than what we …

Hello Lilly! Thank you for your response. I did follow the instructions on that post, and I’m still stuck with the infinite “Loading Discussion…” issue.

I have this issue using next.js too. It is stuck on ‘loading discussion’ for the first load (before topic creaed). If i refresh, the comments/start discussion shows - so it creates the topic fine for me, but doesn’t update the loading state (have to refresh to show updated state with comment box). It’d be good if there was a callback or something to let you know the topic is created as it’s not ideal to have to refresh the page. I don’t know if that is possible with an iframe

Here’s what I have in my next app. It works how I mentioned previously - have to press refresh. Lemme know if it works. Sometimes i have ot refresh a few times or wait for a while then refresh to get pas tthe ‘loading discussion’ message component: "use client" import { useEffect, useRef } from "react" /** * A React component to embed Discourse comments on a website * * @param {Object} props - Component props * @param {string} props.discourseUrl - The URL of your Discourse instance (including trailing slash) * @param {string} [props.discourseEmbedUrl] - The URL of the current page (for auto topic creation) * @param {number} [props.topicId] - ID of an existing Discourse topic (alternative to discourseEmbedUrl) * @param {string} [props.username] - Username for topic creation * @param {string} [props.className] - CSS class name to add to the embed * @param {string} [props.referrerPolicy] - Referrer policy for the iframe */ export default function DiscourseComments({ discourseUrl, discourseEmbedUrl, topicId, username, className, referrerPolicy = "no-referrer-when-downgrade", }) { const initialized = useRef(false) useEffect(() => { // Prevent duplicate initialization if (initialized.current) return initialized.current = true // Validate required props if (!discourseUrl) { console.error("DiscourseComments: discourseUrl is required") return } if (!discourseEmbedUrl && !topicId) { console.error("DiscourseComments: Either discourseEmbedUrl or topicId must be provided") return } // Configure the Discourse embed const config = { discourseUrl, discourseReferrerPolicy: referrerPolicy, } if (discourseEmbedUrl) { config.discourseEmbedUrl = discourseEmbedUrl } if (topicId) { config.topicId = topicId } if (className) { config.className = className } // Set the global DiscourseEmbed object window.DiscourseEmbed = config // Load the Discourse embed script const script = document.createElement("script") script.type = "text/javascript" script.async = true script.src = `${discourseUrl}javascripts/embed.js` document.head.appendChild(script) // Cleanup return () => { document.head.removeChild(script) delete window.DiscourseEmbed } }, [discourseUrl, discourseEmbedUrl, topicId, className, referrerPolicy]) return ( <> {username && } ) }

Embedded site stuck at "Loading Discussions"

Product Support

jfrux (Joshua R.) April 19, 2025, 7:30pm 6

Hmm, it doesn’t actually ever load, even after the topic creates…
At least not for me.

Any tips?

Topic		Replies	Views
Embedding on NextJS - Stuck on Loading and constant iframe refresh Product Support unsupported-install	1	1393	June 7, 2022
Embedding keeps showing "Loading Discussion..." with no error Product Support embedding	2	560	September 20, 2023
Discourse Comments stuck on "Loading..." Product Support	22	2478	September 18, 2024
Cannot get embedding to work Product Support	11	2869	August 31, 2021
Embed Discourse comments on another website via Javascript Integrations embedding , how-to	127	307165	June 2, 2026

Embedded site stuck at "Loading Discussions"

Related topics