Scribd
Upload
4 views3 pages

Customize N8N Chatbot for Bixiby

The document provides customization instructions for an N8N chatbot integrated into a WordPress website, focusing on matching a specified color theme and changing the bot's name to 'Bixiby'. It includes a CSS style block for the theme and a JavaScript snippet to replace occurrences of the bot's name in chat messages. Additionally, it emphasizes adding DOM existence checks and retry logic to prevent crashes during element modifications.

Uploaded by

trieu nguyen thien
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
4 views3 pages

Customize N8N Chatbot for Bixiby

The document provides customization instructions for an N8N chatbot integrated into a WordPress website, focusing on matching a specified color theme and changing the bot's name to 'Bixiby'. It includes a CSS style block for the theme and a JavaScript snippet to replace occurrences of the bot's name in chat messages. Additionally, it emphasizes adding DOM existence checks and retry logic to prevent crashes during element modifications.

Uploaded by

trieu nguyen thien
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

I have integrated an N8N chatbot into my WordPress website and would like to customize its

appearance to match the colour theme shown in the attached screenshot. Additionally, I want the
chatbot to introduce itself as [Name of the CHATBOT] and use this name throughout the
conversation. I've found a customization section in N8N that includes a code snippet—please
rewrite the code to apply the specified colour theme and bot name accordingly
Note that : Add DOM existence checks and retry logic before modifying chatbot elements to
prevent crashes
Customization code from docs :
<style>
:root {
/* === Custom Chatbot Theme for Nathan === */
--chat--color-primary: #9C27B0

;
--chat--color-primary-shade-50: #8E24AA

;
--chat--color-primary-shade-100: #7B1FA2

;
--chat--color-secondary: #FF4081

;
--chat--color-secondary-shade-50: #F50057

;
--chat--color-white: #FFFFFF

;
--chat--color-light: #F3F2F7

;
--chat--color-light-shade-50: #E5E1EE

;
--chat--color-light-shade-100: #D6D0E4

;
--chat--color-medium: #C2BFD0

;
--chat--color-dark: #1B0536

;
--chat--color-disabled: #8A8A8A

;
--chat--color-typing: #555;
--chat--spacing: 1rem;
--chat--border-radius: 0.5rem;
--chat--transition-duration: 0.15s;
--chat--window--width: 400px;
--chat--window--height: 600px;
--chat--header-height: auto;
--chat--header--padding: var(--chat--spacing);
--chat--header--background: linear-gradient(90deg, #9C27B0

, #FF4081

);
--chat--header--color: var(--chat--color-white);
--chat--header--border-top: none;
--chat--header--border-bottom: none;
--chat--heading--font-size: 1.5em;
--chat--subtitle--font-size: inherit;
--chat--subtitle--line-height: 1.6;
--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-line-height: 1.6;
--chat--message--bot--background: var(--chat--color-light);
--chat--message--bot--color: var(--chat--color-dark);
--chat--message--bot--border: none;
--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;
}/* Optional heading override */
.chat-header::before {
content: " Nathan";
font-weight: bold;
font-size: 1.6em;
display: block;
}
</style><script>
[Link]("load", function () {
const replaceBotName = () => {
[Link](".chat-message").forEach(el => {
if ([Link]("Nathan")) {
[Link] = [Link](/Nathan/g, "Bixiby");
}
});
};const observer = new MutationObserver(() => {
replaceBotName();
});[Link]([Link], { childList: true, subtree:
true });setTimeout(replaceBotName, 1000); // Extra safety for delayed loading
});
</script>

You might also like