# Embed Discourse comments on another website via Javascript

**URL:** https://meta.discourse.org/t/embed-discourse-comments-on-another-website-via-javascript/31963
**Category:** Integrations
**Tags:** embedding, how-to
**Created:** [August 10, 2015, 6:20pm UTC](https://meta.discourse.org/t/embed-discourse-comments-on-another-website-via-javascript/31963 "2015-08-10T18:20:46Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![Discourse](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/discourse/32/148734_2.png) [@Discourse](https://meta.discourse.org/u/Discourse)
#### Post date: [August 10, 2015, 6:20pm UTC](https://meta.discourse.org/t/embed-discourse-comments-on-another-website-via-javascript/31963/1 "2015-08-10T18:20:46Z")

</div>

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](http://blog.codinghorror.com/welcome-to-the-internet-of-compromised-things/#discourse-comments). The blog is run via [Ghost](https://ghost.org/) but the comments are embedded from his [Discourse forum](http://discourse.codinghorror.com/t/welcome-to-the-internet-of-compromised-things/3550).

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 could embed via Javascript.

This guide will show how to set up comment embedding on your own blog or web site.

### How it works

In Discourse, a topic is made up of many posts. When you are _embedding_ Discourse on another site, you are linking a document (blog entry, HTML page, etc.) with a single _topic_. When people post in that topic, their comments will automatically show up on the page you embedded it in.

You have the choice to have Discourse create the topics automatically when a new embedding is found, or you can create the topics yourself in advance.

### Configuring Discourse for Embedding (simple setup)

The following setup will embed a comment feed on a page on a fake blog URL of `http://example.com/blog/entry-123.html`, from a discourse forum running at `=DISCOURSE=`.

Domain for &nbsp;

Domain for &nbsp;

1. Visit **Admin \> Customize \> Embedding** on your Discourse install. https://=DISCOURSE=/admin/customize/embedding

2. Create at least one **Embeddable Host**. This should be the hostname (domain) where you want to embed your comments. In this case the host is `=BLOG=` – note the lack of `http://` and path.

3. Navigate to the **Posts and Topics** tab and fill in the **Username for topic creation** field. This is the user who will create topics when new embeddings are found. Let’s assume our discourse has a user called eviltrout, so the value is `eviltrout`.

4. Insert the following HTML on the web page at `http://=BLOG=/blog/entry-123.html`

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

<script type="text/javascript">
  DiscourseEmbed = {
    discourseUrl: 'https://discourse.example.com/',
    discourseEmbedUrl: 'http://example.com/blog/entry-123.html',
    // 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);
  })();
</script>

```

The configurable parts of the snippet are in the `DiscourseEmbed` object. `discourseUrl` is the full path to the base of your discourse, including the trailing slash. The `discourseEmbedUrl` is the document that is currently embedding a comment feed.

If you set this up correctly, the first time you visit `http://=BLOG=/blog/entry-123.html` it will try to load comments for the blog post. Since there are none, it will tell the Discourse forum to create a new topic in the background. A new topic will be created by `eviltrout` and the contents of the first post will be crawled from your blog and the text will be extracted automatically.

Once the new topic is created, users can post on it, and their comments will automatically be displayed the next time `http://=BLOG=/blog/entry-123.html` is visited.

`className` is optional and will add a class of your choice to the embed so you can customize it with CSS.

> 💡 **Tip:** If your blog has multiple authors, you can add a `<meta name="discourse-username" content="author_username">` tag to each page. When Discourse crawls the page to create the topic, it will use this meta tag to determine the post author, overriding the default username set in the admin settings.

### Embedding on more than one page

In the above example we hard coded our `http://=BLOG=/blog/entry-123.html` URL when embedding the snippet of Javascript. This usually won’t be enough as many sites have many pages that are generated automatically. For example on a blog each entry typically gets its own page. To support this, put the same snippet on each page you want to display comments on, but replace the value passed to `discourseEmbedUrl` with the current page’s URL. On my blog, I use the following value for `discourseEmbedUrl`: `'http://eviltrout.com<%= current_page.url %>'` – as new blog pages are created, new topics will be created for them automatically on Discourse.

### Styling your Embedded content

You have the ability to add a stylesheet for your embedded comments. Use the **Embedded CSS** section of the Theme editor at **Admin \> Customize \> Themes \> [your theme] \> Edit CSS/HTML** and you can add a custom stylesheet that will be served up with your embedded comments. By default we think the layout looks nice on a white background, but if your site has a unique layout you’ll want to style it yourself.

### (Optional) Adding a Feed for Polling

As mentioned above, Discourse will automatically crawl any site it is embedded on. However, sometimes HTML can be hard to parse and it might not extract the contents of your posts correctly. Many blogs and web sites support RSS/Atom feeds for syndication, and Discourse can use this to extract the content of your blog posts more accurately.

Discourse ships with the [RSS Polling plugin](https://github.com/discourse/discourse/tree/main/plugins/discourse-rss-polling) (included by default). If you have a RSS or Atom feed set up on the site you are embedding Discourse into, you can enable the `rss_polling_enabled` site setting and add your feed’s URL via **Admin \> Plugins \> RSS Polling**. Once the feed URL has been added, Discourse will parse the feed and publish its posts to the appropriate category based on the Allowed Hosts that you add to your Embedding settings.

### (Alternate Configuration) Linking to existing topics

Some people prefer to not have Discourse create topics for them automatically on their forums. They’d like to create the topics themselves, then simply tell their embedding code what topic they want to associate with. You can do this by slightly changing your embedding code:

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

<script type="text/javascript">
  window.DiscourseEmbed = {
    discourseUrl: 'https://=DISCOURSE=/',
    topicId: 12345
  };

  (function() {
    var 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);
  })();
</script>

```

The only difference here is we’ve replaced `discourseEmbedUrl` with the id of a topic from Discourse. If you do this, no topic will be created and the comments from that topic will automatically be displayed.

### Setting the referrer policy

Due to recent (September 2020) [changes](https://developers.google.com/web/updates/2020/07/referrer-policy-new-chrome-default) to the default referrer policy that is set by many browsers, Discourse now explicitly defaults to setting the iframe’s referrer policy to `"no-referrer-when-downgrade"`. If, for security reasons your site requires a stricter referrer policy, it can be set by adding a `discourseReferrerPolicy` value to the embed script’s `DiscourseEmbed` object. For example:

```js
DiscourseEmbed = { discourseUrl: 'https://forum.example.com/',
                                  discourseEmbedUrl: '<your_posts_canonical_URL>',
                                  discourseReferrerPolicy: 'strict-origin-when-cross-origin'};

```

### Programmatically querying the Embed details

We have an API endpoint to query the Embed details using the embed\_url as the parameter:

```plaintext
curl 'https://meta.discourse.org/embed/info?embed_url=https://blog.discourse.org/2021/04/discourse-team-grows-to-50' -H 'API-KEY: logapikeygoeshere' -H 'API-USERNAME: apiusernamehere' 

```

And the response is:

```json
{
  "topic_id": 187794,
  "post_id": 925017,
  "topic_slug": "discourse-team-grows-to-50-blog",
  "comment_count": 2
}

```

### Embedding comments from a private site

For private Discourse instances, if Discourse is on a subdomain of the blog’s domain, comments will be displayed for users who are logged into Discourse. Users who are not logged into Discourse will see a ‘refused to connect’ message. If Discourse and the blog are on completely separate domains, no comments will be displayed for private forums.

### Troubleshooting

The most common issue users have when embedding Discourse is setting the correct value for the embeddable hosts you added. Make sure to double check that it is only the domain of your site, and contains no extra slashes or invalid characters.

> Last edited by @JammyDodger 2024-05-26T06:44:14Z
> 
> > **Check document**
> >
> > Perform check on document:

---

<div class="post-metadata">

### Author: ![sjmscott](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sjmscott/32/198290_2.png) [@sjmscott](https://meta.discourse.org/u/sjmscott)
#### Post date: [August 17, 2015, 6:45pm UTC](https://meta.discourse.org/t/embed-discourse-comments-on-another-website-via-javascript/31963/11 "2015-08-17T18:45:14Z")

</div>

Is it possible to use this method if the Discourse category is hidden from public view?

---

<div class="post-metadata">

### Author: ![riking](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/riking/32/170938_2.png) [@riking](https://meta.discourse.org/u/riking)
#### Post date: [August 17, 2015, 8:20pm UTC](https://meta.discourse.org/t/embed-discourse-comments-on-another-website-via-javascript/31963/12 "2015-08-17T20:20:54Z")

</div>

Probably not, but it might work if all of your viewers are logged in.

---

<div class="post-metadata">

### Author: ![cs224](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cs224/32/156445_2.png) [@cs224](https://meta.discourse.org/u/cs224)
#### Post date: [September 17, 2019, 2:10am UTC](https://meta.discourse.org/t/embed-discourse-comments-on-another-website-via-javascript/31963/306 "2019-09-17T02:10:18Z")

</div>

I’ve created a tutorial that walks you through the process of setting up a local discourse instance on vagrant for your local tests to embed discourse in your front-end development project. You can find it here: [Local discourse: vagrant, ansible, lxd, docker, discourse-embedding](https://weisser-zwerg.dev/posts/local-discourse-on-vagrant/)

This is different from other descriptions that I found before in that it allows you to run locally a complete discourse set-up like you would do in production to get a feel for the “real” set-up process. In addition this set-up is able to serve as a local development playground for embedding discourse into your project.

---

<div class="post-metadata">

### Author: ![klayemore](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/klayemore/32/138632_2.png) [@klayemore](https://meta.discourse.org/u/klayemore)
#### Post date: [September 26, 2019, 7:33am UTC](https://meta.discourse.org/t/embed-discourse-comments-on-another-website-via-javascript/31963/307 "2019-09-26T07:33:07Z")

</div>

Hi, is there a way to disable embedding for posts in draft status? I can’t see any handlebar within Ghost for post status, can I change the embed settings to exclude /p/ which is used to preview posts? I have a problem where posts that are previewed are being added to Discourse. Cheers.

---

<div class="post-metadata">

### Author: ![Lucas\_Meijer](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lucas_meijer/32/157389_2.png) [@Lucas\_Meijer](https://meta.discourse.org/u/Lucas_Meijer)
#### Post date: [September 28, 2019, 9:43pm UTC](https://meta.discourse.org/t/embed-discourse-comments-on-another-website-via-javascript/31963/308 "2019-09-28T21:43:58Z")

</div>

Can’t seem to find the setting to style the embedding iframe any more..? Is the original post out of date somehow?

EDIT: Nevermind, it had just changed places. I can add it to a theme component 🙂 thanks!

---

<div class="post-metadata">

### Author: ![eviltrout](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/eviltrout/32/5275_2.png) [@eviltrout](https://meta.discourse.org/u/eviltrout)
#### Post date: [October 2, 2019, 3:39pm UTC](https://meta.discourse.org/t/embed-discourse-comments-on-another-website-via-javascript/31963/309 "2019-10-02T15:39:22Z")

</div>

This sounds like a ghost question, not a Discourse question? However your Ghost integration is working needs to take that into account, not Discourse.

---

<div class="post-metadata">

### Author: ![ChloePrize](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/chloeprize/32/158023_2.png) [@ChloePrize](https://meta.discourse.org/u/ChloePrize)
#### Post date: [October 7, 2019, 6:22pm UTC](https://meta.discourse.org/t/embed-discourse-comments-on-another-website-via-javascript/31963/310 "2019-10-07T18:22:35Z")

</div>

Hello everyone!  
I need some help to embed Discourse into READTHEDOCS (using Sphinx)  
Does anyone have this kind of experience?

---

<div class="post-metadata">

### Author: ![Falco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/falco/32/179432_2.png) [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [October 7, 2019, 7:07pm UTC](https://meta.discourse.org/t/embed-discourse-comments-on-another-website-via-javascript/31963/311 "2019-10-07T19:07:37Z")

</div>

Looks like there is [GitHub - pdavide/sphinxcontrib-discourse · GitHub](https://github.com/pdavide/sphinxcontrib-discourse) which always embed a single topic.

---

<div class="post-metadata">

### Author: ![ChloePrize](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/chloeprize/32/158023_2.png) [@ChloePrize](https://meta.discourse.org/u/ChloePrize)
#### Post date: [October 7, 2019, 8:04pm UTC](https://meta.discourse.org/t/embed-discourse-comments-on-another-website-via-javascript/31963/312 "2019-10-07T20:04:26Z")

</div>

Thank you for reply, let check it out

---

<div class="post-metadata">

### Author: ![OSM](https://avatars.discourse-cdn.com/v4/letter/o/6de8d8/32.png) [@OSM](https://meta.discourse.org/u/OSM)
#### Post date: [March 1, 2020, 7:22am UTC](https://meta.discourse.org/t/embed-discourse-comments-on-another-website-via-javascript/31963/314 "2020-03-01T07:22:25Z")

</div>

Hey Guys  
I’ve been having some trouble embedding to a specific topic:  
I’ve been trying different variations of settings and I still just get ‘Error Embedding’ On My Website.  
Is it noticeable at all what I may be doing wrong? I’ve spent forever trying to get it to work, any help is appreciated.

 ![Screen Shot 2020-03-01 at 12.21.34 AM](https://global.discourse-cdn.com/meta/original/3X/0/2/02bd81abe13f1f19858ff1ae2329c30f8a64e6d9.png)

**Current Code Embedded On Website**

 ![Screen Shot 2020-03-01 at 12.23.45 AM](https://global.discourse-cdn.com/meta/original/3X/0/e/0e19169c4c42e1f33d15e4ef4821d7909a8c628e.png)

---

<div class="post-metadata">

### Author: ![eviltrout](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/eviltrout/32/5275_2.png) [@eviltrout](https://meta.discourse.org/u/eviltrout)
#### Post date: [March 2, 2020, 7:02pm UTC](https://meta.discourse.org/t/embed-discourse-comments-on-another-website-via-javascript/31963/315 "2020-03-02T19:02:58Z")

</div>

Are there any errors in your Javascript console?

---

<div class="post-metadata">

### Author: ![simon](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/simon/32/339122_2.png) [@simon](https://meta.discourse.org/u/simon)
#### Post date: [March 2, 2020, 7:37pm UTC](https://meta.discourse.org/t/embed-discourse-comments-on-another-website-via-javascript/31963/316 "2020-03-02T19:37:58Z")

</div>

> [@OSM](#):
>
> I’ve been having some trouble embedding to a specific topic:

In your first screenshot, you have all the paths set to publish to the uncategorized category. If you want to publish all posts to the same category you only need to create one Embeddable host record.

The Path Whitelist values that you have added to your Host entries might be causing problems. You can leave that value blank to publish all posts from your blog site that you’ve added the Discourse embed script to. If you want to set a specific path to publish to a Discourse category, the path should end with `/.*`. For example `/sites/.*`

The double slash at the start of your `/t/newsletter-discussions/105` path may be a problem. Also, that looks like the path to a Discourse topic. If set, the path should be the path to a grouping of posts on your blog. The purpose of the Path Whitelist setting is to allow you to publish posts from a specific path on your blog to a specific Discourse category.

---

<div class="post-metadata">

### Author: ![OSM](https://avatars.discourse-cdn.com/v4/letter/o/6de8d8/32.png) [@OSM](https://meta.discourse.org/u/OSM)
#### Post date: [March 3, 2020, 7:44pm UTC](https://meta.discourse.org/t/embed-discourse-comments-on-another-website-via-javascript/31963/317 "2020-03-03T19:44:34Z")

</div>

Ok thank you Simon, I appreciate it. I will give this a shot.

---

<div class="post-metadata">

### Author: ![TorqueWrench](https://avatars.discourse-cdn.com/v4/letter/t/73ab20/32.png) [@TorqueWrench](https://meta.discourse.org/u/TorqueWrench)
#### Post date: [May 29, 2020, 6:37pm UTC](https://meta.discourse.org/t/embed-discourse-comments-on-another-website-via-javascript/31963/343 "2020-05-29T18:37:42Z")

</div>

Like @codinghorror, I also use this DIscourse integration with Ghost [using the stock configuration](https://ghost.org/integrations/discourse/) which uses the absolute URL as the `discourseEmbedURL`.

A week or so ago, I decided to change my Ghost blog’s routing so that posts with URLs like `https://engineerworkshop.com/2020/02/20/how-to-set-up-wireguard-on-a-raspberry-pi/` are redirected to `https://engineerworkshop.com/blog/how-to-set-up-wireguard-on-a-raspberry-pi/`, with `https://engineerworkshop.com/blog/how-to-set-up-wireguard-on-a-raspberry-pi/` being the new permalink.

# The Problem

You can probably anticipate the problem this creates: the discourseEmbedURL is set to the old URL and so when the embed script is called, which now has a different URL, a new comment post is created in Discourse.

# Solution Attempt (Which Failed)

Now, prior to this, I had anticipated this problem, and so I thought I was being clever using a regex pattern with remap to fix the URLs: `rake posts:remap["[0-9]{4}\/[0-9]{2}\/[0-9]{2}","blog",regex]`

While that did “sort of” work, wherever the URL was used in the original Discourse comment post, sadly, when I loaded the blog posts, new comment topics were created in Discourse.

Ultimately, I just reloaded every post on my site and transferred comments from the old topics to my new topics, deleting the originals (I know, I know). Obviously killing pages is bad for SEO, not to mention end-user experience.

# My Question

I assume the reason my regex patch attempt didn’t work is because the Discourse topic is somehow keyed to the URL on the backend. (I readily admit to being ignorant of Discourse’s data structure). **For future knowledge, and anyone else that may attempt to do the same in the future, is there a way to remap a DIscourse topic to a new blog post URL?**

Thanks in advance!

---

<div class="post-metadata">

### Author: ![simon](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/simon/32/339122_2.png) [@simon](https://meta.discourse.org/u/simon)
#### Post date: [October 6, 2020, 7:34pm UTC](https://meta.discourse.org/t/embed-discourse-comments-on-another-website-via-javascript/31963/356 "2020-10-06T19:34:52Z")

</div>

7 posts were merged into an existing topic: [WP Discourse Embed Plugin](https://meta.discourse.org/t/wp-discourse-embed-plugin/30814/9)

---

<div class="post-metadata">

### Author: ![Jim\_Starkweather](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jim_starkweather/32/181916_2.png) [@Jim\_Starkweather](https://meta.discourse.org/u/Jim_Starkweather)
#### Post date: [November 24, 2020, 10:05pm UTC](https://meta.discourse.org/t/embed-discourse-comments-on-another-website-via-javascript/31963/369 "2020-11-24T22:05:20Z")

</div>

I love this feature as I have many magazine-style content sites and I can auto generate the topics into our forums but is there a way to get the URL preview working like it does normally in Discourse?

So instead of this:

 ![image](https://global.discourse-cdn.com/meta/original/3X/b/0/b07c8e9eac349a48161d3f4335696b0b9917194e.png)

More like this:

 ![image](https://global.discourse-cdn.com/meta/original/3X/9/0/9059ec9a10a7876e29864c5f25621ed18bb5feda.png)

Thanks,  
Jim

---

<div class="post-metadata">

### Author: ![JimPas](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jimpas/32/148179_2.png) [@JimPas](https://meta.discourse.org/u/JimPas)
#### Post date: [November 28, 2020, 10:52am UTC](https://meta.discourse.org/t/embed-discourse-comments-on-another-website-via-javascript/31963/370 "2020-11-28T10:52:34Z")

</div>

If you have the link on a separate line by itself it should Onebox.  
Then have your entire description line below, including the link, as you show in your first image. That will appear below the Oneboxed link.

---

<div class="post-metadata">

### Author: ![Jim\_Starkweather](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jim_starkweather/32/181916_2.png) [@Jim\_Starkweather](https://meta.discourse.org/u/Jim_Starkweather)
#### Post date: [November 28, 2020, 6:12pm UTC](https://meta.discourse.org/t/embed-discourse-comments-on-another-website-via-javascript/31963/371 "2020-11-28T18:12:19Z")

</div>

Hmm… well that’s a bit of a problem as the page itself is what is being previewed. So putting a link at the very top of the page HTML or article text is kinda problematic. Here is the page in question:

[https://modelshipwrights.com/news/us-navy-light-cruiser-cl-89-miami](https://modelshipwrights.com/news/us-navy-light-cruiser-cl-89-miami)

---

<div class="post-metadata">

### Author: ![march](https://avatars.discourse-cdn.com/v4/letter/m/858c86/32.png) [@march](https://meta.discourse.org/u/march)
#### Post date: [January 7, 2021, 5:48am UTC](https://meta.discourse.org/t/embed-discourse-comments-on-another-website-via-javascript/31963/372 "2021-01-07T05:48:20Z")

</div>

Hi folks. I’ve almost got this working, but realised that the use case I had in mind looks like it may not be as straightforward as I had hoped, and I am not sure how much additional work is involved.

I’m hoping to use this feature to power discussions on a site that is based around user generated content. I have no issues with the embedding of comments, or getting SSO set up and ensuring my users automatically become members of my community with the same emails, usernames, etc.

What I was hoping is that, when a new piece of user content is created on my site, that the user who published it becomes the author of the related Discourse post, not a single user as defined in the “Username for topic creation” setting of the embed feature. I won’t be allowing signups outside of my current signup process so I can be 100% sure that the Discourse user will already exist or, at least, can be created at that time we create the new thread.

Hopefully it’s obvious why I’d want to do this. ie. the content creator would then be the discussion’s OP on my Discourse site and could be automatically subscribed to the thread and notified of replies, their posts highlighted so as to stand out from other comments, etc, etc.

Any suggestions on where to start?

Thanks!

[Next page](https://meta.discourse.org/t/embed-discourse-comments-on-another-website-via-javascript/31963.md?page=2)