Is it possible to open widgets.getsitecontrol.com/ javascript from azure bot v4?

Question

I want to open widgets.getsitecontrol.com/ javascript page that I have implemented on my website. Whenever I type 'Help' inside my bot, the widget should open. Is it possible to open it? Thanks. I am using node js version. If it is possible, please provide me an approach to solve this issue.

Answer 1

I'm not sure exactly how your widget functions, but when the user sends a 'help' message to the bot, you can send a back channel event to WebChat to trigger opening the widget. Take a look at the code snippets below.

Bot Code - NodeJs

When the bot receives a 'help' message from the user, the bot can send an event by sending an activity with the type set to 'event'. We can also give the outgoing activity a name attribute so we can send mutltiple types of events to WebChat. In this case, we are going to name the out going activity 'helpEvent'.

async onTurn(turnContext) {
    if(turnContext.activity.type === ActivityTypes.Message) {
        if (turnContext.activity.text.toLowerCase() === 'help') {
            // Send Back Channel Help Event
            await turnContext.sendActivity({ type: 'event', name: 'helpEvent'});
        }
    ...
    }
}

WebChat Custom Middleware

In WebChat, we are going to create a custom middleware to check incoming activities. When we encounter an activity that has a name and type that we recognize, trigger your event on the webpage. In the example below, I just alerted the use that they asked for help, but here is where you launch your widget.

const store = window.WebChat.createStore(
    {},
    ({ dispatch }) => next => action => {
        if (action.type === 'DIRECT_LINE/INCOMING_ACTIVITY') {
          const { name, type } = action.payload.activity;

          if (type === 'event' && name === 'helpEvent') {
            // Activate Widget 
            alert("You asked for help.");
          }
        }
        return next(action);
    }
);

window.WebChat.renderWebChat({
    directLine: window.WebChat.createDirectLine({ token }),
    store,
}, document.getElementById('webchat'));

For more details on back channel events and creating a custom middleware in WebChat, checkout this sample in the WebChat Repo.

Hope this helps!