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

Question

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

score 2 · Answer 1 · answered Jan 18 '20 at 19:54

2

you can enable and customise the default welcome intent in DialogFlow which Kommunicate triggers when a conversation is routed through the bot (for example upon page reload and the init of the Kommunicate plugin).

I am not sure you can customise the Welcome page for each page, at least not easily.
One approach to try is to pass some custom data to DialogFlow

var chatContext = {
"key1":"value1",
"key2":"value2"
}
Kommunicate.updateSettings({"KM_CHAT_CONTEXT":chatContext})

which is then passed on to the webhook

"originalDetectIntentRequest": {
"payload": {
 "key1": "value1",
 "key2": "value2"
 }
}

I think it can eventually be used to personalise your welcome message.

answered Jan 18 '20 at 19:54

Beppe C

11,256
2
19
41

Yes I tried this Beppe C. But it says "Kommunicate object not defined". We need to declare "chatContext" in the kommunicate script that we have added to our HTML, right? And the "originalDetectIntentRequest" in the package.json or in the index.js? Sorry for such stupid questions but I'm really struggling with this for the past few days. – Shashank Gupta Jan 20 '20 at 04:40
Yes, kommunicateSettings var defines the chatbot attributes (i.e. appId), see https://docs.kommunicate.io/docs/web-installation#web-installation – Beppe C Jan 20 '20 at 08:22

score 2 · Accepted Answer · answered Jan 24 '20 at 09:44

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.

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

2 Answers2