The ability to share and visualize n8n workflows directly within a forum post can significantly enhance collaboration and knowledge sharing. This guide will walk you through the process of integrating interactive n8n workflow demos into your Discourse forum, mirroring the functionality seen on the official n8n community. This setup is ideal for internal development teams or private communities looking to share workflow fragments and tips securely.

Prerequisites: Setting Up Discourse

Before you begin, ensure you have a running instance of Discourse. You can find detailed installation instructions on the official Discourse GitHub repository. Once Discourse is installed and you’re logged in as an administrator, you’re ready for the next steps.

Understanding the n8n-demo Web Component

The core of this integration is the n8n-demo web component. This standalone component allows you to render n8n workflow JSON in an interactive viewer. It’s helpful to test this component independently by simply grabbing workflow JSON from n8n and embedding it in a basic HTML page as described in its official documentation. This step helps you understand how the component functions before integrating it into Discourse.

Installing the Discourse Plugin for n8n Workflows

Discourse uses plugins to extend its functionality. The discourse-n8n-wf plugin acts as a wrapper for the n8n-demo component, enabling its seamless use within forum posts.

Step-by-Step Integration Guide:

1. Prepare Discourse:
   • Ensure your Discourse instance is fully set up, and you can access the Admin Dashboard. (Typically, click your Avatar -> Admin button).
2. Add the Plugin to app.yml:
   • Locate your Discourse app.yml file (often found in your Discourse installation directory).
   • Within the hooks: after_code: section, add the following line to clone the n8n workflow plugin repository. Ensure it’s correctly indented, usually alongside the docker_manager clone:
     “`plaintext
     hooks:
     after_code:</li>
     <li>exec:
     cd: $home/plugins
     cmd:

     <ul>
     <li>git clone https://github.com/discourse/docker_manager.git</li>
     <li>git clone https://github.com/n8n-io/discourse-n8n-wf.git
     “`

3. Rebuild Discourse Container:
   • After modifying app.yml, rebuild your Discourse container using the command:
     bash
launcher rebuild app
4. Verify Plugin Installation:
   • Navigate to your Discourse Admin Dashboard.
   • Go to PLUGINS (left menu) -> Installed Plugins (sub-menu).
   • Search for “N8n wf” to confirm the plugin is listed.
5. Configure Plugin Settings:
   • Allowed Iframes:
     • From the Admin Dashboard, go to SECURITY (left menu) -> Security (sub-menu).
     • Filter settings by “iframes”.
     • Add an “Allowed iframes” entry. Important: Replace https://my-n8n-server.example.com` with your actual n8n server's base URL, ensuring the protocol (http or https) matches:https://my-n8n-server.example.com/workflows/demo` (the /workflows/demo part is fixed).
   • n8n Core URL:
     • From the Admin Dashboard, go to All site settings (left menu).
     • Filter settings by “N8n-core-url”.
     • Enter just the base URL of your n8n server, matching the “Allowed iframes” URL above, e.g., `https://my-n8n-server.example.com`.
6. Add n8n-demo Component to Discourse Themes:
   • From the Admin Dashboard, go to APPEARANCE (left menu) -> Themes & components (sub-menu) -> Components tab.
   • Click Install -> + Create new.
   • Enter a Name like n8n-demo component and select “Component” as the type. Click Create.
   • Click Add all themes and then the green check button to apply it.
   • Click Edit Code and switch to the </head> tab.
   • Paste the necessary script tags for the n8n-demo component from its official installation page (e.g., `https://n8n-io.github.io/n8n-demo-webcomponent/install/`). These typically look like:
     html
<script type="module" src="https://cdn.jsdelivr.net/npm/@n8n/demo-web-component/dist/index.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@n8n/demo-web-component/dist/index.css" />
   • Click Save.
7. Test the Integration:
   • Navigate back to your forum.
   • Create a new post and embed an n8n workflow JSON snippet within markdown code blocks. Make sure to use three backticks () on separate lines before and after the JSON:json
     {
     “nodes”: [
     {
     “parameters”: {},
     “type”: “n8n-nodes-base.manualTrigger”,
     “typeVersion”: 1,
     “position”: [
     0,
     0
     ],
     “id”: “ad04e21c-5d86-4463-8f03-0cd375224997”,
     “name”: “When clicking ‘Test workflow’”
     },
     {
     “parameters”: {
     “url”: “https://httpbin.org/get”,
     “sendQuery”: true,
     “queryParameters”: {
     “parameters”: [
     {
     “name”: “pure”,
     “value”: “magic”
     }
     ] },
     “options”: {}
     },
     “type”: “n8n-nodes-base.httpRequest”,
     “typeVersion”: 4.2,
     “position”: [
     220,
     0
     ],
     “id”: “10394cdf-c137-4cc9-8f17-c1370bb5380b”,
     “name”: “HTTP Request”
     }
     ],
     “connections”: {
     “When clicking ‘Test workflow’”: {
     “main”: [
     [
     {
     “node”: “HTTP Request”,
     “type”: “main”,
     “index”: 0
     }
     ] ] }
     },
     “pinData”: {},
     “meta”: {
     “instanceId”: “1234”
     }
     }
     ““`

Conclusion

By following these steps, you can successfully integrate interactive n8n workflow demonstrations into your Discourse forum, providing a powerful tool for your community to share, learn, and collaborate on automation workflows. This guide aims to consolidate information that was previously scattered, saving you valuable setup time and enhancing your forum’s capabilities.