> For the complete documentation index, see [llms.txt](https://docs.imbee.me/imbee-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.imbee.me/imbee-docs/apps/javascript-sdk-lite.md).

# JavaScript SDK Lite

## Installation

First of all, we need to import the Script:

```javascript
<script async src="...url/app-lite.js"></script>
```

After importing the script we will call the "init" method explained below

```javascript
window.onload = function () {
    init(window.ImbeeSDK.AppLite);
};        
```

{% hint style="info" %}
&#x20;This configuration can be modified in later stable versions.
{% endhint %}

We have to create the function we call during the start of the core, in this case, it will be `init(IMbee)`

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

Within this function we will establish the configuration of our core, we will see this below.

#### Basic setup

To set the minimum configuration we will use the following example:

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

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

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

In this basic configuration we see several key points that we will have to know and configure:

* `wsURL` is the webservice url.
* `xmppUrl` is the url that points to the xmpp server.
* `apikey` is the unique key by company or client.
* `uniqueIdsha` is the unique identifier per user.
* `botIdsha` is the unique identifier of the bot.
* `environment` Identify the environment in which the core will run.
  * `IMbee.ENVIRONMENT.Production` which has the value `1`.
  * `IMbee.ENVIRONMENT.Development` that has the value `2`.

All these parameters except the `uniqueIdsha` will be provided by Imbee and change for each environment.

#### More options

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

To add a message received listener (triggered only when receiving a new message):

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

{% hint style="info" %}
To access the content of the message you can find it here: `message.attributes.content`
{% endhint %}

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

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);
```

#### Example code

An example of code is shown below, this is not functional until the URLs and id's that will be provided by IMbee are correctly configured.

```javascript
<script async src="../app-lite.js"></script>
<script type="text/javascript">
    
    window.onload = function () {
        init(window.ImbeeSDK.AppLite);
    };     

    function init(IMbee) {
    
        var wsUrl = "https://wsprovidedurl.es",
            xmppUrl = "https://xmppprovidedurl.url",
            apikey = '6a0084f2e77ff621ff23ae43866234234234324',
            uniqueIdsha = 'uniqueId000039371921a',
            botIdsha = 'a47bb1d93c4223269512b72732432442423443242',
            environment = IMbee.ENVIRONMENT.Development;
       
        IMbee.init(wsUrl, xmppUrl, environment, apikey);
        
        IMbee.externalUserRegistration(uniqueIdsha, function (data) {
            IMbee.chatCreate(botIdsha, function (conversationId, created) {
                var options = {
                        conversationTarget: conversationId,
                        onMessageReceived: function (message) {
                            console.log("Message recived: " + message);
                            console.log(message);
                            // Triggered when receive a message 
                            // do your stuff                       
                        },
                        onMessageUpdated: function (message) {
                            // Triggered when receive or send a message
                        },
                        onChatConnectionChanged: {
                            onChatConnected: function () {
                                console.log("Chat connected");
                            },
                            onChatConnecting: function () {
                                console.log("Chat connecting");
                            },
                            onChatDisconnected: function () {
                                console.log("Chat disconnected");
                            }
                        }
                    };
                    
                var appLite = IMbee.getApp(options);
                appLite.start();
            });
        });
    };
```