Developers

Output Demo

Introduction

This adapter displays all the types of answers and outputs available in the Chat SDK.

This is intended for development purposes only. You can use it to see the design changes that apply to every type of answer and output.

Important

This adapter blocks the Inbenta API call.

Available Chat Answers

Caution

If you want to use these adapters "as is" in production environments, you must copy and use them from your servers.

Possible outputs:

The user can ask for the following outputs:

  • multiple - Displays a multipleChoiceQuestion.
  • polar - Displays a polar question.
  • system - Displays a system message, with and without buttons.
  • side window - Displays an answer with a side window.
  • media - Displays a media type answer(attachment).
  • related - Displays an answer with related contents.
  • show upload - Shows an upload attachment button.
  • hide upload - Hides the upload attachment button.
  • agent - Shows the activity as an agent joined the chat.
  • default - Shows the default agent activity.
  • hide activity - Hides the activity
  • system modal - Displays a systemMessage with the modal=true
  • custom window - Creates a custom window.
  • federated search - Displays a chatbotMessage with a search like answers
  • federated km - Displays a chatbotMessage with a search like answers
  • rating - A chatbotMessage with a fake trackingCode
  • buttons list - ChatbotMessage with fieldType buttons
  • dropdown - ChatbotMessage with fieldType dropdown

Adapter code and public Github repository

In the following code you have mocked up several types of answers, to see the full adapter, please refer to Github DemoMessages Adapter

Click here to see the mockup messages
var mediaChatbotMessage = {
'type': 'answer',
'message': 'Hello! This my default test message. Happy to help you!',
'media': {
name: 'my-file.jpg',
url: '/path/to/my-file.jpg'
}
};
var activityDemoMessage = {
type: 'answer',
message: 'Write down <b>agent</b> if you want to see the Chatbot Activity as a message.'+
'Write down <b>default</b> if you want to see the default Chatbot Activity, and <b>hide activity</b> in order to hide the activity'
};
var ratingMessage = {
type: 'answer',
message: 'Rating example',
trackingCode: {
clickCode :"test",
rateCode :"test"
},
sideWindowContent: "test",
parameters:{
contents:{
trackingCode:{
clickCode :"test",
rateCode :"test"
}
}
}
};
var buttonsList = {
message: 'this is an example variableList message',
type:'answer',
actionField: { //Only shown when we have information related on how to display this fields.
fieldType:'list', //Only will be send in case the variable is list type -> buttons/dropdown
disableInput: true,
actionFieldId:'uuid', // UniqueId used by the SDK to identify the current actionField
variableName:'hero_name',
listValues: {
displayType: "buttons", // Possible values: 'buttons', 'dropdown'
values: [
{"label": ["phone","test"], "option": 2},
{"label": ["tv"], "option": 5}
]
}
}
};
var dropdownList = {
message: 'hello, what do you want to buy?',
type:'answer',
actionField: { //Only shown when we have information related on how to display this fields.
fieldType:'list', //Only will be send in case the variable is list type -> buttons/dropdown
disableInput: true,
actionFieldId:'id1', // UniqueId used by the SDK to identify the current actionField
// actionMethod:'addVariable',
variableName:'hero_name',
listValues: {
displayType: "dropdown", // Possible values: 'buttons', 'dropdown'
values:[
{"label":["Iphone 7"],"option":"Apple"},
{"label":["google pixel 3"],"option":"Google"},
{"label":["Huawei P20 Pro"],"option":"Huawei"},
]
}
},
};
var modalSystemMessage = {
message: 'Modal systemMessage example',
translate: true,
modal:true,
id:"testing",
closeChat:true,
options: [
{label: 'First',value:'yes'},
{label: 'Second', value:'no'}
]
};
var customWindowHTML = {
content: '<form class="inbenta-bot-escalation__form">'+
'First name:<br>'+
'<input type="text" class="inbenta-bot-input" name="firstname" value="Luke">'+
'<br>Last name:<br>'+
'<input type="text" class="inbenta-bot-input" name="lastname" value="Skywalker"><br><br><button type="submit" class="inbenta-bot-button">Submit</button> '
};
var buttonsWarning = {
type: 'answer',
message: '<b>Messages with buttons may have buttons disabled</b>. '+
'If you want to see the enabled buttons, ask any of the following questions and I will show you'
};
var Options={
type: 'answer',
message: '<ul><li>multiple</li><li>polar</li><li>system</li><li>side window</li><li>media</li><li>related</li><li>show upload</li><li>hide upload</li><li>agent</li><li>default</li><li>hide activity</li><li>system modal</li><li>custom window</li><li>federated search</li><li>federated km</li><li>federated nothing</li><li>button list</li><li>dropdown</li><li>dropdownIntent</li></ul>'
};
var KMContentsMessage ={
message: 'Introduction text for a km content',
type: 'extendedContentsAnswer',
subAnswers:[
{
attributes: {
AnswerText: 'testAnswerText',
SideBubble_text:'test SideBubble'
},
flags: [],
message:'KMContent1Message',
options:null,
sideWindowTitle:"KM windowTitle content 1",
sideWindowContent:"KM SideWindow content1!",
parameters:{
contents:{
attributes:{
SideBubble_text:'text'
},
title: 'example',
}
},
source:{
type:'external_search',
name: 'Search api testing)'
}
},
{
attributes: {
AnswerText: 'testAnswerText',
SideBubble_text:'test SideBubble'
},
sideWindowTitle:"KM windowTitle content 2",
sideWindowContent:"KM SideWindow content2!",
flags: [],
message:'KMContent2Message',
options:null,
parameters:{
contents:{
attributes:{
SideBubble_text:'text'
},
title: 'example2',
}
},
source:{
type:'external_search',
name: 'Search api testing)'
}
}
]
};

Configuration:

Since there are several configurations available in the build method: Configurations, Inbenta recommends that you build the same configuration as the one used in your project.

Integration example:

  • In this particular instance, we will set ratings to see how they look, and we will display DateTime in every answer.
<!DOCTYPE html>
<html>
<head>
    <title>Demo</title>
    <script src="https://sdk.inbenta.io/chatbot/1/inbenta-chatbot-sdk.js"></script>

    <script src="messages-demo-adapter.js"></script>

    <script>
    var authorization = {
      domainKey:"<example_domain_key>",
      inbentaKey:"<example_inbenta_key>"
    }
      const config = {
          showDateTime: true,
          ratingOptions: [
            {
              id: 1,
              label: 'yes',
              comment: false
            },
            {
              id: 2,
              label: 'no',
              comment: true
            }
          ],
          adapters: [messagesDemoAdapter]
      };

      InbentaChatbotSDK.buildWithDomainCredentials(authorization, config)
    </script>
</head>