13

We're using the Web Chat Channel in Microsoft's Bot Framework,and we don't want to use the attachment icon.

How can we hide and disable attachments so end users don't accidentally click it or get confused?

Attachment example

KyleMit
  • 30,350
  • 66
  • 462
  • 664
  • **See Also**: [BotFramework-WebChat > Sample - Disable the Upload Button](https://github.com/microsoft/BotFramework-WebChat/tree/v4.8.0/samples/02.branding-styling-and-customization/f.hide-upload-button) – KyleMit Mar 27 '20 at 16:50

1 Answers1

12

Hide Attachment Icon

Are you currently consuming the WebChat via an iFrame or via the JavaScript implementation? Integrating via JavaScript will give you moderate styling and customizability options.

By modifying the styleOptions object passed into the renderer, you can disable the upload button with minimal effort.

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

Sample - Disable the Upload Button

Disable Attachment Upload

The implementation above doesn't prevent the users from sending attachments to the bot, it will just disable the upload button. In the Azure Bot Service, you could also Block attachment upload from user in the DirectLine settings to disallow attachments on the service.

To disable the upload functionality:

  1. Navigate to your Web App Bot resources

  2. Navigate to Channels and click Edit

    Edit Chat Bot

  3. Check Block attachment upload from user

    Edit Web Chat

KyleMit
  • 30,350
  • 66
  • 462
  • 664
Mick
  • 2,946
  • 14
  • 19
  • Currently using the iFrame, but this might be be a reason to switch over to the script if our CMS can support it – KyleMit Mar 27 '20 at 16:13
  • 3
    There are many functional and branding reasons to switch over to the Javascript implementation, have a look at the [samples](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples). You could also host this page and embed it as an iframe, in case your CMS only supports iframing. – Mick Mar 27 '20 at 16:20
  • You're welcome, thanks for clarifying my post for future visitors. :-) – Mick Mar 27 '20 at 16:31
  • How do we do this when using `styleSet` instead of `styleOptions`? Or can we use both at the same time? Can we pass the options to `window.WebChat.createStyleSet()`? – Martijn Dec 15 '20 at 07:29