Embed n8n-demo component in Confluence page

Questions
1

Would it be possible to use the n8n-demo webcomponent in pages on confluence or github? That way me and my colleagues can share workflows in an easy way.

2

It looks like your topic is missing some important information. Could you provide the following if applicable.

  • n8n version:
  • Database (default: SQLite):
  • n8n EXECUTIONS_PROCESS setting (default: own, main):
  • Running n8n via (Docker, npm, n8n cloud, desktop app):
  • Operating system:
3

Hi @gmf

To embed the <n8n-demo> component with a workflow directly into your GitHub Pages site, you just need to place the tag with the provided workflow attribute in your HTML file.

Here’s how you can update your index.html to include the <n8n-demo> tag with the specified workflow:

Updated HTML with <n8n-demo> tag:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your n8n Demo Page</title>
    <!-- Import Web Components JS -->
    <script src="https://cdn.jsdelivr.net/npm/@webcomponents/[email protected]/webcomponents-loader.js"></script>
    <script src="https://www.unpkg.com/[email protected]/polyfill-support.js"></script>
    <script type="module" src="https://cdn.jsdelivr.net/npm/@n8n_io/n8n-demo-component/n8n-demo.bundled.js"></script>
  </head>
  <body>
    <h1>Welcome to the n8n Demo</h1>

    <!-- Embed the n8n demo component with your workflow -->
    <n8n-demo workflow='{"nodes":[{"name":"Workflow-Created","type":"n8n-nodes-base.webhook","position":[512,369],"parameters":{"path":"webhook","httpMethod":"POST"},"typeVersion":1}],"connections":{}}'></n8n-demo>

  </body>
</html>

Steps to Set Up for GitHub Pages

  1. Create/Access GitHub Repository for GitHub Pages:
  • If you haven’t done so, create a repository and enable GitHub Pages as mentioned earlier.
  1. Update or Add the HTML File:
  • Open your index.html (or any other HTML file) in the root of your repository.
  • Add the <n8n-demo> tag with the workflow attribute (containing the workflow data) as shown above.
  1. Push the Changes to GitHub:
  • Commit and push the changes to your repository.
  1. Visit the GitHub Pages Site:
  • After pushing, navigate to the GitHub Pages URL, for example: https://<your-username>.github.io/<repository-name>/.
  • You should now see the n8n demo component displaying the workflow you’ve specified.

Steps to Set Up for Confluence

  1. Enable HTML Macros (if necessary):
  • Ensure that you have the necessary permissions to add HTML content to a Confluence page. Some Confluence configurations may require you to enable or whitelist HTML macros. If you are unsure, contact your Confluence administrator to enable this functionality.
  1. Add HTML Macro to Confluence Page:
  • Edit the Confluence page where you want to display the n8n workflow.
  • Use the HTML Macro to insert custom HTML.
    • Go to the Confluence editor.
    • Type {html} to insert the HTML macro.
    • Inside the HTML macro, add the following code.

HTML Code to Embed the n8n Demo Component:

<script src="https://cdn.jsdelivr.net/npm/@webcomponents/[email protected]/webcomponents-loader.js"></script>
<script src="https://www.unpkg.com/[email protected]/polyfill-support.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/@n8n_io/n8n-demo-component/n8n-demo.bundled.js"></script>

<n8n-demo workflow='{"nodes":[{"name":"Workflow-Created","type":"n8n-nodes-base.webhook","position":[512,369],"parameters":{"path":"webhook","httpMethod":"POST"},"typeVersion":1}],"connections":{}}'></n8n-demo>
  1. Save and Publish the Page:
  • After inserting the HTML code with the <n8n-demo> tag into the HTML macro, save and publish your page.

I hope this helps.

Take care!

4

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.