| Table of Contents |
|---|
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 sample code in the Adaptive Card to get the a sample Login card in the Chatbot.
...
In Experience Designer, design a flow as shown below.
...
Choose In the Login Adaptive card in node, choose the Adaptive card nodethat 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.orbitarawMultiagent[1].directive, {
type: 'adaptivecard'
});
let var adaptiveCarddirective = _.findget(msg., 'payload.orbita.directive', { type: 'adaptivecard'}null);
const adaptiveCard.template.actionsversion = [
_.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",
"titledata": "Login", {
"serviceCall": {
"styleurl": "positive",<Login directive tab URL goes here>",
"type": 'POST',
"dataorbitaAction": 'login',
{ "loginSuccessUtterence": "success",
"serviceCall "successCallback": "function(){ /*Custom business logic*/ }"
}
}
}]
msg.payload.orbita.directive[index] "url": "<Login directive tab URL goes here>",
= 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.
...