Footer Message not showing in n8n-chat-widget

Paul_Bogemann · January 13, 2025, 1:12pm

Describe the problem/error/question

Hi Community!
I am using the n8n-chat-widget in Embedded mode. There is a “footer” field in the docs, which i would like to use. It is visible whenever I deactivate the workflow powering the chat. When I activate the workflow though its not visible anymore. The same applies for the “powered by n8n” footer element. 1. Is this behaviour intended? Is it due to the embedded mode?
2. If so, does anyone have a suggestion how to circumvent it. I wnat to show an additonal field, conveying either a link to a Webpage or an info text.
I triedchanging some css-elements but I don’t seem to find the solution, any help would be greatly appreciated.

What is the error message (if any)?

n.a.



## Information on your n8n setup
- **n8n version:** 1.72 / cloud &  1.74 community

n8n · January 13, 2025, 1:12pm

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:

ria · January 22, 2025, 2:20pm

Hi @Paul_Bogemann

How are you embedding the chat widget?

The footer is empty by default, but you can change it in the options. Have a look here:

github.com

n8n-io/n8n/blob/master/packages/@n8n/chat/README.md#options

# n8n Chat
This is an embeddable Chat widget for n8n. It allows the execution of AI-Powered Workflows through a Chat window.

**Windowed Example**
![n8n Chat Windowed](https://raw.githubusercontent.com/n8n-io/n8n/master/packages/%40n8n/chat/resources/images/windowed.png)

**Fullscreen Example**
![n8n Chat Fullscreen](https://raw.githubusercontent.com/n8n-io/n8n/master/packages/%40n8n/chat/resources/images/fullscreen.png)

## Prerequisites
Create a n8n workflow which you want to execute via chat. The workflow has to be triggered using a **Chat Trigger** node.

Open the **Chat Trigger** node and add your domain to the **Allowed Origins (CORS)** field. This makes sure that only requests from your domain are accepted.

[See example workflow](https://github.com/n8n-io/n8n/blob/master/packages/%40n8n/chat/resources/workflow.json)

> Make sure the workflow is **Active.**

### How it works
Each Chat request is sent to the n8n Webhook endpoint, which then sends back a response.

This file has been truncated. show original

Paul_Bogemann · January 22, 2025, 2:45pm

Hi Ria - Thanks for the response!
I am using the “embedded chat”-mode and CDN Embed in a Static HTML.
I did set a the footer parameter but it’s not visible (when the workflow is active)

ria · January 22, 2025, 4:16pm

Hi Paul - just tested it with a Github Pages, and the footer is visible. Have a look at my setup here:

github.com

riascho/n8n_chatWidget_test/blob/main/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>n8n chat widget test</title>
    <link
      href="https://cdn.jsdelivr.net/npm/@n8n/chat/dist/style.css"
      rel="stylesheet"
    />
  </head>
  <body>
    <h1>n8n Chat Widget Test</h1>
    <script type="module">
      import { createChat } from "https://cdn.jsdelivr.net/npm/@n8n/chat/dist/chat.bundle.es.js";
      createChat({
        webhookUrl: "YOUR_PRODUCTION_WEBHOOK_URL",
        webhookConfig: {
          method: "POST",
          headers: {},

This file has been truncated. show original

Perhaps you could share your HTML code?

Paul_Bogemann · January 24, 2025, 12:20pm

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GPA NRW Chat</title>
    <link href="https://cdn.jsdelivr.net/npm/@n8n/chat/dist/style.css" rel="stylesheet" />
    <style>
        :root {
            --chat--header-height: auto;
            --chat--body--background: #FFFFFF;
            --chat--header--background: #FFFFFF;
            --chat--header--color: #00000;
            --chat--header--border-top: none;
            --chat--header--border-bottom: solid;
            --chat--heading--font-size: 1.4rem;
            --chat--subtitle--font-size: inherit;
            --chat--subtitle--line-height: 1rem;
            --chat--border-radius: 1.0rem;
            --chat--message--bot--border: 1px solid #00000033;
            --chat--header--border-bottom: 1px solid #00000033;
            --chat--textarea--height: 50px;
            --chat--window--width: 33vw;
            --chat--window--height: 66vh;
            --chat--message-line-height: 1.5rem;
            --chat--input--border: 1px solid #00000033;
            --chat--input--border-radius: 6.0rem;
            --chat--footer--background: #FFFFFF;
            --chat--input--send--button--background: transparent;
            --chat--messages-list--padding: 1.5rem;
            --chat--header--padding: 1.5rem;



            --chat--color-primary: #E84E0F;
            --chat--color-primary-shade-50: #E84E0F;
            --chat--color-primary-shade-100: #cf3c5c;
            --chat--color-secondary: #00597F;
            --chat--color-secondary-shade-50: #1ca08a;
            --chat--color-white: #ffffff;
            --chat--color-light-shade-50: #e6e9f1;
            --chat--color-light-shade-100: #c2c5cc;
            --chat--color-medium: #d2d4d9;
            --chat--color-dark: #101330;
            --chat--color-disabled: #777980;
            --chat--color-typing: #404040;

            --chat--spacing: 1rem;
            --chat--transition-duration: 0.15s;

            --chat--window--width: 400px;
            --chat--window--height: 600px;

            --chat--header--border-top: none;

            --chat--textarea--height: 50px;

            --chat--message--font-size: 1rem;
            --chat--message--padding: var(--chat--spacing);
            --chat--message--border-radius: var(--chat--border-radius);
            --chat--message--bot--background: var(--chat--color-white);
            --chat--message--bot--color: var(--chat--color-dark);
            --chat--message--user--background: var(--chat--color-secondary);
            --chat--message--user--color: var(--chat--color-white);
            --chat--message--user--border: none;
            --chat--message--pre--background: rgba(0, 0, 0, 0.05);

            --chat--toggle--background: var(--chat--color-primary);
            --chat--toggle--hover--background: var(--chat--color-primary-shade-50);
            --chat--toggle--active--background: var(--chat--color-primary-shade-100);
            --chat--toggle--color: var(--chat--color-white);
            --chat--toggle--size: 64px;
        }


        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            font-family: Arial, sans-serif;
            color: var(--chat--color-dark);
            flex-direction: column;
            position: relative;
        }

        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: var(--background-image);
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            z-index: -1;
        }

        .chat-window {
            width: 100% !important;
            max-width: 600px !important;
        }

        .chat-header h1 {
            margin: 0;
        }

        .chat-header p {
            margin: 0;
        }

        .chat-footer {
            padding: 2rem 1.5rem;
        }

        .chat-inputs textarea {
            padding-left: 1.2rem !important;
        }
    </style>
</head>

<body>
    <script type="module">
        // Set background image dynamically
        const backgroundImageUrl = 'https://factoryai.app.n8n.cloud/webhook/6d47184a-e9f0-43a4-aab8-********'; // Change this URL to change the background
        document.documentElement.style.setProperty('--background-image', `url('${backgroundImageUrl}')`);

        import { createChat } from 'https://cdn.jsdelivr.net/npm/@n8n/chat/dist/chat.bundle.es.js';
        createChat({
            webhookUrl: 'https://n8n.1648factory-dev.com/webhook/******************/chat',
            mode: 'window',
            metadata: {},
            initialMessages: ["Wie können wir Ihnen helfen?"],
            i18n: {
                en: {
                    title: 'Ask me',
                    subtitle: ".",
                    footer: 'Footer ext',
                    getStarted: 'New Conversation',
                    inputPlaceholder: 'Tippen Sie hier Ihre Frage ein…',
                },
            },
        });
    </script>
</body>

</html>

Paul_Bogemann · January 24, 2025, 12:21pm

Thanks! What you shared is exactly what I had in mind. Somehow the footer is not showing for me though. Where is the input field in your example? Whenever I activate the workflow (therefore the input field is visible) the footer is hidden

ria · January 24, 2025, 2:20pm

Hey @Paul_Bogemann

I’ve tested your setup on my basic Github Pages and it renders just fine.

This leads me to believe it might be something to do with either the footer element being controlled with some additional CSS or something is interfering with the script.

Have you checked the browser developer tools?

Paul_Bogemann · January 24, 2025, 2:32pm

Please set it up with a working webhook-Url. It is only hidden when the input field is visible!

ria · January 27, 2025, 11:08am

Hi @Paul_Bogemann

Ah I see, yes the chat-get-started-footer gets replaced with the chat-input.

This is by design. If you wanted to change this, you will need to build your own chat widget implementation.

Paul_Bogemann · January 27, 2025, 3:38pm

Thank you for clearing it up

system · February 3, 2025, 3:39pm

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