The login directive enables the admin users to add a login button to your chatbot flow. The button click redirects the user to Orbita’s user login page in a new tab. If the user successfully logs in, the login tab closes automatically.
In the below example, we invoking Login intent will use the flow studio and prompt the user to login to continue chatting with the chatbot.
Flow studio
We will create a flow studio flow and add a Custom control followed by a Single input node at the beginning of the flow (as shown below) to prompt the user to login.
...
Then we add an Evaluate node to check if the user logged in successfully.
If true, the flow continues
If anything else, the flow ends with an authentication error message.
...
trigger the Login Directive in the chatbot.
...
Create Intents
You can create intents from the Project Side navigation menu > Create > Intent Library.
...
In this example, we have used two intents Login and Loginsuccess.
Login Intent
In this example, the Login intent is used to invoke the Login Directive.
...
Loginsuccess Intent
In this example, the Loginsuccess intent is triggered after the user logs in successfully.
...
The Loginsuccess intent should contain success as one of its utterances.
Experience Designer
In the Experience Designer, design a flow as shown below.
...
Use the below code in a the function node to enable use the login directive as shown below.
...
Code Block |
---|
if(!msg.payload.orbita) { msg.payload.orbita = {}; } if(!msg.payload.orbita.directive) { msg.payload.orbita.directive = []; } msg.payload.orbita.directive.push({ type: 'login', successUtterance: 'success', html: `<button class="smrtBtn chattheme chatthemeborderbuttonsloginButton">Login</button>` }) msg.payload.orbita.logoutUrlsstate = [{ 'type': 'window', url:'http://localhost:3030/oauth/logout?' }]; return msg; |
You have to set a session variable to know if a user successfully logged in. Use the below code in the function node.
Code Block |
---|
msg.orbita.session.isLogin = true;
return msg; |
...
"Login"
return msg; |
Customizing the login button
You can customize the login button by using CSS to style it.
...
Go to the Bot Manager flow > Bot View template Node > Custom CSS tab, and place the below code.
Code Block |
---|
.loginButton {
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
background-color: #4CAF50;
} |
...
Ensure the class name loginButton
matches the one used in the Login Directive code for the login button.
How to get Inline login
You can make use of the HTML directive and load the Login page within the Chat bubble.
...
You should know the URL of the login page for to get Inline login in the Chatbot. See, HTML Directive
...
For the inline login, you should note the login page URL of your instance.
The easiest way to To get the URL is to login page URL of your instance, use the login directive and copy Login Directive and click the Login button. Copy the URL of the login tab (this will be opened opens in a new tab) when you click the login button.and place it in the URL property in the code below.
Place this sample code in a function node and connect it as shown in the screenshot.
...
Sample code
Code Block |
---|
if(!msg.payload.orbita) { msg.payload.orbita = {}; } if(!msg.payload.orbita.directive) { msg.payload.orbita.directive = []; } msg.payload.orbita.directive = [{ type: "html5", options: { template: '500x600450x500', url :"https://environment.orbita.cloud:8443/oauth/login?response_type=code&redirect_uri=https://environment.orbita.cloud:8443/oeapi/bot/support&scope=personaldata&client_id=*****" } }] |
...
"<Login page URL of your Instance>"
},
loginSuccessUtterance: 'success'
}]
msg.payload.orbita.state = "Login"
return msg; |
Info |
---|
You should use the |
The line msg.payload.orbita.state = "Login"
is optional.
If you choose not to use state, you should remove the state in the Loginsuccess Intent. See, How do I use state?
...
The Login Directive and the Inline Login are combined in a single flow in the below attachment.
Attachments | ||||||
---|---|---|---|---|---|---|
|
Related articles
Filter by label (Content by label) | ||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|