Chat Tag Structure

Chatty is a jQuery add-on that creates a chatbot-like experience from a json question format.

Tag types

There are two categories of tags. input tags collect user input, while msg tags display a message, and then advance to the next tag after a time delay.

Common Options

{
    submitBarStyle: "hide", //Adds class to submit bar. Supported options are "hide", "full-submit", customization possible.
    content: function() {
            return '<div>I am additional content!</div>';
        }
}

• submitBarStyle adds a class to the Submit Bar at the bottom of the chatbox. Supported classes are hide, full-submit and no value (default). Customization possible through different classes

• content is any function that returns a string with additional content to be rendered in the chat message. Content functions can be async, think retrieving data from a slow api. If the showLoader option is also set to true, a loading icon will display while the content function renders the additional content.

• callback is any function that you wish to call when the tag is initially rendered. This does not wait for user input. For that, use submit. callback is most often used to request more tags, or to send chat data to an api.

• success is called when the user successfully submits the tag. It is passed data, the chat data up to this point, including the tag that was just submitted. It is often used to create branching flows based off of user input.

• invalid is the text that should display when the user submits invalid input (e.g. no radio selected or empty text) to a non-optional tag.

• delay is how long to wait, in milliseconds, before showing the next message. This is typically only relevant for "chat-msg" tags, but is supported for all.

• optional determines if user input is required or not.

The Message Tag

In the message tag, only the type and "chat-msg" fields are required. The rest are optional.

{
    type: "msg",
    "chat-msg": "Welcome to Chatty!"
    //Plus any additional options listed above
}

The Input Tag

There are four types of input tag: checkbox, text, radio, and custom. They are very similar to their HTML counterparts, with the exception of custom. See the jsFiddle for working examples of all of them.

{
    type: "input",
    tag: "radio",
    name: "beds",
    "chat-msg": "Hi, I can help you find an apartment. How many bedrooms are you looking for?",
    children: [
        {
            value: "v1",
            text: "version one",
            subtext: "better version"
        }
        {
            value: "v2",
            text: "version two",
            subtext: "Unstable!!"
        }
    ],
    placeholder: "Type to filter the list",
},