How to customise the chat window on my website?

Questions
1

Hello everyone :slight_smile:
I created a small website chatbot and connected it to my website (WordPress).
I added the chatbot widget to my website using the following code snippet:

Screenshot 2025-03-15 at 18.50.08
Screenshot 2025-03-15 at 18.50.08408×687 35.3 KB

I’m desperately trying to figure out how to customize the design/layout… For example, I’d like to remove the large “Hi there!” title, adjust the color, and adjust the text “Start a chat. We’re here to help you 24/7.”

This is the workflow:

Screenshot 2025-03-15 at 18.56.08
Screenshot 2025-03-15 at 18.56.08859×517 28.9 KB

Unfortunately, I can’t find any instructions online, or the instructions don’t work for me.

Also, in the first “Chat Trigger” node, the custom text I am using is not published on my website…

Screenshot 2025-03-15 at 18.56.36
Screenshot 2025-03-15 at 18.56.36376×562 25.3 KB

If someone wants to see the website where the chatbot window is implemented: https://mediencenteressen.de/

I would be very grateful for tips, instructions or links to documentation!

Greetings, Tim :slight_smile:

Information on your n8n setup

  • Self-hosted VPS
  • Database (default: SQLite):
  • Running n8n via npm
  • Operating system: Linux
2

If you change the mode from host to embedded mode you can use this package to further customize, if your host supports node:

Otherwise you can just create a custom style or javascript to “overwrite” the styling values of the chat. You can remove the div with class “chat-header” to remove that hey there header.

3

Hey @TimME,

You can easily customize the CSS on your website.

See example here

.
:point_right: If my reply answers your question please remember to mark it as the solution

2 Likes