# JavaScript

### Installation <a href="#installation" id="installation"></a>

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

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

Then, import `imbee.js`:

```javascript
<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

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

function init(IMbee) {
    ...
}
```

### Basic setup <a href="#basic-setup" id="basic-setup"></a>

Use this function to show the imbee app:

```javascript
imbeeShow();
```

and this to hide:

```javascript
imbeeHide();
```

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

* **`placeholderText`** - (optional) is the input message placeholder

```javascript
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 <a href="#more-options" id="more-options"></a>

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:

```javascript
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:

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

To define a custom send view:

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

To set an action when the user clicks a button:

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

To add a message received listener:

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

and a message updated listener:

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

To add a connection changed listener:

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

### Send message <a href="#send-message" id="send-message"></a>

To send a simple text message

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

To send an invisible message with postback

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

To send a custom message

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