Custom styles for multiple buttons in channel web
# 👀feature-requests
r
Please, if you could add the ability to add custom class names or ID's to buttons so we can individually style them that would be great. As of now in order to accomplish this I needed to modify the lite.bundle.js file as following: If you replace:
Copy code
c.default.createElement("button",{className:"bpw-button ",onClick:this.handleButtonClick},this.props.label)
with this:
Copy code
c.default.createElement("button",{className:"bpw-button "+this.props.label.toLowerCase().trim().replace(/[^\w\s-]/g, '').replace(/[\s_-]+/g, '-').replace(/^-+|-+$/g, ''),onClick:this.handleButtonClick},this.props.label)
This will slugify the label of the button and add it as a class to the button. This way you can style each button individually from the style file. I have tested it and it works perfectly. Would be great if you can add something like this so I don't need to hack the lite.bundle.js file every release.
a
This is next level @rich-apple-5609 , thanks for sharing!!
c
We are working on an improved version on the webchat that is easier to style and has better defaults. This new webchat will give you the flexibility you need to customize the look and field. For now, you'll have to continue hacking away our current webchat. 🚀
r
Great looking forward
f
hey @rich-apple-5609 i would reccomend taking a look at the styler.botpress.app it will give you more customizability for the webchat. you can provide feedback to add different things you need
3 Views