DEV Community

Cover image for How I hacked Crisp.chat into a less intrusive feedback widget ๐Ÿ’ป๏ธ
Simon
Simon

Posted on

How I hacked Crisp.chat into a less intrusive feedback widget ๐Ÿ’ป๏ธ

Crisp is my go to choice for whenever I need a chat widget on a website. It has a generous free plan and I like how it all works. It's pretty solid.

But there are some limitations if you want to go beyond basic customisation. Also, unless you start upgrading to pro or unlimited most of the plugins are not available either.

Using Crisp as a feedback widget

This part was quite easy. I just made the settings to show me as always away and to only notify my via email. I also set it to ask a user for their email address.

Making the button smaller and less intrusive

It's tricky targeting the right things as the class names are dynamic so they will keep changing and you will lose your changes. I found these selectors work (so far) and should be less fragile:-

Image description

Getting the right colors to be in-keeping with the brand

Image description

Hiding the powered by Crisp link

#crisp-chatbox a[rel="noopener noreferrer nofollow"] {
display: none !important;
opacity: 0;
visibility: hidden;
}

Hope this is useful ! ๐Ÿ˜Š

See widget + full code here (had issues with the code editor so couldn't post it all in Dev to) https://app.hackercabin.com/public/d/24-how-i-hacked-crispchat-into-a-less-intrusive-feedback-widget

Top comments (0)