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
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.
{
"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": "Image",
"url": "https://www.pngitem.com/pimgs/m/512-5125598_computer-icons-scalable-vector-graphics-user-profile-avatar.png",
"width": "100px",
"height": "100px",
"horizontalAlignment": "Center",
"backgroundColor": "b"
},
{
"type": "TextBlock",
"text": "Authentication failed",
"wrap": true,
"id": "auth-failed",
"isVisible": false,
"horizontalAlignment": "Center",
"spacing": "Large",
"color": "Attention"
},
{
"type": "TextBlock",
"text": "Username:",
"wrap": true,
"fontType": "Monospace",
"size": "Large",
"weight": "Bolder",
"color": "Attention"
},
{
"type": "Input.Text",
"placeholder": "Username",
"id": "username"
},
{
"type": "TextBlock",
"text": "Password:",
"wrap": true,
"fontType": "Monospace",
"size": "Large",
"weight": "Bolder",
"color": "Attention"
},
{
"type": "Input.Text",
"placeholder": "Password",
"id": "password"
}
],
"actions": [
{
"type": "Action.Submit",
"title": "Login",
"data": {
"message": "You have logged in Successfully",
"eventName": "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.
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"
}
}
}
]
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.