How to find the file to edit the defaults for n8n Chat package?

[Robm]

I want to edit the default setting for the n8n chat widget. The doc show the file contents to edit, but I cannot find the file on docker installed self hosted instance.

The path should be something like this, but I there is no deafults.ts file so I must be looking in the wrong place

packages/@n8n/chat/src/constants/defaults.ts

Can somone help me find the file to edit?

Information on your n8n setup

• n8n version: latest beta
• Database (default: SQLite): SQ Lite
• n8n EXECUTIONS_PROCESS setting (default: own, main):
• Running n8n via (Docker, npm, n8n cloud, desktop app): Docker
• Operating system: Linux

[Jon]

Hey @Robm,

The file you have linked to is the defaults we use, When you embed the widget on your site you would overwrite the defaults there in the createChat() function.

You can find how do this in the documentation for the widget itself here: https://www.npmjs.com/package/@n8n/chat#options but there could be some parts that need tweaking depending on what you are using to add it to your site.

[Robm]

Thank @Jon,

Took me a while to figure out what you were telling me. Now I get. The code snippet that is added to the site has place to add in the extra code lines (function) to control the widget.

For any other dummies like me out there. In the snippet that you add to your site

<link href="https://cdn.jsdelivr.net/npm/@n8n/chat/style.css" rel="stylesheet" />
<script type="module">
	import { createChat } from 'https://cdn.jsdelivr.net/npm/@n8n/chat/chat.bundle.es.js';

	createChat({
		webhookUrl: 'YOUR_PRODUCTION_WEBHOOK_URL'
	});
</script>

add in these lines of code after

webhookUrl: 'YOUR_PRODUCTION_WEBHOOK_URL'

Obviously add in your webhook url. Then paste

webhookConfig: {
		method: 'POST',
		headers: {}
	},
	target: '#n8n-chat',
	mode: 'window',
	defaultLanguage: 'en',
	initialMessages: [
		'Hi there! 👋',
		'My name is Nathan. How can I assist you today?'
	],
	i18n: {
		en: {
			title: 'Hi there! 👋',
			subtitle: "Start a chat. We're here to help you 24/7.",
			footer: '',
			getStarted: 'New Conversation',
			inputPlaceholder: 'Type your question..',
		},
	},

You can edit the code above to modify how you want the chat widget to present, Fir example change Nathan to Alex to change the name of the assistant.

[Jon]

Hey @Robm,

You nailed it