Table of Contents

You can use the adaptive cards to achieve this.Adaptive Cards

Please use this code in the Bot view template > Custom JS.

Code Block

setTimeout(function(){
// Select the node that will be observed for mutations
const targetNode = $('.chat-container');
// Options for the observer (which mutations to observe)
const config = { attributes: true, childList: true, subtree: true };
// Callback function to execute when mutations are observed
const callback = function(mutationsList, observer) {
  if( $('[placeholder=Password]').attr('type') === 'text') {
    $('[placeholder=Password]').attr('type', 'password');
  }
};
// Create an observer instance linked to the callback function
const observer = new MutationObserver(callback);
// Start observing the target node for configured mutations
observer.observe(targetNode[0], config);
}, 3000);

Then use an adaptive card. Please ensure that the placeholder is set as “Password“.

Use this sample code in the function node.

...

Adaptive Cards can be used to build and customize a variety of content. One of which is displaying Login in a Card. Read more about Adaptive Cards here.Adaptive Cards Guide

In this document, we will give you a sample code for a login card.

...

Also, see Login within a chatbubble.

Adaptive Card login

Go to Side menu > Design > Adaptive Cards.

Create an Adaptive Card to design your login card.

Paste the below code in the Card Payload Editor.

...

Use this code in the Adaptive Card to get a sample Login card in the Chatbot.

Code Block

{
    "type": "AdaptiveCard",
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.3",
    "body": [
        {
            "type": "RichTextBlock",
            "inlines": [
                {
                    "type": "TextRun",
                    "text": "Login"
                }
            ],
            "horizontalAlignment": "Center",
            "height": "stretch",
            "spacing": "ExtraLarge"
        },
        {
            "type": "AdaptiveCardImage",
            "$schemaurl": "httphttps://adaptivecards.io/schemas/adaptive-card.json",www.pngitem.com/pimgs/m/512-5125598_computer-icons-scalable-vector-graphics-user-profile-avatar.png",
            "width": "100px",
            "height": "100px",
            "versionhorizontalAlignment": "1.3Center",
            "bodybackgroundColor": "b"
[        },
    {    {
            "type": "TextBlock",
            "text": "Authentication failed",
            "wrap": true,
            "id": "auth-failed",
            "isVisible": false,
            "horizontalAlignment": "Center",
            "textspacing": "Type your Password here","Large",
            "color": "Attention"
        },
        {
            "idtype": "password_textTextBlock",
            "text": "Username:",
            "wrap": true,
            "fontType": "Monospace",
            "size": "Large",
            },
 "weight": "Bolder",
            "color": "Attention"
        },
    {    {
            "type": "Input.Text",
            "placeholder": "Username",
            "placeholderid": "Password",username"
        },
        {
            "idtype": "passwordTextBlock",
            } "text": "Password:",
            {
   "wrap": true,
            "typefontType": "ActionSetMonospace",
            "size": "Large",
            "actionsweight": ["Bolder",
            "color": "Attention"
      {  },
         {
            "type": "ActionInput.SubmitText",
            "placeholder": "Password",
            "titleid": "Submit",
  password"
        }
    ],
    "actions": [
        {
            "idtype": "submitAction.Submit",
            "title": "Login",
            "data": {
                "message": "You have logged in Successfully",
                "messageeventName": "Your password is saved",
    A-login"
            }
        }
    ]
}

In Experience Designer, design a flow as shown below.

...

In the Adaptive card node, choose the card that you created.

...

Add the below code in the function node named Login Actions.

V3 Bot code:

Code Block

var _ = global.get('lodash');
var index = _.findIndex(msg.payload.rawMultiagent[1].directive, {
    type: 'adaptivecard'
});
let directive = _.get(msg, 'payload.orbita.directive', null);
const version = _.get(msg, 'payload.originalDetectIntentRequest.payload.settings.version', 2);
if (version === 3) {
    directive = _.get(msg, 'payload.rawMultiagent[1].directive', null);
}
var adaptiveCard = directive[index];
adaptiveCard.template.actions = [{
    "type": "Action.Submit",
    "title": "Login",
    "style": "positive",

    "eventNamedata": {
        "A-passwordsubmit"serviceCall": {
            "url": "<Login directive tab URL goes here>",
             },"type": 'POST',
            "orbitaAction": 'login',
            "styleloginSuccessUtterence": "positive"
     success",
            "successCallback": "function(){ /*Custom business logic*/ }"
        }
    }
}]

msg.payload.orbita.directive[index] = adaptiveCard;
return msg;

V2 Bot code:

Code Block
var _ = global.get('lodash'); var index = _.findIndex(msg.payload.orbita.directive, { type:

...

'adaptivecard'
});
var adaptiveCard = _.find(msg.payload.orbita.directive, {
    type: 'adaptivecard'
});

adaptiveCard.template.actions = [{
    "type": "Action.Submit",
    "title": "Login",

...

"style": "positive",

    "data": {
        "

...

serviceCall": {
            "url": "<Login directive tab URL goes here>",
            "type": 'POST',

...

"orbitaAction": 'login',
            "

...

loginSuccessUtterence":

...

 "success",
            "

...

successCallback": "

...

function(){ /*Custom business logic*/ }"
        }
    }
}

...

]
msg.payload.orbita.directive[index] = adaptiveCard;
return msg;

Create an intent with “success” as one of its utterances. This intent will get triggered when the login is successful.

Versions Compared

Old Version 1

New Version Current

Key

Adaptive Card login

Related Articles

Page Comparison

Versions Compared

Old Version 1

New Version Current

Key

Adaptive Card login

Related Articles