Tell Botpress to open the embedded chat in a hook

Hello,

I am new to JavaScript and Botpress. I am trying to make Botpress open the embedded chat on the embedded-webchat.html webpage by adding some logic to a hook. The hook will execute some logic that may decide to open the chat. How do I tell the chat window to open for a specific session in a hook? I was looking at doing bp.events.sendEvent and sending an event with type : ‘show’ (based on looking at the example webpage embedded-webchat.html which has the show/hide buttons), but I can’t seem to get it to work because it never seems happy with the arguments I give it (below). Is there an example of how to do this? Thank you.

bp.events.sendEvent({ type: ‘show’, channel: ‘web’, target: ‘’, botId: ‘my-bot’, threadId: ‘’ })

1 Like

Hie @user123, welcome to the Botpress experience.

Please clarify why you want to perform this particular action in a hook and where in the event engine this hook is executed. Please also share the hook you are trying to execute.

I am working in my before_incoming_middleware hook. So far I have made the bot send a message when the chat is loaded (as in the documentation Acting Proactively · | Developer's Guide). It then listens for an event from my external API that will tell it to open the chat in the webpage (I’m using the http://localhost:3000/assets/modules/channel-web/examples/embedded-webchat.html webpage for testing).

My code is below:

function hook(bp: typeof sdk, event: sdk.IO.IncomingEvent) {
  /** Your code starts below */

  // Catch the event sent from the webpage
  if (event.type === 'proactive-trigger') {
    const eventDestination = {
      channel: event.channel,
      target: event.target,
      botId: event.botId,
      threadId: event.threadId
    }

    event.setFlag(bp.IO.WellKnownFlags.SKIP_DIALOG_ENGINE, true)

    bp.cms
      .renderElement(
        'builtin_text',
        {
          text: "Welcome to the bot, ask a question!",
          typing: true
        },
        eventDestination
      )
      .then(payloads => {
        bp.events.replyToEvent(event, payloads)
      })



  // Event listener that receives an event from external API when it's time to open the chatbot
  
// need something like this that will tell the chatbot to open on the webpage
    bp.events.sendEvent({ type: 'show', channel: 'web', target: 'abc', botId: 'my-bot', threadId: '123' })   


  }

  /** Your code ends here */
}

Can you please let me know how to prompt the chat to open in this way? If this is not the best location to execute this logic, will you please let me know where I should put it? Thank you very much.

Hie @user123

I suggest handling the instruction to show your web page. With this approach, you can trigger the show event from any action on your web page. You can listen for the instruction from your API and show the webchat when the instruction is received

Ok, thank you very much.