I have an Embedded chatbot which appears with no style for the input textarea. All styles and configurations are used directly from n8n references web page.
I used to built Hosted chatbots and everything used to appear correctly. Once i deployed one of my chatbots in an embedded mode, the style for the input textarea is removed. The strange part is that all of my chatbots now appear without the style on the input text area.
Why is the style lost and how can i bring it back ?
How exactly did you build the UI?
If you hard coded it, you can fix it using CSS.
Which software did you use to build the chatbot?
I am using a notepad for the UI. Even if I keep it with bare minimum html i still get the missing style.
It’s a CSS design problem actually. I fixed it for you. Just copy the below code.
<html lang="en">
<head>
<title>My tool</title>
<link href="https://cdn.jsdelivr.net/npm/@n8n/chat/dist/style.css" rel="stylesheet" /> </head>
<style>
.chat-inputs {
display: flex;
align-items: center;
gap: 10px;
padding: 12px;
border-top: 1px solid #ccc;
background-color: #fff;
box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.05);
}
.chat-inputs textarea {
flex-grow: 1;
resize: none;
padding: 10px 14px;
border: 1px solid #ccc;
border-radius: 20px;
font-size: 14px;
line-height: 1.4;
outline: none;
transition: border 0.2s ease;
}
.chat-inputs textarea:focus {
border-color: #4a90e2;
}
.chat-inputs-controls {
display: flex;
align-items: center;
}
.chat-input-send-button {
background-color: #4a90e2;
border: none;
padding: 10px;
border-radius: 50%;
color: white;
cursor: pointer;
transition: background-color 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
}
.chat-input-send-button[disabled] {
background-color: #ccc;
cursor: not-allowed;
}
</style>
<body>
<script type="module">
import {createChat} from 'https://cdn.jsdelivr.net/npm/@n8n/chat/dist/chat.bundle.es.js';
createChat({
webhookUrl: 'https://stavrianosy.app.n8n.cloud/webhook/d9fb488b-3c3f-47fb-a3ce-d5ac743d2e91/chat'
});
</script>
</body>
</html>
On mobile screens:
I can see that your chat widget still looks extremely small on mobile and tablet screens. If you need further help with designing of the website, Let me know. I am a frontend web dev.
