Custom styles for multiple buttons in channel web
# 🤝help
r
Hello, does anyone know of a strategy to style a specific button in a button group in channel-web? Lets say I have three buttons "support, talk to sales, more info" and I want to bold only the talk to sales button. I don't see an obvious way to do this without hacking channel-web javascript light bundle. There are no unique ID or class identifiers on the button elements or containers. Is there a way I could add some using an attached javascript function? Any Ideas? The only identifier on the button elements is the class name bpw-button. If I could also add some additional unique class name or ID to each button it would be easy to style them independently from the custom style sheet.
a
Hey @rich-apple-5609, I don't think this feature exists in Botpress. I tried to see if the usual markdown formatting works on text in buttons, but, well, you can see the results in the screenshot 😁 This could make a good post in #1111026806254993459 !
r
In order to accomplish it I had to make a modification to the lite.bundle.js file. 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. I have tested it and it works perfectly. I can now style the buttons individually. Would be nice if they can add something like this so I don't need to hack the file after every new release.
a
@rich-battery-69172 this is a cool expansion of webchat customization!
r
@colossal-egg-20510 to consider for webchat improvements
@rich-apple-5609 looks like a clear limitation right now, hacking the bundle is clever and probably the only wait to do that for now.. we'll be improving the webchat soon and give you much more customization
48 Views