Neon style chatbot interface
# 📖tutorials
g
Here is how you can make a neon style chatbot interface (I already have a stylesheet template for you). How to change the color : 1. At the top of the stylesheet, replace the current color code which is #41D407 by the color code you want to put :root { --color : *put your code color here*; } 2. Go to https://codepen.io/sosuke/pen/Pjoqqp 3. On the left side, at the middle of your screen you should see Target color. Click on the box besides it (to the right). 4. Enter the same code color you put earlier (the one in italic) 5. Click on compute filters. Don't expect it to work each time, it might not work. I'm not sure how it works but it works. 6. Copy the line that start with filter: ...; 7. Go to your Botpress stylesheet 8. Look for .bpw-floating-button::before 9. Under that, you will see filter: invert(15%) sepia(99%) saturate(6067%) hue-rotate(359deg) brightness(102%) contrast(117%); 10. Remove that line 11. Paste your line of filter 12. Run to see if you like it. Make modifications if needed. 13. Get the stylesheet URL by clicking on the button Get stylesheet URL. Copy the URL and put it inside your bot (Botpress dashboard ->integration->settings->stylesheet URL)
Make sure to copy it all
Here's a video showing how to do it
Stylesheet
Should be good now (I had made a little mistake) :
j
💪
create red now lol
6 Views