question

JOSEALICEA-3675 avatar image
0 Votes"
JOSEALICEA-3675 asked Prasad-MSFT commented

Bot Framework Composer Hero Card

I have been attempting to customize the style of my hero card in Bot Framework Composer 228702-bad-hero-card.pngto 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.


228679-nice-hero-card.png


office-teams-app-devazure-bot-service
bad-hero-card.png (20.8 KiB)
nice-hero-card.png (137.0 KiB)
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Prasad-MSFT avatar image
0 Votes"
Prasad-MSFT answered Prasad-MSFT edited

Please refer:
https://docs.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.

5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

JOSEALICEA-3675 avatar image
0 Votes"
JOSEALICEA-3675 answered Prasad-MSFT commented

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

· 2
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Glad to hear that you are able to customize. Could you please share the details how you are able to achieve it, so that we can pass on the information to appropriate team and update the doc accordingly?

0 Votes 0 ·

@JOSEALICEA-3675 - Thanks for detailed explanation. You can submit your doc update request here.
229833-image.png
https://docs.microsoft.com/en-us/composer/how-to-send-cards?tabs=v2x#herocard

0 Votes 0 ·
image.png (8.5 KiB)
JOSEALICEA-3675 avatar image
1 Vote"
JOSEALICEA-3675 answered Prasad-MSFT commented
  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)
    229610-image.png


  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)
    229653-image.png


  5. After using code editor to customize my desired element, the result was the following:
    229618-image.png

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


image.png (76.3 KiB)
image.png (12.7 KiB)
image.png (26.4 KiB)
· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Please click "Accept Answer" and upvote it, so that others who encounter the same issue can find this solution and fix their problem.

1 Vote 1 ·