Optimiza tus respuestas para mejores experiencias

A complement is an HTML element which allows us to display visual components on agentbot window. Leveraging its functionalities to improve user experience.
Some of them are:

  • Buttons Complement
  • File Complement
  • FormData Complement
  • Generic Carousel Complement
  • OpenChat Derivation Complement
  • Retargeting
{
 "message": "Hi! I’m a virtual assistant. Are you interested in one
of our awesome products?",
 "type": "message",
 "params": null
}

Fields

FieldDescriptionTypeDefaultRequired
MessageMust be UTF-8 and corresponds to the message that will be sent to the client.StringNullNo
TypeCorresponds to the message type that will be rendered.
It can be «message», «buttons», «formData» or any supported complement.
String«Message»No
ParamsComplement Data ObjectObjectStringNo

Buttons Complement

The buttons complement allows the user to add buttons to the message to request actions. The buttons can send a message from client to agent, open a URL, or transfer conversation to AgentIQ.

Example

{
	"message": "",
	"type": "buttons",
	"params": {
		"type": "message",
		"blockInput": false,
		"oneChoice": false,
		"data": [{
			"label": "Smartphones",
			"value": "Smartphones"
		}, {
			"label": "TVs",
			"value": "TVs"
		}, {
			"label": "Tablets",
			"value": "Tablets"
		}, {
			"label": "Other products",
			"value": "Other products"
		}]
	}
}

Fields

FieldDescriptionTypeDefaultRequired
MessageMust be UTF-8 and corresponds to the message that will be sent to the client.StringNullNo
TypeMust be «buttons» and corresponds to the message type that will be rendered.String«Message»Yes
ParamsButtons Component ObjectObjectNullYes

Buttons Complement Object

FieldDescriptionTypeDefaultRequired
BlockInputBlock the text field to send message. It can be true or falseBooleanFalseNo
OneChoiceAllow select a single option. After selecting an option the complement will be blocked. It can be true or false bBooleanFalseNo
QuickRepliesShow buttons like a quick repliesBooleanFalseNo
DataArray of Button ObjectsArrayNullYes

Button Object

FieldDescriptionTypeDefaultRequired
typeType of actions that will be dispatched for buttons.
It can be «message», «link», «transferToLive», «step» or «call».
If quickReplies is true, button type must by «message» or «link»
String«message»No
labelText to show into buttonStringnullYes
valueValue to be sent when dispatch the button eventStringnullYes
conditionsArray of ConditionsArraynullNo

FormData Complement

The form data complement allows the agent to request data to client to
dispatch an event. The form may transfer the conversation to AgentIQ or perform other events that not yet available

Example

{
	"message": "",
	"type": "formData",
	"params": {
		"type": "transfer",
		"blockInput": true,
		"groupId": 123,
		"data": [{
				"ref": "name",
				"label": "Name",
				"type": "text",
				"required": true
			},
			{
				"ref": "email",
				"label": "E-mail",
				"type": "email",
				"required": true
			},
			{
				"ref": "typeofProduct",
				"label": "Type of Product",
				"type": "select",
				"required": true,
				"options": [{
						"label": "Smartphones",
						"value": "1"
					},
					{
						"label": "TVs",
						"value": "2"
					},
					{
						"label": "Tablets",
						"value": "3"
					},
					{
						"label": "Other products",
						"value": "4"
					}
				]
			},
			{
				"ref": "tyc",
				"label": "Terms and Conditions",
				"type": "checkbox",
				"required": true
			}
		]
	}
}

Fields

FieldDescriptionTypeDefaultRequired
messageMust be UTF-8 and corresponds to the message that will be sent to the client.stringnullNo
typeMust be «formData» and corresponds to the message type that will be rendered.string«message»Yes
paramsFormData Component ObjectobjectnullYes

FormData Complement Object

FieldDescriptionTypeDefaultRequired
typeType of actions that will be dispatched to submit form. It can be «transfer» or «step».string«transfer»No
blockinputBlock the text field to send message. It can be true or false.BooleanFalseNo
groupldGrpup Id of AgentIQ to send form dataintegernullNo
dataArray of Input Field Objects.ArrayDefault Input Fields ArrayNo
nextStepFor forms of stepsstringnullNo

Input Field Object

FieldDescriptionTypeDefaultRequired
refInput field reference keyword. Should be on lowerCamelCase and written in English.stringnullYes
labelText to show into input field. (like a placeholder)stringnullYes
typeType of field. It can be «text», «email», «number», «checkbox», «select» or «search».string«text»No
requiredRequired field. Validate that the field is not empty. Validate that the text entered corresponds with the type of
field. It can be true or false.
booleanfalseNo
regexRegular expression for validation. Not include the / at the beginning and end of the string.stringnullNo
optionsOnly to inputs with type «select» and «search» Array of Option Objects.arraynullNo
conditionsOnly to inputs with type «select» and «search» is condition field.booleannullNo
errorAll inputs of any type. This field set the error tooltip message shown when the validation fail. If isn’t setted, a
default message will be shown.
stringnullNo
dependencyThis object set a relationship between two fields. When the parent match the value, the child field is shown.objectnullNo

Dependency Object

An input with this property object is shown when the parent match his value with the dependency. The object has two properties:

  • ref: The name of the parent field.
  • value: The parent input value. If the parent input value match his child dependency value, then the child is shown.

The required property on an input with dependency property, is only validated when the input is shown.
In the next example, if the user check the subscription field, the two fields (name and email) will shown:

[{
	"message": "",
	"type": "formData",
	"params": {
		"type": "transfer",
		"blockInput": true,
		"groupId": 123,
		"data": [{
				"ref": "subscribe",
				"label": "Subscribe to our Sales Notifications",
				"type": "checkbox",
				"required": true
			},
			{
				"ref": "name",
				"label": "Name",
				"type": "text",
				"required": true,
				"dependency": {
					"ref": "subscribe",
					"value": true
				}
			},
			{
				"ref": "email",
				"label": "E-mail",
				"type": "email",
				"required": true,
				"dependency": {
					"ref": "subscribe",
					"value": true
				}
			}
		]
	}
}]