Bot Framework Composer Hero Card

Question

I have been attempting to customize the style of my hero card in Bot Framework Composer to appear round and different color from default but can't seem to make it work. How may I do this? First Image shows the current output, second image shows desired output designed in photoshop.

Answer 1

Please refer:
https://learn.microsoft.com/en-us/composer/how-to-send-cards?tabs=v2x#herocard

Thanks,

Prasad Das

---

If the response is helpful, please click "Accept Answer" and upvote it. You can share your feedback via Microsoft Teams Developer Feedback link. Click here to escalate.

Answer 2

1. Implement bot using web chat.
2. Run bot using webchat and use inspect element to verify class name of item wanting to customize. (In this example I will customize the button list of a hero card)
   
3. Verify name of class which in this case is: button.ac-pushButton.style-default.ac-selectable
4. Using a code editor, customize class to obtain desired look. (The following code is the one I used to obtain my desired result and will use as an example)
   
5. After using code editor to customize my desired element, the result was the following:
   

Using this method worked to customize every element I attempted. Hopefully this helps!

Answer 3

After further testing, I have successfully implemented the customization I intended. Please let me know if there is a way to submit a request to update the docs to make this information more accessible.

Thank you for the quick reply,

Jose