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.

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 !

In order to accomplish it I had to make a modification to the lite.bundle.js file. If you replace:

c.default.createElement("button",{className:"bpw-button ",onClick:this.handleButtonClick},this.props.label)

with this:

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.

@rich-battery-69172 this is a cool expansion of webchat customization!

@colossal-egg-20510 to consider for webchat improvements