Send Message to bot Framework Programmicaly using Vanilla javascript

Question

I want know how can send a message programically using javascript. I used this script for load botframework:

(async function() {
    const res = await fetch("https://MYURLPRIVATE/api/directline/token", {
        "method": "GET"
    });
    const {
        token
    } = await res.json();
    var t;
    t = token;
    console.log(token);
    var styleOptions = {
        hideUploadButton: true,
        timestampFormat: 'absolute'
    };
    const store = window.WebChat.createStore({}, ({
        dispatch
    }) => next => action => {
        return next(action);
    });
    window.WebChat.renderWebChat({
        directLine: window.WebChat.createDirectLine({
            token
        }),
        locale: 'it-IT',
        styleOptions
    }, document.getElementById('chatTranscript'));
    document.querySelector('#chatTranscript > *').focus();
})().catch(err => insertError(err))

I created a pastebin https://pastebin.com/FEYkNd8j with script shared before.

Then Bot Framework is loaded inside a DIV with id chatTranscript.

I have other button outside the div( id chatTranscript ) where (after click message from user) I want send message on bot framework.

I populate the input with a value "hi" and simulate a click using Jquery on right button. The script work correct but the result is that the word hi is vanished on input type="text" and wasn't send on Bot Azure or/and not showed on bubble user.

Then where I wrong? There is an example on your documentation in this path:"BotFramework-WebChat\samples\04.api\d.post-activity-event" but I can't use this

script ReactDOM.render("<Composer directLine={directLine}><BasicWebChat /><SendHelpMessageButton /></Composer>,document.getElementById('chatTranscript')");

because I not have ReactJS on my server.

Please I can have some suggestions for send message using Javascript? Thank you

Answer 1

While you can certainly simulate a click on the UI to initiate sending a message, the best practice would be to utilize Web Chat's functionality. In this case, on button click, it would get the value of the send box and pass the value into store.dispatch() to send the message from the client to the bot. Your code would look something like the below. This sample code is a basic implementation that you would want to spruce up. For instance, clearing the send box after the message is sent, don't send if the value is empty, etc.

(async function() {
    const res = await fetch("https://MYURLPRIVATE/api/directline/token", {
        "method": "GET"
    });
    const {
        token
    } = await res.json();
    var t;
    t = token;
    console.log(token);
    var styleOptions = {
        hideUploadButton: true,
        timestampFormat: 'absolute'
    };
    const store = window.WebChat.createStore({}, ({
        dispatch
    }) => next => action => {
        return next(action);
    });
    window.WebChat.renderWebChat({
        directLine: window.WebChat.createDirectLine({
            token
        }),
        locale: 'it-IT',
        styleOptions
    }, document.getElementById('chatTranscript'));
    document.querySelector('#chatTranscript > *').focus();
})().catch(err => insertError(err));

// Gets value of the send box
const sendBoxValue = document.getElementsByClassName( 'webchat__send-box-text-box' )[ 0 ].children[ 0 ].value;

// Sends the value as a new message
const btn = document.getElementById('otherButton');
btn.onclick = (e) => {
    e.preventDefault();
    store.dispatch( {
        type: 'WEB_CHAT/SEND_MESSAGE',
        payload: {
            text: sendBoxValue
        }
    } )
}