Skip to content

Feedyou fork of BotFramework-WebChat - embeddable web chat control for the Microsoft Bot Framework

License

Notifications You must be signed in to change notification settings

feedyou-ai/feedbot-webchat

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Feedyou fork of Microsoft Bot Framework WebChat

Embeddable web chat control for the Microsoft Bot Framework using the DirectLine API. This repo is customized fork of BotBuilder-WebChat by Feedyou. This features were added by Feedyou in comparsion with BotBuilder-WebChat:

  • show typing indicator on startup until the first message is recieved
  • increase typing indicator timeout from 3 to 20 seconds
  • show imBack buttons only for the last activity
  • send backchannel event on startup which could be used instead of conversationUpdate event
  • ability to pass some userData to bot using backchannel mechanism's channelData prop
  • preset some default values in <App> component - for example generate user.id if not set
  • support custom button click trigger for restarting conversation (startOverTrigger prop)
  • make emoticons compatible using Twemoji
  • configurable style themes (currently only theme.mainColor prop)
  • auto show upload button when inputHint property of last incoming activity was expectingUpload
  • force intro dialog ID using introDialog.id property
  • option disableInputWhenNotNeeded to disable input after messages with inputHint==='ignoringInput

How to add Web Chat to your website

What you will get from Feedyou

These are configuration values you will get from Feedyou during WebChat implemenation phase.

  • DirectLine secret is used for authentication
  • Bot ID is string in format feedbot-*
  • Bot name will be shown as author name of messages from bot

Please paste these values to places marked by ... in examples.

What you will need to do on your website

Include botchat.css, botchat-es5.js (from our https://cdn.feedyou.ai/webchat/latest/... CDN) and following code into your website and paste required values you got from Feedyou. It will create expandable webchat in bottom right corner for you.

<!DOCTYPE html>
<html>
  <head>
    <link href="https://cdn.feedyou.ai/webchat/latest/botchat.css" rel="stylesheet" />
  </head>
  <body>
    <script src="https://cdn.feedyou.ai/webchat/latest/botchat-es5.js"></script>
    <script>
      BotChat.App({
        directLine: { secret: '...' },
        bot: { id: 'feedbot-...', name: '...' }
        theme: { mainColor: "#e51836" },
        header: { text: "Chatbot", textWhenCollapsed: "Click for chatbot!" }
        // SEE "Advanced configuration" SECTION FOR MORE OPTIONS
      });
    </script>
  </body>
</html>

If you don't want to use polyfills for older browsers, you can use botchat.js instead of default botchat-es5.js.

If you want to make the expansion logic by yourself or you want to put bot directly into some existing element on your page, you can check out our examples:

Advanced configuration

You can use following optional settings during BotChat.App call:

bot: {
  id: string,
  name?: string
},
user?: {
  id?: string,
  name?: string
},
directLine: {
  secret: string,
  conversationId?: string,
  webSocket?: boolean = true
},
theme?: {
  mainColor?: string,
  enableScreenshotUpload?: boolean
},
header?: {
  text?: string,
  textWhenCollapsed?: string,
},
introDialog?: {
  id?: string // overrides default bot dialog which is started when user opens webchat
},
locale?: 'cs' | 'en' | 'sk' | 'sr' | 'hu' = 'cs',
userData?: object, // allows to preset some data we already know about user (email, phone, etc.)
startOverTrigger?: (trigger: () => void) => void, // can be used to binding onclick event on element which can be used to restart conversation
onConversationStarted?: (callback: (conversationId: string) => void) => void, // can be used to store conversationId for new conversations (useful for history persistence)
disableInputWhenNotNeeded?: boolean = false, // disables input after messages with `inputHint==='ignoringInput`
autoExpandTimeout?: number = null // auto expand in milliseconds (only in case when no element specified as second argument of BotChat.App())
openUrlTarget?: 'new' | 'same' | 'same-domain' // allows to change target of opening URLs from bot

URL parameters

WebChat looks for following parameters in the URL when implemented on any page:

  • #feedbot-test-mode sets testMode: true into the userData object enables test mode in the chatbot for given user
  • #feedbot-intro-dialog overrides default bot dialog which is started when user opens webchat and also value set by introDialog.id in the webchat settings

Window events

WebChat is listening for following custom events on global window object:

  • feedbot:trigger-dialog starts selected dialog specified in dialog property of CustomEvent (for example window.dispatchEvent(new CustomEvent('feedbot:trigger-dialog', { detail: 'package-status' })))
  • feedbot:start-over restarts conversation, which is the same behavior as startOverTrigger callback in config above (for example window.dispatchEvent(new CustomEvent('feedbot:start-over')))

If support of Internet Explorer is required, please provide use fallback to support custom event creation there.

Advanced customization

If you want to use WebChat directly as the component in your React app or you just want to customize it more than described above, check out the advanced README or contact Feedyou directly.

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact [email protected] with any additional questions or comments. -->

Copyright & License

© 2016 Microsoft Corporation

MIT License

About

Feedyou fork of BotFramework-WebChat - embeddable web chat control for the Microsoft Bot Framework

Resources

License

Stars

Watchers

Forks

Packages

 
 
 

Languages

  • TypeScript 88.7%
  • SCSS 6.8%
  • JavaScript 2.2%
  • HTML 1.8%
  • Shell 0.5%