Embedding a whole Discourse forum on another site in an <iframe>

This has been talked about on two other threads already, but they are locked:

Some people say that we should instead work on re-branding Discourse to match design of an existing site.

From experience, this is very difficult to do. Markup and the CSS for that markup are very complicated to work with and not flexible. As an example, the DOM trees between the Discourse header and the main content are very disparate from each other. Injecting header content (In Dicourse’s built-in editor) places injected content very far off from the actual Discourse header, for example.

Believe me, it is quite difficult to simply “make your DIscourse follow you main site theme”.

What I’d like to try next is embedding Discourse in a <iframe>. Let’s see how that goes.

Feature request! It’d be neat if Discourse could be consumed as a set of custom elements. For example:

<!-- ... some custom markup ... -->

<discourse-actions backend="http://url.to/actual/discourse/instance">

<!-- ... some custom markup ... -->

<discourse-main backend="http://url.to/actual/discourse/instance>

which could allow the pieces of Discourse to be embedded anywhere in a site, and the elements would connect to the specified backend.

Visiting http://url.to/actual/discourse/instance directly would open Discourse the normal way as a web application by itself.

Basically this would make Discourse parts usable within overall HTML structures (like Handlebars template partials, but in a future-proof way built on web standards).

Just imagine what else would be possible with such a feature (think about when custom elements have different values for backend attributes)…

We certainly can’t stop you from trying Discourse in an iframe but as cautioned in other topics… it’s expected to be fragile and problematic… and we don’t intend to spend time solving iframe related issues.

It might be a better use of time to describe in detail the problems you run into when theming Discourse so we can help and/or improve the process. We’ve improved theming a lot over the past couple years, and it’s something we definitely want to support and improve where possible.

There are elements that are definitely trickier to customize than others, the header being one of them. This is because a Virtual DOM was implemented to improve performance (A tour of how the Widget (Virtual DOM) code in Discourse works).

So if you’re looking to insert content into the header, you’ll need to utilize that system rather than adding content before/after it from the admin UI (covered a bit in the advanced pluginAPI section of Developer’s guide to Discourse Themes). There are also some good examples of manipulating the header content in existing #theme-component like Custom Header Links.