JavaScript

Installation

First, you need to create a div to render imbee chat and set its id with DIV_ID:

<div id="DIV_ID"></div>

Then, import imbee.js:

<script async src="https://s3-eu-west-1.amazonaws.com/static.imbee.es/chat/imbee.js"></script>

and configure these options:

• divId - id of the div which you want to render the chat

• myCss - optional custom css file's path (see my css)

• init - function which is called after everything is ready

window.imbeeOptions = {
    divId: 'DIV_ID',
    myCss: 'myStyles.css',
    init: init
};

function init(IMbee) {
    ...
}

Basic setup

Use this function to show the imbee app:

imbeeShow();

and this to hide:

imbeeHide();

This is the basic setup you need to start the chat:

• placeholderText - (optional) is the input message placeholder

function init(IMbee) {
    var wsUrl = "...",
        xmppUrl = "...",
        apikey = "...",
        uniqueIdsha = "...",
        botIdsha = "...",
        environment = IMbee.ENVIRONMENT.Development;
        placeholderText = "...";

    IMbee.init(wsUrl, xmppUrl, environment, apikey, placeholderText);

    IMbee.externalUserRegistration(uniqueIdsha, function(data) {
        IMbee.chatCreate(botIdsha, function(conversationId, created) {
            var options = {
                conversationTarget: conversationId
            }
            var app = IMbee.getApp(options);
            app.start();
        });
    });
}

More options

You can add more options to the options (parameter of IMbee.getApp)

To define a view for a custom message, you can add CSS style in my css:

getExternalContentMessageView: function(message) {
    if (message.get('content').externalType == "my_external_type")
        return '<div style="height: 50px; padding: 16px;"><p>my external view message</p></div>';
    else
        return '';
}

To define a custom menu view:

getMenuView: function() {
    return '<div>MENU</div>';
}

To define a custom send view:

getSendView: function() {
    return '<div>SEND</div>';
}

To set an action when the user clicks a button:

onButtonClicked: function(button) {
    if (button.type == 'url')
        window.open(button.payload);
}

To add a message received listener:

onMessageReceived: function(message) {
    console.log(message.getConversation().getUnreadMessagesNumber());
}

and a message updated listener:

onMessageUpdated: function(message) {
    console.log(message.getConversation().getUnreadMessagesNumber());
}

To add a connection changed listener:

onChatConnectionChanged: {
    onChatConnected: function() {
        console.log("connected");
    },
    onChatConnecting: function() {
        console.log("connecting");
    },
    onChatDisconnected: function() {
        console.log("disconnected");
    }
}

Send message

To send a simple text message

var content = {
    type: IMbee.MESSAGE_CONTENT_TYPE.MESSAGE,
    plainText: "blablabla"
};
app.sendMessageWithFlags(conversationId, content, null, null);

To send an invisible message with postback

app.sendMessageWithFlags(conversationId, content, "MY_POSTBACK", IMbee.MESSAGE_FLAG.INVISIBLE);

To send a custom message

var externalContent = {
    type: IMbee.MESSAGE_CONTENT_TYPE.EXTERNAL,
    externalType: "my_external_type",
    externalData: {...}
};
app.sendMessageWithFlags(conversationId, externalContent, null, null);