Trigger Bot Events from the Web Page Hosting the Chatbot

Trigger a DRUID conversational flow

You can programmatically trigger a specific conversational flow from the web page hosting the chatbot, with or without context data (entity data set in the web page), using the sendEvent() function.

Event Syntax – Trigger a flow without updating the conversation context

DruidWebchat_v2.sendEvent({
    name: "flow_utterance"
})

Where:

• flow_utterance is the training phrase (utterance) defined in DRUID that triggers the flow.

Event Syntax – Trigger a flow and update the conversation context

DruidWebchat_v2.sendEvent({
    name: "<flow_utterance>", /* This is the training phrase that triggers the flow */
    value: {
        "$entityTypeName$": "entity_type", /* Corresponds to the entity type. Must be the first field in the payload */
        "EntityField": "entity_value"
    }
})

Example:

The following JavaScript code defines a function named 'example1' and assigns it to ;window.example1', making it globally accessible in the browser. When this function is executed, it triggers a DRUID conversational flow by sending an event (sendEvent) to the Druid Webchat with specific entity data:

• If the chatbot is open and connection established, it will trigger the "test sendEvent" conversational flow in DRUID.
• The chatbot will receive the [[Address]] entity with "City": "Bucharest" and "PostalCode": "050171", updating the conversation context.
• If the flow is designed to use this entity, the bot can process or respond accordingly.

window.example1 = () => {
    /*  
        Example data:  
        [[Address]].City = Bucharest  
        [[Address]].PostalCode = 050171  
    */

    DruidWebchat_v2.sendEvent({
        name: "test sendEvent",
        value: {
            "$entityTypeName$": "Address",
            "City": "Bucharest",
            "PostalCode": "050171"
        }
    })
}

Update the Conversation Context

You can update the conversation context without interrupting the current flow execution by using the sendEvent() function with a special utterance: "UpdateConversationContext".

DruidWebchat_v2.sendEvent({
    name: "UpdateConversationContext",
    value: {
        "$entityTypeName$": "entity_type", /* Corresponds to the entity type. Must be the first field in the payload */
        "EntityField": "entity_value"
    }
})

Send a user message in the chat

You can send a specific message in the chat on behalf of the chat user when they perform an action on the web page hosting the chatbot.

For example, this can be triggered when a user:

• Clicks a button
• Submits a form
• Completes an interaction.

DruidWebchat_v2.sendMessage("Your text message here");

Where:

• "Your text message here" is the message that will appear in the chat as if the user typed it.

document.getElementById("sendMessageButton").addEventListener("click", function() {
    DruidWebchat_v2.sendMessage("I submitted my order.");
})

When the user clicks the button with the ID "sendMessageButton", the chatbot receives the message "I submitted my order" as if the user manually entered it.

The chatbot can then respond based on its configured flows.