botpress-platform-webchat
Advanced tools
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.
npm install botpress-platform-webchat
yarn add botpress-platform-webchat
botpress install botpress-platform-webchat
[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.
content.ymlwelcome:
- Hello, world!
- This is a message on Messenger!
- text: this works too!
typing: 2s
- |
This is a multi-line
message :).
content.ymlwelcome:
- text: Hello, world!
typing: 250ms
quick_replies:
- <QR_YES> Yes
- <QR_NO> No
content.ymlwelcome:
- 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
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"
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.
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.
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-platform-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>
A configuration file (botpress-platform-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 startagain for new settings to be effective.
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
Licensed under AGPL-3.0
FAQs
An embeddable web chat for Botpress bots
The npm package botpress-platform-webchat receives a total of 10 weekly downloads. As such, botpress-platform-webchat popularity was classified as not popular.
We found that botpress-platform-webchat demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.
Security News
A Stanford study reveals 9.5% of engineers contribute almost nothing, costing tech $90B annually, with remote work fueling the rise of "ghost engineers."
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.