/ / Dialogflow (API.AI) Skype integration
DialogFlow ES

Dialogflow (API.AI) Skype integration

As you might know, Skype is one of the 1-click integrations available for Dialogflow.

But the real work begins after you add the 1-click integration from the console.

This article is focused on two main topics:

  1. How to render rich controls (such as a card) on the Skype bot
  2. How to get user’s responses to those rich controls (such as their button clicks) back into your Dialogflow context
Prerequisite: I expect that you have already created a Skype bot and you have gotten the basic conversation flow working inside the Skype bot.

Rendering a rich control on the Skype bot

This is based on the following thread:

https://discuss.api.ai/t/custom-payload-generated-programatically/10184

There is an important thing to consider: do you need just a Hero card, or do you need a more advanced card type? Both are possible, but the Hero card is a bit more straightforward. Here is what the hero card looks like:

Send this JSON to render the card above:

 

You can also show more complex card types on your Skype bot, but you need to use the custom payload for that. For example, this is a receipt card:

Here is the corresponding JSON:

Get user’s selection into Dialogflow context

So sending rich controls over to Skype is straight forward (once you figure out the correct JSON to be used).

However, getting information about a user’s selection on a Skype card is more tricky. This is especially important if you need to get a response from the user and the context in your chatbot will be set based on user’s click (a very common use case).

Unfortunately, its not as if you can somehow propagate a context from Skype to your Dialogflow agent. But we can solve this problem by going back to the basics.

There are three things to remember:

1. The value underlying a button or list item rendered inside your Skype bot is a plain string which can contain arbitrary spaces

2. When user presses the button inside the Skype bot, the entire text value is sent back to Dialogflow

3. Since you are communicating with an external service (in this case Skype’s API) you cannot use the external service’s context because it doesn’t have one (that is, you cannot “store” variables in the context of your Skype bot like you do within Dialogflow, you need to pull the variables back into the context of your Dialogflow agent first)

So here is how you do it:

  1. When you send JSON to your Skype bot, the text value underlying the button should be a string of the form “order Sushi”, or “order Tenpura” etc. It should have both the action the button should take, and also the parameter associated with that particular button
  2. When user clicks button, the whole text is sent back to Dialogflow

  3. In your next intent, the user says should be defined using the template mode. 

    E.g. UserSays: order @productname

  4. @productname is an entity with values such as Sushi, Tenpura etc.

  5. Dialogflow will now be able to map the incoming text response to the intent and will automatically extract the value “Tenpura” and place it into the context
  6. You can now use the extracted value from the agent like you normally would – that is, since it is already in the context of your Dialogflow agent, you can use the context parameter in the next turn, or you can send it to your webhook and so on

So, the important insight here is that you are encoding the action you must take (e.g. order) as well as the parameter name (e.g. Tenpura) into the “value” field of list item and you should create the JSON accordingly when you send it to your Skype bot. 

 

Push Button Dialogflow Bot Development

Want to accelerate your Dialogflow bot development? Using the BotFlo app you can:

Autoidentify Dialogflow intents from chat logs
Bulk upload Dialogflow intents from Excel or Google Sheets
Visually Edit Dialogflow Messenger Custom Payloads
Instantly Search across all your Dialogflow intents
Convert your WordPress website into a Dialogflow bot

Related Posts

  • Hi, I was having a problem using trying to handle http requests while trying to add a weather forecast function in my chatbot. I came around your perfect tutorial here: https://botflo.com/deploying-api-ai-nodejs-webhook-google-cloud-part-14-update-index-js-weather-webhook-code/

    it surely helped, but I my project uses Firebase CTL so I wanted to make a http request, the code don’t work for Firebase, i think the problem starts from ” http.get({host: host, path: path}, (resw) => { ” i really hope you can help… thanks so much in advance

    any code sample on http triggers handling on Firebase will be perfect
    thank you again and keep the good work coming

  • I managed to fix it here is what I do if anyone interested:
    1- search for “‘default’: () => {” after this down bellow “responseToUser”, uncomment this line “data: richResponsesV1,”

    Now back to your action handler and add this:

    ‘web.search’: () => {
    // Use the Actions on Google lib to respond to Google requests; for other requests use JSON
    var a = parameters[‘searchfor’];
    var r = a.replace(/ /g,”-“);

    if (requestSource === googleAssistantRequest) {
    if (app.hasSurfaceCapability(app.SurfaceCapabilities.SCREEN_OUTPUT)) {
    app.ask(app.buildRichResponse()
    // Create a basic card and add it to the rich response
    .addSimpleResponse(‘Here is what i found about ‘+parameters[‘searchfor’]+”)
    .addBasicCard(app.buildBasicCard(‘Here is what i found about ‘+parameters[‘searchfor’]+”)
    .setTitle(”+parameters[‘searchfor’]+”)
    .addButton(‘Press Here…’, ‘https://www.google.com.eg/search?source=hp&ei=FGOYWo-NFIvxUvH7sfgE&q=’+parameters[‘searchfor’]+”)
    )
    );
    } // Send Google response to user
    } else {
    //sendResponse(‘Here is what i found about ‘+parameters[‘searchfor’]+’ : https://www.google.com.eg/search?source=hp&ei=FGOYWo-NFIvxUvH7sfgE&q='+r+”); // Send simple response to user
    const websearch = {
    ‘facebook’: {
    ‘attachment’: {
    ‘type’: ‘template’,
    ‘payload’: {
    ‘template_type’: ‘generic’,
    ‘elements’: [
    {
    ‘title’: ‘Title: this is a title’,
    ‘subtitle’: ‘This is a subtitle’,
    ‘default_action’: {
    ‘type’: ‘web_url’,
    ‘url’: ‘https://assistant.google.com/’
    },
    ‘buttons’: [
    {
    ‘type’: ‘web_url’,
    ‘url’: ‘https://www.google.com.eg/search?source=hp&ei=FGOYWo-NFIvxUvH7sfgE&q=’+r+”,
    ‘title’: ‘This is a button’
    }
    ]
    }
    ]
    }
    }
    }
    };
    let responseToUser = {
    data: websearch,
    };
    //sendResponse(‘Here is what i found about ‘+parameters[‘searchfor’]+’ ‘);
    sendResponse(responseToUser);
    }

    },

    that is my working method of websearch 😀

    • Mohamed – Glad you got it figured out. Maybe you can put it into a GitHub gist, and come back and add a link to it in the comment. (Easier for people if they wish to use your code in their projects)

  • Hi i’m want to send a custom payload written in JSON, but I’m using the Firebase inline editor. So I’m looking for a way to send my JSON Response from the “Firebase inline editor”, I will be grateful if you can help

    what i’m trying to send is something like that :

    {
    “facebook”: {
    “attachment”: {
    “type”: “audio”,
    “payload”: {
    “url”: “https://example.com/audio/test.mp3”
    }
    }
    }
    }

  • Hi i’m want to send a custom payload written in JSON, but I’m using the Firebase inline editor. So I’m looking for a way to send my JSON Response from the “Firebase inline editor”, I will be grateful if you can help

  • hi sir good afternoon .. actually our website is developed in php, for that we r building a chatbot using api.ai with backend python ..
    So for that i build a cahtbot in api.ai and i put a web demo link in our website.. when click that opens a chat window and working fine.. but my problem is here user is giving his email id then we saving that in context and giving the response..
    Bt its not correct way so we should give his data only without giving his email.. example :: if user type ‘show my address’, then only we should provide his details without taking any user details like email.. mainthing we are providing chatbot after login only..
    So how can we get the user data automatically after login and how to send that data to api.ai using webdemo url and how to store that..

  • Hi,
    I was wondering how can integrate a regular chat (for customer service) into a chatbot. I’m designing a chatbot who help users to interact with a platform, but i want also to add, for some specific topics, a person-to-person chat in order to achieve some actions. The general idea is that when a user get to a complex topic a real person could help him.
    Have you tried this?

    *Other topic related is to create very specialized bots and join-them together into a orchestration bot who triggers a specialized topic-bot.

    I know these will represent a lot of coding (for web chat), but what about integrations (as Facebook or Slack)? I’m not a skilled programmer, but I want to get the shorter way to achieve it.

    I will appreciate you comments from your experience about these topics.

    Thanks,