Header panel
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.
5 Replies
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
Typebot Docs
Theme - Typebot Docs
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;}
thanks guys
@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 😉
ok