Forum Discussion

jaypatadia's avatar
jaypatadia
Copper Contributor
Oct 17, 2019
Solved

How to Create Custom UI for Microsft Health Bot

Hi,

I have tried Microsft Health Bot which is available as SAAS service,

have used Direct line

I want to create Different UI,

is there any possible way?

 

Like if i get response like 

select gender type 

on that time i want to show images not buttons!!

 

 

and other cards also 

 

  • jaypatadia 

     

    Thanks for asking. There different levels of customization possible:

    • Hard - Custom chat client - You can build completely custom chat application. The application calls Direct Line API and gets the raw bot responses. You should recognize the gender question and then build code to display card per your requirements. 
    • Medium - Customize the webchat sample. Use the standard webchat sample and customize it. You can do stylistic customizations by modifying the CSS or you can do more advanced things by drilling down into the react application. 

    Hope that helps, Regards, Adam 

2 Replies

  • mjc_NWT's avatar
    mjc_NWT
    Copper Contributor

    jaypatadia 

     

    I recommend utilizing Microsoft's Adaptive Card framework, for which there are custom integration points within the Healthcare Bot portal/scenario editor. You can add image squares to the cards, etc. 

    When interacting with the Direct Line API, the adaptive card JSON will be returned in the attachments. 

  • Adam Walker's avatar
    Adam Walker
    Brass Contributor

    jaypatadia 

     

    Thanks for asking. There different levels of customization possible:

    • Hard - Custom chat client - You can build completely custom chat application. The application calls Direct Line API and gets the raw bot responses. You should recognize the gender question and then build code to display card per your requirements. 
    • Medium - Customize the webchat sample. Use the standard webchat sample and customize it. You can do stylistic customizations by modifying the CSS or you can do more advanced things by drilling down into the react application. 

    Hope that helps, Regards, Adam 

Resources