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

A few questions. Are you unable to include the React scripts on your page in the same manner that they are on line 10 of the "post-activity-event" sample? Can you update your post to also include the code for your button since it is missing. — Steven Kanberg, Apr 27 '23 at 22:09

score 0 · Answer 1 · answered Apr 28 '23 at 18:43

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

Send Message to bot Framework Programmicaly using Vanilla javascript

1 Answers1