Page Comparison

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 will use the flow studio In this document, you will learn to use the Login Directive in the Flow Studio and prompt the user to login to continue chatting with the chatbot.

Flow studio

We will create Create a flow studio flow and add conversation flow using the Flow Studio.

Add a Custom control followed by a Single input Input control 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.

...

Experience Designer

Use the below code in a function node to enable the login directive as shown below.

...

...

When execution reaches the Custom control, Orbita directs the response to the 3rd pin of the Flow Manager node in Experience Designer. (See Flow Manager Node documentation for more information.)

In the Experience Designer, connect a Function node to the 3rd pin of the Flow Manager node to execute your custom logic (Login Directive in this example).

...

Experience Designer

Add a Function node to the 3rd pin of the Flow Manager Node.

If you have multiple Custom controls in the Flow Studio flow, you can connect a Switch node to the third pin to forward the message to the corresponding outputs based on the matching rules (Custom Control IDs in this example).

...

The property path for Control ID

msg.payload.session.attributes.orbitaSession.flowInfo.controlId

Design a flow as shown below in the Experience Designer.

...

Use the below code in the Login Directive function node. For more information on Login Directive, see How to use Login Directive

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.logoutUrls = [{
    'type': 'window', 
    url:'http://localhost:3030/oauth/logout?'
}]; 

return msg;

Create an intent that contains success as one of its utterances.

Add a function node (Setting sessionvariable) to the intent and connect it to the Flow Manager node.

You have to set a session variable to know if a user successfully logged in. Use the below code in the Setting sessionvariable function node for the same.

msg.orbita.session.isLogin = true;
return msg;

...

In the conversation flow in the Flow Studio, add an Evaluate control to check if the login is successful.

1. Choose Custom in the input node list.

2. In the input field add the property msg.orbita.session.isLogin.

3. For Pin P1, create a logic if the input property equals “true”.
   If true, the pin P1 will get triggered
   If anything else, the pin named Default pin will get triggered.

...

To render 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 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 buttonand place it in the URL property in the code below.

To use the inline Login, replace the code in the Login Directive function node with the below code in the Experience Designer.

Sample code

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'
}]

...

return msg;

Related articles