Share feedback, ideas and get community help

Updated 7 months ago

Header panel

At a glance

The community members are discussing how to add a header panel to a chat system like Crisp or Chatwoot. One community member suggests using CSS to create a custom header, providing an example code snippet. However, another community member notes that the custom CSS approach may not work when the chat system is embedded on a website, as it only appears in the popup mode and not the bubble mode. The community members suggest reaching out to a web developer for further assistance, as the custom CSS solution is outside the scope of the chat system's functionality.

Useful resources
Any suggestions to add a header panel like we see on other providers? If we could do using the existing framework it will be cool. Anyone done anything like this?

Sharing an example of crisp.
Attachment
image.png
1
a
c
W
7 comments
Crisp is a chat system, more like Chatwoot.. But you can create your own theme if you like to make this header https://docs.typebot.io/theme/overview
I used css to create a header: .typebot-chat-chunk::before {
font-weight: bold;
color: white;
content: " πŸ‘©β€πŸ¦±" " Amanda - NYC Limo Virtual Suppport"; border: 1px solid #000;
padding-left:30px;
padding-top:10px;
padding-bottom:10px;
background: #003bc4;
font-size:14px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
margin-top:-40px;
margin-left:-30px;
margin-right:-30px;
}
.typebot-chat-chunk:nth-child(even)::before {display:none;}
.typebot-chat-chunk:nth-child(n+2)::before {display:none;}

.typebot-picture-button {border: 1px solid #dadada;}
@claudiob - one additional query, i get the header on the Theme page in typebot, but when i share it as html/javascript, it does not appear on my website? any idea about it?
It appears in the popup mode but not in bubble mode. @Baptiste please let know if you have an opinion on this.
This is custom CSS, it's out of Typebot scope, I can't really help about it! Ask an web developer friend if you can πŸ˜‰
Add a reply
Sign up and join the conversation on Discord