Hi guys. In the past few days, I have been desperately trying to customize my website widget. I successfully added a widget into my website, but I do not know how to customize it. I have tried creating and hosting my own CSS file on GitHub to include it in the snippet instead of this one (https://cdn.jsdelivr.net/npm/@n8n/chat/dist/style.css), but I do not know how to correctly structure it. I have watched some tutorials on YT, but they all give their solutions/templates that cannot be changed in the way I want to change them. So, can someone please step-by-step explain to me how to customize a website widget? Do not just paste a random YT video that falls into the above-mentioned category. Thanks for the help in advance. I appreciate it. BTW I am trying to embed it into the website via the Hostinger editor.
Hmm, I would honestly reccmond agaisnst embed in your case, I would do an Iframe w/ the chat set to public, then use the options in n8n to change the CSS of the chat.
But this would mean a whole new window that the customer will have to go to. What I am saying is that I would like the chat widget to be on the original website in the bottom right corner (not full screen).
thats the benefit of using the iframe, you can just change the size of it instead of dealing with embeding
so the rest of the website would still be visable?
Yeah you can put the src of the iframe to the public chat URL from n8n, then size the iframe respectively in your site