# 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();
            });
        });
    };
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.imbee.me/imbee-docs/apps/javascript-sdk-lite.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.