search

microsoft / BotFramework-WebChat

A highly-customizable web-based client for Azure Bot Services.
https://www.botframework.com/
MIT License
1.58k stars 1.53k forks source link

Customizing Buttons/Actions within WebChat Adaptive Card #2123

Closed mamhh closed 5 years ago

mamhh commented 5 years ago

To have consistent branding/styling we need to customize the actions/buttons that are rendered within Adaptive Cards just like what we have for (// Suggested actions) within defaultStyleOptions.js ... for the meantime .. any quick solution ????

tdurnford commented 5 years ago

Web Chat uses the AdaptiveCards npm package to render AdaptiveCard JSON into HTML elements, and the renderer uses a host config to determine how to style the HTML. Web Chat allows developers to pass their own adaptiveCardsHostConfig as a prop for the renderer to use. Additionally, the default host config that Web Chat uses does currently pull in some attributes from defaultStyleOptions so some of the changes like accent color should carry over.

For more details take a look at this GitHub issue on using your own host config. Note, providing a custom host config won’t be fully supported until the next release in July, but if you need an immediate solution please take a look at the read me section about using that latest bits.

Hope this helps!

mamhh commented 5 years ago

@tdurnford The statement (Web Chat uses the AdaptiveCards npm package) is a bit confusing for me. What I know , is that we reference a webchat.js script file in our HTML and it will do everything for us. Could you please explain your statement to me .. it will be really helpful

tdurnford commented 5 years ago

One of Web Chat's dependencies is the [Adaptive Cards]() package which is responsible for rendering all of the cards sent in the conversation. Essentially, your bot sends a card as a JSON object to the conversation, and Web Chat passes the JSON object to the Adaptive Cards renderer to convert it to HTML. If you want to change how the renderer styles the card, you need to update the Adaptive Card Host Config. Again, for an example on how to modify Web Chat's Host Config, take a look at this issue.

mamhh commented 5 years ago

One of Web Chat's dependencies is the Adaptive Cards package which is responsible for rendering all of the cards sent in the conversation. Essentially, your bot sends a card as a JSON object to the conversation, and Web Chat passes the JSON object to the Adaptive Cards renderer to convert it to HTML. If you want to change how the renderer styles the card, you need to update the Adaptive Card Host Config. Again, for an example on how to modify Web Chat's Host Config, take a look at this issue.

@tdurnford this is really great explanation from you :) .. but it opens new fundamental question ? I can understand that the adaptive card render is NodeJS package hosted @ some server and will accept JSON and return HTML .. is this a correct understanding?? and Why it's not simply Javascript code and being part of the Webchat.js file ?? Sorry if this question comes due to lack of experience.. I'm really thankful for your support and usual cooperation:)

tdurnford commented 5 years ago

Adaptive Cards is an open source project that is developed and maintained by a team outside the scope of Web Chat and can be used in any project. Web Chat has the project as a dependency meaning the source code is downloaded and added to the node_modules directory when we run npm install. Then when we build Web Chat that code gets incorporated into the build. So the Adaptive Cards are not being rendered on an external server but inside the Web Chat code. Take a look at this blog post on Node Modules.

mamhh commented 5 years ago

Adaptive Cards is an open source project that is developed and maintained by a team outside the scope of Web Chat and can be used in any project. Web Chat has the project as a dependency meaning the source code is downloaded and added to the node_modules directory when we run npm install. Then when we build Web Chat that code gets incorporated into the build. So the Adaptive Cards are not being rendered on an external server but inside the Web Chat code. Take a look at this blog post on Node Modules.

@tdurnford , Once again .. THANK YOU :) since this is my first time to deal with NODE JS. I just know and write normal JS :) ... so to conclude, WebChat is nodeJS project made of other modules and finally converted to normal JS within this file (https://cdn.botframework.com/botframework-webchat/latest/webchat.js) to be referenced/used within browsers ... please confirm this understanding :)