You may want your bot to speak first when launched on your website. Example: Greet the user or show a context-based recommendation, and then the user can start the conversation accordingly. In this tutorial we will see how to act proactively in Botpress.
To make the bot act proactively, below 2 steps are required
- Send an event from your website
- Catch the event on built in hook
Send an event from your website
When you open your bot from your website (check How to embed bot in your site? guide) you need to send an event.
window.botpressWebChat.sendEvent({
type: 'proactive-trigger',
channel: 'web',
payload: {
text: 'Hi, I am Pro active'
}
})
Catch the event on built in hook
The above event will be dispatched to your bot. Now we need to catch the above ‘proactive-trigger’ event and handle it. If it is not handled, it will be treated as a user message.
The handler should be added in before_incoming_middleware hook located data/global/hooks/before_incoming_middleware.
Create a file out\bp\data\global\hooks\before_incoming_middleware\builtin\custom_event_handler.js
This hook is called when an event is received before any middleware is loaded. For example, if you want to send a proactive message only to new users.
if (event.type === 'proactive-trigger') {
// Identifying if the session is new
if (event.state.session.lastMessages.length) {
// This will tell the dialog engine to skip the processing of this event.
event.setFlag(bp.IO.WellKnownFlags.SKIP_DIALOG_ENGINE, true)
//Optionally you can add below statement to reply using available content type
bp.cms.renderElement('builtin_text', { text: "I'm so proactive!", typing: true }, eventDestination).then(payloads => {
bp.events.replyToEvent(event, payloads)
})
}
}
That’s it, below is the full script tag that you should use in your website
<script>
window.botpressWebChat.init({
host: 'http://localhost:3000',
botId: 'testbot',
userId: 'Abhishek Simon',
extraStylesheet: 'http://localhost:3000/assets/modules/channel-web/infa-style.css'
})
window.addEventListener('message', function(event) {
//Identifies when the bot bubble is clicked and the sends 'proactive-trigger' event
if (event.data.name === 'webchatOpened') {
window.botpressWebChat.sendEvent({
type: 'proactive-trigger',
channel: 'web',
payload: {
text: 'Hi, I am Pro active'
}
})
}
})
</script>
That’s all is required to act proactively in Botpress.
7 Comments
richa · February 24, 2020 at 12:19 pm
i want to change the bot chat style can u share some reference code or tutorial on hoe to achieve that on web channel.
Simon · February 24, 2020 at 12:29 pm
I have a post with some example on customizing the bot style on the web channel. Please have a look at below blog post.
https://aabingunz.com/how-to-use-a-custom-css-in-botpress/
Oshin Bansal · March 18, 2020 at 5:14 pm
I want to make a custom action. But the variable of my .js file isn’t being taken by the dialog engine to further proceed my code. How do I know where my variable’s value is storing or what to do with action parameter so that further flow of my bot proceeds?
Simon · March 18, 2020 at 9:02 pm
@Oshin There are a few set of variables defined by Botpress which you should use for this purpose example user, session, temp etc. Have a look at below tutorial for more information.
https://aabingunz.com/botpress-tutorial-how-to-create-actions/
kenneth kaigu · April 9, 2020 at 3:06 am
Nice tutorial … on your you tube video… there are 2 responses …
hi
i am proactive
how do you make it do that?
Simon · April 10, 2020 at 10:29 pm
@kenneth kaigu Use 2 text types in your main flow and use below 2 statements in before_incoming_middleware, where temp_start_node is your start node.
await bp.dialog.jumpTo(stateId, event, 'main.flow.json', 'temp_start_node');await bp.dialog.processEvent(stateId, event)
Also, in your embed script, simply use below snippet
window.botpressWebChat.sendEvent({type: 'proactive-trigger',
channel: 'web',
payload: { text: 'fake message' }
})
Rishabh · October 25, 2021 at 5:06 pm
I have tried this but it didnt work for me. I have change the host and bot and created a file handler.js in (before incoming middleware) but my bot is not showing any response.
Please help.