Botframework-webchat: How to Customize Suggested Actions Layout

[keshansandeepa]

Hi,
I just wondering is there any method to customize the suggested actions container.
Right now my Suggested Actions Layout look like this .

But i need to customize like this . Any method to implement ?

[mdrichardson]

@keshansandeepa I recommend reviewing the styling sample or the branding sample. Your styleOptions can modify the following for suggested actions:

  suggestedActionBackground: 'White',
  suggestedActionBorder: undefined, // split into 3, null
  suggestedActionBorderColor: undefined, // defaults to accent
  suggestedActionBorderRadius: 0,
  suggestedActionBorderStyle: 'solid',
  suggestedActionBorderWidth: 2,
  suggestedActionDisabledBackground: undefined, // defaults to suggestedActionBackground
  suggestedActionDisabledBorder: null,
  suggestedActionDisabledBorderColor: '#E6E6E6',
  suggestedActionDisabledBorderStyle: 'solid',
  suggestedActionDisabledBorderWidth: 2,
  suggestedActionDisabledTextColor: undefined, // defaults to subtle
  suggestedActionHeight: 40,
  suggestedActionImageHeight: 20,
  suggestedActionLayout: 'carousel', // either "carousel" or "stacked"
  suggestedActionTextColor: null,

[keshansandeepa]

@mdrichardson
I want to edit position of suggestions bar , Currently its all centered , but i need to add justifiy-end make a right align , mm, do you have any solution for that ?

[mdrichardson]

@keshansandeepa Using suggestedActionLayout: 'stacked' should get you pretty close (although there's currently a bug, so it doesn't work right now). Beyond that you'd need to either:

1. Make custom CSS edits. The css class names may change in the future, so I don't necessarily recommend this. Or
2. Build and customize WebChat, then include it in your site, or
3. Submit this as a feature request

[mdrichardson]

@keshansandeepa In case you didn't see...it's a known bug and it's actually fixed in a version that isn't live on the CDN yet.

[keshansandeepa]

@mdrichardson In React Version , That bug was fixed, I just tried css trick for now . But within one month, i will try to implement style version, lets see , thanks for the reply :)