Hello All,
I need integrate a Chatbot into Web app, I created the Web app using .NET Core MVC, C# as backend language, for the Frontend HTML5, Bootstrap, CCS and jQuery, could you please provide and example?
Note: The Web app is getting the below error:
Uncaught SyntaxError: Unexpected token ‘export’ (at chat.bundle.es.js:41424:1)
Thank you and regards,
Hi @aacevedo Welcome!
The correct code to embed web chat into any website is like this:
<link href="https://cdn.jsdelivr.net/npm/@n8n/chat/dist/style.css" rel="stylesheet" />
<script type="module">
import { createChat } from 'https://cdn.jsdelivr.net/npm/@n8n/chat/dist/chat.bundle.es.js';
createChat({
webhookUrl: 'YOUR_PRODUCTION_WEBHOOK_URL'
});
</script>
And just replace YOUR_PRODUCTION_WEBHOOK_URL with your link you will get after making your chat trigger publicly available, although if you just use an iframe that should have just worked, but try this. Basically we need a tag type="module" that is it.
welcome to the n8n community @aacevedo
I’ve seen folks fix this by switching to chat.bundle.umd.js instead of the ES version. You can also bundle the n8n/chat package yourself if needed. Using the UMD build usually bypasses those loading issues when the browser struggles with ES modules.
Hello @tamy.santos ,
Could you please provide an example?
Web app is getting the error below:
Uncaught SyntaxError: export declarations may only appear at top level of a module on chat.bundle.es.js file
Regards,
@aacevedo
Use the UMD build instead of chat.bundle.es.js and load @n8n/chat/dist/chat.bundle.umd.js together with style.css, then initialize it from a normal script in your MVC page with window.n8nChat.createChat… and your webhook URL. That error happens because chat.bundle.es.js is an ES module and only works when loaded as type=“module”, while the UMD build works in a regular .NET Core 8 MVC page.
Hello,
Web app is still getting the error below:
Note: on .NET Core MVC the symbol @ means that the Web app has to execute a C# code, could you possible to have use different link without the @ symbol, something like:
https://cdn.jsdelivr.net/npm/n8n/chat/dist/style.css
and also for the js file:
https://cdn.jsdelivr.net/npm/n8n/chat/dist/chat.bundle.umd.js
Regards,
@aacevedo understood. Have you tried the direct embed with iframe ? Also Ummm.. have you tried add double @ like @@n8n/chat in your CDN URLs.
Web app is getting the error below:
Uncaught SyntaxError: The requested module ‘https://localhost:7270/js/chat.bundle.umd.js’ doesn’t provide an export named: ‘createChat’
Hello,
I changed the urls,
but now Web app is getting the error below:
Uncaught SyntaxError: The requested module ‘https://cdn.jsdelivr.net/npm/@n8n/chat/dist/chat.bundle.umd.js’ doesn’t provide an export named: ‘createChat’
could you please look?
Regards,
Hi @aacevedo try using this:
<link href="https://cdn.jsdelivr.net/npm/@@n8n/chat/dist/style.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/@@n8n/chat/dist/chat.bundle.umd.js"></script>
<script>
window.n8nChat.createChat({
webhookUrl: 'YOUR_PRODUCTION_WEBHOOK_URL'
});
</script>
Do not import createChat from chat.bundle.umd.js; load the UMD build in a regular tag (without type=“module”) and initialize it with window.n8nChat.createChat(…) — or, if you want to use import { createChat }, switch to the ESM build inside a script type=“module”
@aacevedo seems like it works great with normal SRC with iframe, i have personally tried the same and it didnt shown up as expected.
could you please provide an example?
@aacevedo something very basic like this:
Hi @aacevedo everything seems very good on front end code, just for confirmation, your chat trigger should be looking like this:
Web app is getting the errors below:
Failed to load resource: the server responded with a status of 524 ()
Refused to display ‘n8n.io - Workflow Automation in a frame because it set ‘X-Frame-Options’ to ‘sameorigin’.
i think we gotta change some of your proxy settings, add these in your reverse proxy headers: Basically change a bit of your server config.
customResponseHeaders:
X-Frame-Options: "ALLOWALL"
Content-Security-Policy: "frame-ancestors *"