Customize webchat widget

Questions
1

I have a workflow of an AI agent which is triggered by a chat trigger and i want to customize the webchat widget to fit my website’s theme… but i dont really understand how to do it.

I took a look at this https://www.npmjs.com/package/@n8n/chat#optionsn8n note and still it was a bit confusing.

Currently i cannot comprehend the following:

  1. Import @n8n/chat as a dependency
  2. Are all of these tasks supposed to be done on the website itself?

That is it i appreciate even minor helps!

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

Hey @The_Cloud , if you want to embed the chat widget into your website you have two options depending on your deployment preferences/process:

  • CDN embed
  • import embed

In either case, you can override default CSS properties. To override, you can take advantage of CSS overriding rules which state that if there are two identical CSS statements the last one take precedence.

In other words you need to add your own CSS file after the default one.

In practical terms it means

CDN embed:

<link href="https://cdn.jsdelivr.net/npm/@n8n/chat/dist/style.css" rel="stylesheet" />
<link TO YOUR OWN CSS FILE>

Import Embed:

import '@n8n/chat/style.css';
import 'YOUR OWN CSS FILE';
import { createChat } from '@n8n/chat';
1 Like
4

THANK YOU SO MUCH MAN!!! I wasn’t able to figure this out and it became one of my main worries but i really appreciate your help … never knew it was this easy. Have a great week!