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

  1. Send an event from your website
  2. 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.


Simon

I am a Fullstack developer and Consultant with an experience of 9+ years in the industry. I mainly work on Java, React, Javascript, NodeJs, Elasticsearch and Botpress.

6 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.

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?

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' }
    })

Leave a Reply

Your email address will not be published. Required fields are marked *