❤
npm
Sign UpSign In

botpress-mod-webchat

0.5.0 • Public • Published

botpress-mod-webchat (BETA)

Official Webchat connector module for Botpress. This module allows you to embed your chatbot on any website and also allows you to serve it as a full-screen web app.

Installation

Using NPM

npm install botpress-mod-webchat

Using Yarn

yarn add botpress-mod-webchat

Using Botpress

botpress install botpress-mod-webchat

How to use it

[TODO] More instructions coming.

Note on Views

You can talk to it and use it in different views (mobile, web, embedded), see section below to have the detail.

Supported messages

Sending Text

content.yml
welcome:
  - Hello, world!
  - This is a message on Messenger!
  - text: this works too!
    typing: 2s
  - |
    This is a multi-line
    message :).
Quick replies
content.yml
welcome:
  - text: Hello, world!
    typing: 250ms
    quick_replies:
      - <QR_YES> Yes
      - <QR_NO> No
Web form
content.yml
welcome:
  - text: Hello, world!
    typing: 250ms
    form:
      title: Survey
      id: survey
      elements:
        - input:
            label: Email
            placeholder: Your email
            name: email
            subtype: email
            required: true
        - textarea:
            label: Text
            placeholder: Your text
            name: text
            maxlength: 100
            minlength: 2

It's look's like a usually web form. After submitted, you can handle this event with botpress.hear method. For example:

bp.hear({ type: 'form', formId: "survey" }, (event, next) => {
    // Your code
});

You can always catch formId in the hear function, because Id is not an option in the form element. You choose a value to go with your id keys.

welcome: 
  - text: "Welcome"
    typing: 250ms
    form:
      title: welcome
      id: welcome
      ...
      ...
 
 
form-email:
  - text: Provide me your email 
    form:
      title: Email
      id: email
      ...
      ...
# 

in your bp.hear function

bp.hear({type:'form',formId:'welcome'},(event,next))=> {} // welcome content
bp.hear({type:'form',formId:'email'},(event,next))=> {} // form-email content
Form Elements

input

Has next attributes: label, name, placeholder, subtype, required, maxlength, minlength, which works like a same attributes in html5 (subtype is a same as type in html5)

textarea

Has a same attributes like input, but has no subtype attribute

select

Has a same attributes like textarea, but has no maxlength and minlength attributes, and has options attribute, which contain an option elements.

Example:

- select:
    label: Select one item
    name: select
    placeholder: Select one option
    options:
      - option:
          label: "Hindu (Indian) vegetarian"
          value: "hindu"
      - option:
          label: "Strict vegan"
          value: "vegan"
      - option:
          label: "Kosher"
          value: "kosher"
      - option:
          label: "Just put it in a burrito"
          value: "burrito"

Other type of messages

We are still working on other type of messages to increase the power of this module. Botpress is a community effort, so Pull Requests are welcomed.

  • Caroussel (soon)
  • Image (soon)
  • Video (soon)
  • Audio (soon)
  • Location Picker (soon)
  • Web Widgets (soon)

Supported views

Mobile View (Fullscreen)

When your bot is running, you can have access to a mobile view at ${HOSTNAME}/lite/?m=platform-webchat&v=fullscreen (e.g http://localhost:3000/lite/?m=platform-webchat&v=fullscreen).

This URL is public (no authentication required) so you can share it we other people.

Web View (Embedded on Websites)

To embedded the web interface to a website, you simply need to add this script at the end of the <body> tag. Don't forget to set the hostname correctly to match the public hostname of your bot.

<script>
  window.botpressSettings = {
    hostname: "botpress.pagekite.me" // <<-- Change this to your bot hostname
  };
</script> 
<script>
  !function(){function t(){var t=n.createElement("script");t.type="text/javascript",t.async=!0,t.src="https://"+a.hostname+"/api/botpress-mod-webchat/inject.js";var e=n.getElementsByTagName("script")[0];e.parentNode.insertBefore(t,e)}var e=window,a=e.botpressSettings,n=document;e.attachEvent?e.attachEvent("onload",t):e.addEventListener("load",t,!1)}();
</script> 

Customize the view

A configuration file (botpress-mod-webchat.config.yml) has been created at the root of your bot when you installed the module. You can change these values to change the look and feel of the web chat.

# DEFAULT SETTINGS 
botName: 'Bot' ## Name of your bot 
botAvatarUrl: null ## Default avatar url of the image (e.g. 'https://avatars3.githubusercontent.com/u/1315508?v=4&s=400' ) 
botConvoTitle: 'Technical Support' ## Title of the first conversation with the bot 
botConvoDescription: 'This is a description'
 
# POPUP CONVERSATION SETTINGS 
welcomeMsgEnable: true
welcomeMsgDelay: 1000
welcomeMsgText: | ## Welcome message that shows at on pop-up (multi-lines)
  Hey guys!
  Curious about our offer?
  This is the default message...
 
# COLOR SETTINGS 
backgroundColor: '#ffffff' ## Color of the background  
textColorOnBackground: '#666666' ## Color of the text on the background 
foregroundColor: '#0176ff' ## Element background color (header, composer, button..) 
textColorOnForeground: '#ffffff'  ## Element text color (header, composer, button..) 

Note

You need to restart your bot by running bp start again for new settings to be effective.

Community

There's a Slack community where you are welcome to join us, ask any question and even help others.

Get an invite and join us now! 👉 https://slack.botpress.io

License

Licensed under AGPL-3.0

Readme

Keywords

none

Package Sidebar

Install

npm i botpress-mod-webchat

Repository

github.com/botpress/botpress-mod-webchat

Homepage

github.com/botpress/botpress-mod-webchat

Weekly Downloads

0

Version

0.5.0

License

AGPL-3.0

Last publish

Collaborators

  • monarch0111
Try on RunKit
Report malware