
Security News
Deno 2.2 Improves Dependency Management and Expands Node.js Compatibility
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
botpress-channel-web-mod
Advanced tools
This channel is a customizable web chat that can be:
yarn add @botpress/channel-web
⭐ See the full list of supported messages
'#text': data => [
{
on: 'webchat',
typing: true,
text: data.text,
markdown: true
}
]
typing
(optional)Can be true
to use natural typing speed (based on characters length) or can also be a natural time string (parsed by ms module
).
markdown
(optional)Can be true
to render the text as markdown format. This allows you to include links, bold and italic text.
web-style
(optional)web-style
(optional) will pass the arguments as DOM style properties. This allows you to customize how specific messages look.
web-style: {
color: "rgb(24, 1, 187)",
borderLeft: "2px solid rgb(11, 8, 162)",
padding: "10px",
fontWeight: "600",
fontSize: "20px",
fontFamily: "'Lato', sans-serif" }
quick_replies
(optional)Array of string, with the <PAYLOAD> Text
format.
quick_replies: data.choices.map(choice => `<${choice.payload}> ${choice.text}`)
content.yml
'#form': data => [
{
on: 'webchat',
typing: true,
markdown: true,
text: data.text,
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': data => [
{
on: 'webchat',
text: 'Welcome',
typing: '250ms',
form: {
title: 'welcome',
id: 'welcome',
/* ... */
}
}
]
'#form-email': data => [
{
on: 'webchat',
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'
}
}
]
}
}
elements
(required)Array of element
objects
element.title
(required)String
element.picture
(optional)String (URL)
element.subtitle
(optional)String
element.buttons
(optional)Object | { url: 'string', title: 'string', text: 'string', payload: 'string' }
When provided with payload
instead of url
, acts similarly to quick replies.
settings
(optional)Settings to pass the react-slick
component
In your index.js
file, add this:
const config = {
botName: '<<REPLACE>>',
botAvatarUrl: '<<REPLACE BY URL>>',
botConvoTitle: '<<REPLACE>>',
botConvoDescription: '<<REPLACE>>',
backgroundColor: '#ffffff',
textColorOnBackground: '#666666',
foregroundColor: '#000000',
textColorOnForeground: '#ffffff',
showUserName: false,
showUserAvatar: false,
enableTranscriptDownload: false
}
bp.createShortlink('chat', '/lite', {
m: 'channel-web',
v: 'fullscreen',
options: JSON.stringify({ config: config })
})
Now your bot is available at the following url: <BOT_URL>/s/chat
, e.g. http://localhost:3000/s/chat
.
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 host
correctly to match the public hostname of your bot.
<script src="<host>/api/botpress-platform-webchat/inject.js"></script>
<script>window.botpressWebChat.init({ host: '<host>' })</script>
You can customize look and feel of the web chat by passing additional keys to init
method like this:
window.botpressWebChat.init({
host: '<host>',
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: '',
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..)
showUserName: false, // Whether or not to show the user's name
showUserAvatar: false, // Whether or not to show the user's avatar
enableTranscriptDownload: false, // Whether or not to show the transcript download button
customStylesheet: '', // Url to custom .css file
greetingScreen: {
type: 'blank_chat', // If you want to see "Get started" button you need to change it to 'get_started'
options: {
buttonTitle: 'Get Started',
message: ''
}
},
filterQuickReplies: false // If you have a lot of quick replies, you can apply a search filter on them
})
You can also use window.botpressWebChat.configure
method to modify web chat options after it's initialized.
Style for silver background
.botpress__side-internal {
background-color: rgb(255, 255, 255);
border: 1px solid rgba(0, 0, 0, .3);
}
.botpress__side-external .botpress__side-internal .botpress__side-header {
border-bottom: 2px solid #fff;
}
.botpress__side-header-bot-name,
.botpress__message-date,
.botpress__side-item-name,
.botpress__side-internal .botpress__side-header .botpress__toggle-convos-button i,
.botpress__side-internal .botpress__side-header .botpress__close-button i {
color: #fff;
}
.botpress__side-conversation,
.botpress__side-header,
.botpress__convos-list {
background-color: rgba(0, 0, 0, .3);
}
.botpress__side-external .botpress__side-internal .botpress__side-conversation .botpress__side-conversation-bottom .botpress__side-new-message {
background-color: transparent;
}
.botpress__side-external .botpress__side-item-right .botpress__side-item-title .botpress__side-item-date span,
.botpress__side-external .botpress__side-internal .botpress__convos-list .botpress__convo-item .botpress__side-item-right .botpress__side-item-text {
color: #000;
}
.botpress__side-external .botpress__side-internal .botpress__convos-list .botpress__convo-item:hover {
background-color: rgba(0, 0, 0, .35);
}
You can open/close sidebar programmatically by calling window.botpressWebChat.sendEvent
with { type: 'show' }
or { type: 'hide' }
.
You can add ref
query parameter to url(example bot/s/chat?ref=[content]
) and all content will be set to user state as webchatUrlQuery
. User state could be fetched via DialogStateManager.
A configuration file has been created in the config
directory of your bot when you installed the module. You can change these values to set up S3 integration.
FAQs
An embeddable web chat for Botpress bots
The npm package botpress-channel-web-mod receives a total of 1 weekly downloads. As such, botpress-channel-web-mod popularity was classified as not popular.
We found that botpress-channel-web-mod 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
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
Security News
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.