Customize Web Chat Client - Githubissues

VermontDepartmentOfHealth / covid-bot

A knowledge base & automated chatbot from the Vermont Department of Health with info for the COVID-19 response

https://vermontdepartmentofhealth.github.io/covid-bot/

MIT License

3 stars 2 forks source link

Customize Web Chat Client #4

Open KyleMit opened 4 years ago

KyleMit commented 4 years ago

Features

Hide attachment icon next to question box
Wrap Follow up Prompt Text
Add VDH Logo

Deployment

Add direct address to just embeddable bot built with script
Add Demo of iframe to direct chatbot embed

Hide Attachment Icon

From this post on How to disable attachment in botframework, we can do by switching to the JS renderer instead of using an iFrame like this:

window.WebChat.renderWebChat({
  directLine: window.WebChat.createDirectLine({ token }),
  styleOptions: {
    hideUploadButton: true
  }
}, document.getElementById('webchat'));

Wrap Follow Up Prompt

.ac-actionSet .ac-pushButton>div {
    overflow: visible !important;
    text-overflow: initial !important;
    white-space: normal !important;
}

KyleMit commented 4 years ago

Customization Options

Also, provide styling / customization if we use the JS library

VDH Logo

styleOptions: {
    hideUploadButton: true,
    accent: "#0171a1",
    botAvatarImage: "https://www.healthvermont.gov/sites/all/themes/vdh/favicon.ico"
}