Please try opening this:
and tell me what you get, If it works on your side, then it means something is not correct in the workflow you’re working on.
Also, regarding this:
At this stage, there are no logs in the chat trigger yet until the user replies.
Here’s what I get from the workflow you’re running on your side:
The full interface is there. Again, I didn’t change any of the chat part of the workflow you created–I just updated URLs in the rest of the app so it would run correctly on my machine. It’s clearly not serving up the same HTML for some reason.
/mike
Okay, thanks.
Since you’re working on localhost, can you try adding the CORS option in the chat trigger?
Also, did you add the new AiOutput column to the database?
Finally, please double-check the workflow I shared, I didn’t change anything except the AI model to “flash 2.5.” Otherwise, it’s the same as live.
I’ve added that CORS setting of *, and there’s no change to the chat page.
I did add the DB column with jsonb datatype, and confirmed in the first part of the workflow that it’s populating correctly.
Same behavior still.
hmm, is there any usefull messeges in the browser dev console?
oh wait @trigrman
can you please change this column type to text instead of jsonb
because in the HTML template we actually convert it to JSON:
{{ $json.AiOutput.toJsonString() }}
Okay, that’s a good catch–I already had an unused text column in the DB and also put the same JSON in there, so I just used that column instead for the HTML. Now that text is showing up in the form, though I don’t know why the formatting doesn’t match yours.
I still don’t get a text entry field for the chat. I really don’t get what else could be happening here.
/mike
Because you copied the “same JSON” into the text column, and the AI node output is plain text:
Let’s ignore that part completely for now, and just make the message look like this:
initialMessages: [
'Hi there! 👋'
],
you can use this one after editing the links:
Okay, doing a diff on the (resulting) HTML from your workflow versus mine, shows that the main difference is that my resulting chat page is encapsulated in an iframe and yours is not. Is there a setting in one of these nodes that might cause that? Because I just copied your code and tweaked a couple of inline things–I certainly didn’t add an iframe.
/mike
Still the same, but now it’s just the ‘Hi there!’ text. Something is sandboxing the page, and the user entry frame is getting left out. Not sure what’s doing that. Let me look through the diff a bit more closely and see if I edited something by accident.
Nice catch!
It looks like there’s a new environment variable to disable webhook response iframe sandboxing:
N8N_INSECURE_DISABLE_WEBHOOK_IFRAME_SANDBOX
Also relevant:
I haven’t set this in my n8n instance, but I think I understand the issue now.
If your generated HTML is inside an iframe, try editing this part:
target: '#n8n-chat',
The problem is that after dealing with the iframe, there seems to be an issue with selecting the chat box.
I caught both this and the previous ‘body’ suggestion for the target, and neither one works–they just remove the styling or move the other content around a bit.
Can I just set (or unset) that env variable somewhere so that it behaves the way yours does?
/mike
Hmm, the issue is that I don’t use localhost, so I can’t really replicate your behavior.
So yes, please try setting the environment variable N8N_INSECURE_DISABLE_WEBHOOK_IFRAME_SANDBOX
Let’s see if that’s the cause of the issue or not.
Welp, that fixed the chat not working. Can we tell n8n that this change completely broke the chat widget in the current distribution?
Now, to get back to the prompt info you had inserted into the initial chat window, I inserted the same data you did into a different text field in the DB, using the same syntax, and retrieved it into the HTML using the same syntax, also. Yours is formatted nicely and mine is not, which I don’t understand.
I do have a DB field of type jsonb storing the same data in json–can I just pull that out instead and use it directly?
Thanks for finally confirming that 
Actually, you’re the one who figured it out when you compared and noticed the iframe thing 
The formatting is just the AI output that’s saved into the database column AiOutput with type text
As you can see here:
initialMessages: [
'Hi there! 👋',
{{ $json.AiOutput.toJsonString() }}
],
The code takes the value from the database and converts it to a string inside the array.
I’d forget about any manual or test entries and just try fresh again.
The AI output in the database should be plain text, like this:
I got this to work:
initialMessages: [
‘Hi there! 👋’,
’{{ $json.ai_output.summary }}’,
’{{ $json.ai_output.clarifying_question }}’
]
I also just ran across this workflow, which I might try instead:
It seems like this could be adapted to accomplish what I want using slightly different methods.
/mike
Yes, I think this is the part you mentioned that you needed for the chat responses; it’s probably easier this way. Jim’s workflow designs are always the best.
Regarding this topic, if everything is working fine with the main workflow you were struggling with, I’d really appreciate it if you could mark this reply as the solution.
I’ll also deactivate my URL I shared earlier since everything is fixed on your end.
Thanks, this was a really helpful problem to work on.
This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.
