How to call custom API after an action in Adaptive Cards

Owned by Rajkiran Alla (Deactivated)
Last updated: Sept 10, 2021 by Andrew Eddy
3 min read

This document talks about how to use Adaptive cards to call custom API for a button click on the Adaptive card.
When the chatbot user clicks on a button in the adaptive card, the system will call a custom API that is configured for that button click.

In this example, you will design a flow that allows anonymous users to enter email and password and signup.

After the chatbot user provides his/her email and password, a verification mail is sent to the user. Only after clicking on the verification link, he/she will become an Orbita user.

This file contains the Experience Designer flow used for this example.

Adaptive card

Create an Adaptive card that takes user input (email and password). Refer

Experience Designer

  1. Design a flow as shown in the screenshot below.

  2. The success callback and error callback template nodes should be configured as shown below.

    1. Success callback

      function (data, status, xhr) { self.submitQuery("Create Account"); }

       

       

    2. Error callback

      function (xhr) { let error = xhr.responseJSON.reason; error = '**'+error+'**'; if( document.getElementById('errorMsg') !== null) { $("#"+cardId).find('#errorMsg').html('<div><p>' + error + '</p></div>'); } else { $("#"+cardId + " .ac-container").append("<div id='errorMsg' style='color:red; padding-top:10px; text-align:center; line-height:normal;'>"+error+"</div>"); } $("#"+cardId).find('button').removeAttr("disabled"); }

       

       

  3. Add the below code to the “create new user“ function node after the callback nodes in the Experience Designer.

    const _ = global.get('lodash'); const directive = _.get(msg, 'payload.orbita.directive', null); if(directive && directive.length > 0) { const adaptiveCard_data = directive[0].template.actions[2].data; adaptiveCard_data.serviceCall = { "url": "/api/users/signup", "type": 'POST', "successCallback": msg.payload.successCallback, "errorCallback": msg.payload.errorCallback, }; } return msg;

The example adaptive card has 3 buttons hence the above code has const adaptiveCard_data = directive[0].template.actions[2].data; in line number 4.

If your adaptive card has only one button, the code should be modified to const adaptiveCard_data = directive[0].template.actions[0].data; in line number 4.

Chatbot

  1. An anonymous chatbot user will invoke the Adaptive card in the chatbot.

  2. The chatbot user will then give his/her email and password and clicks on the “Create account” button.

  3. The user will receive a verification link to his/her email.

     

  4. Clicking on “Confirm your Email” will create an account with Orbita.

If the chatbot user uses an email address that is already present in the database, he/she will be notified about it with the help of a message at the bottom of the adaptive card.

Related Articles