https://discord.gg/botpress logo
#👀feature-requests
Custom styles for multiple buttons in channel web
# 👀feature-requests
r

rich-apple-5609

06/07/2023, 3:39 PM
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

acceptable-gold-88171

06/07/2023, 4:04 PM
This is next level @rich-apple-5609 , thanks for sharing!!
c

colossal-egg-20510

06/07/2023, 4:13 PM
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

rich-apple-5609

06/07/2023, 5:19 PM
Great looking forward
f

freezing-printer-49373

06/26/2023, 7:15 PM
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
2 Views