API Reference

• Constructor
  • Parameters
• BotUI instance
  • message
    • add
    • bot
    • get
    • human
    • update
    • remove
    • removeAll
  • action
    • show
    • hide
    • text
    • select
    • button
• message object
• action object
• text object
• button object
• result object
• Promise

Constructor

The BotUI constructor. Returns a BotUI instance.

Parameters

• id - required - The id of the element which has the <bot-ui> tag.
• options - optional - An object of options.

// options with default values.
{
  debug: false, // set this to true if you want to debug the underlaying Vue instance
  fontawesome: true, // set this to false if you already have FontAwesome in your project and don't want it to be loaded again by BotUI.
}

BotUI instance

This instance has two properties.

• message
• action

botui.message

This method can be used to add, remove or update messages in the UI.

It has seven methods.

• botui.message.add

  Appends a message to UI.

  Accepts an object of message type.

  Returns Promise with index of added message.

• botui.message.bot

  Appends a message to UI. Just a shorthand to message.add.

  Accepts an object of message type.

  Returns Promise with index of added message.

• botui.message.human

  Appends a message to UI and sets the human to true.

  Accepts an object of message type.

  Returns Promise with index of added message.

• botui.message.get

  Accepts an index of message.

  Returns Promise with message object.

• botui.message.update

  Updates a message in UI.

  Accepts 2 parameters.

  1. index
  2. message

  Only content and loading property of message can updated. type of a message cannot be changed.

  Returns Promise with updated content of message.

• botui.message.remove

  Removes a message from UI.

  Accepts an index of message to be removed.

  Be careful while using it. It changes all the internal indexs for messages. Which may result in strange behavior of message.update.

  Returns Promise.

• botui.message.removeAll

  Removes all the messages from UI.

  Returns Promise.

botui.action

This method can be used to show, hide or set an action to be performed in UI.

It has four methods.

• botui.action.show

  Shows the action section.

  Accepts an object of action type.

  Returns Promise

• botui.action.hide

  Hides the action section. Does not expect any parameters.

  Returns Promise

• botui.action.text

  Shows the action section and sets the action type to text. Its a shorthand to show.

  Accepts an object of action type.

  Returns Promise with result as argument.

• botui.action.select

  Shows the action section and sets the action type to select. Its a shorthand to show.

  Accepts an object of action type.

  Returns Promise with result as argument.

• botui.action.button

  Shows the action section and sets the action type to button. Its a shorthand to show.

  Accepts an object of action type.

  Returns Promise with result as argument.

message object

Can be passed to ..

// with default values.

{
  loading: false, // set to true if you want to show a loading state '3 animated dots'. available in version >= 0.3.1

  delay: 0, // wait before showing the message. in milliseconds.

  type: 'text', // either 'text' or 'embed'

  content: '', // Should be a URL if type is 'embed', text otherwise.

  human: false, // should be shown aligned to right side?

  cssClass: '', // a string or array of custom CSS classes you want to be added.
}

action object

Can be passed to botui.action.show, botui.action.text and botui.action.button.

// with default values.

{
  type: 'text', // either 'text' or 'button',

  action: [], // array of 'button' objects if type is 'button'. object of 'text' otherwise.

  cssClass: '', // a string or array of custom CSS classes you want to be added.

  autoHide: true, // should the actions sections be hidden when submitted.

  addMessage: true // text from action is added as a message in UI from human side.
}

text object

Required as action in action object.

{
  size: 30, // size of the input to show. Relies on HTML size attribute for input elements.

  sub_type: '', // Could be any of the valid types for HTML input elements. e.g.: number, tel, time, date, email, etc.

  value: '', // pre-populates the text field. Only for 'text' type.

  placeholder: 'Write here ..', // Sets the placeholder text for the input element.
}

button object

Required as action array in action object.

{
  icon: '', // icon to show in button.
  text: '', // Text to show in the button. be creative!
  value: '', // this is how you will identify the button when result is returned.

  cssClass: '' // a string or array of custom CSS classes you want to be added.
}

result object

Passed as argument to the Promise returned by action methods.

{
  type: '', // 'Text' or 'Button' Type of the action it was returned from.

  value: '', // Text in the input in case type is 'text'. If type is 'button' then its the same as 'value' in button object.

  text: '' // only present if type of message is 'button'. same as the 'text' in button object.
}

Promise

This is an always-resolving JavaScript Promise. It means you don't need a catch, it will always resolve to a then.