Search code examples
node.jsdialogflow-eswebhookskommunicate

How to trigger a customised welcome message from Dialogflow bot using kommunicate.io?


I have just started creating a bot using dialogflow and kommunicate.io. So, I created a simple bot and integrated it with kommunicate and finally copied the kommunicatesettings script in my HTML page. I am able to get simple responses from the bot. But now I want to set a different welcome message for every HTML page. So can this be done using kommunicatesettings? I tried :

    var kommunicateSettings = {"appId":"7519ee060abee2b532e8565aa0527ae","popupWidget":true,"automaticChatOpenOnNavigation":true, 
             "appSettings": {
                    "chatWidget": {
                      "popup": true           
                    },
                    "chatPopupMessage": [{
                      "message": "Wanna ask something related to "+document.title+ "?", 
                      "delay": 3000                    
                    }],

                    "text": {
                       "text": ["My welcome message!"]
                   }
                  }

    };
    var s = document.createElement("script"); s.type = "text/javascript"; s.async = true;
    s.src = "https://widget.kommunicate.io/v2/kommunicate.app";
    var h = document.getElementsByTagName("head")[0]; h.appendChild(s);
    window.kommunicate = m; m._globals = kommunicateSettings;
  })(document, window.kommunicate || {});

"text" in settings. But it is not able to do anything.

I want to show just the document title in the welcome message. So if some nodejs code for fulfillment can do that, it will be fine(document.title and window.location are not working in fulfillment code).


Solution

  • When a new conversation started and routed through the Dialogflow bot, Kommunicate triggers the Default Welcome Intent configured in Dialogflow console. However, You can customize a welcome message and set a different welcome message for your conversations dynamically. You have to create the events on the Dialogflow console and pass the event in customWelcomeEvent parameter. Below is the complete script :

    (function (d, m) {
        var kommunicateSettings = {
            "appId": "your-app-Id", 
            onInit: function (status, data) {
                if (status == "success") { 
                    Kommunicate.updateSettings({ "customWelcomeEvent": "welcome_event_for_home_page" }); 
                }
            }
        };
        var s = document.createElement("script"); s.type = "text/javascript"; s.async = true;
        s.src = "https://widget.kommunicate.io/v2/kommunicate.app";
        var h = document.getElementsByTagName("head")[0]; h.appendChild(s);
        window.kommunicate = m; m._globals = kommunicateSettings;
    })(document, window.kommunicate || {});
    

    You can update this setting dynamically when certain events occur on your website. This setting will be applied to all the new conversations that started after the update i.e. The conversation started after the setting is updated will trigger the new welcome event.

    Also, this setting can be used to show different welcome messages on different pages of your website.

    I hope it helps.