# Installation

### Basic Usage

Load `appmixer.js` UMD module in your HTML file:

```html
<script src="https://my.YOUR_TENANT.appmixer.cloud/appmixer/appmixer.js"></script>

<script type="module">
const appmixer = new Appmixer({ baseUrl: 'https://api.YOUR_TENANT.appmixer.cloud' })
appmixer.api.authenticateUser(username, password).then(auth => {
    appmixer.set('accessToken', auth.token);
    ...
    const integrations = new appmixer.ui.Integrations({ el: '#integrations' });
    integrations.open();
});
</script>
```

See the following repositories for more comprehensive demos on how Appmixer can be embedded in your apps <https://github.com/clientIO/appmixer-demo-embedded-integrations>, <https://github.com/clientIO/appmixer-demo-firebase-vanilla>.

{% hint style="info" %}
If you're using a Self-Managed Appmixer package, you should link your own Appmixer JavaScript SDK from your own Appmixer Studio URL (i.e. instead of <https://my.YOUR\\_TENANT.appmixer.cloud>, you will reference your own Studio URL). Alternatively, you can download the appmixer.js file and link to it from whatever location you will put it in.
{% endhint %}

### Advanced Usage

Download `appmixer.es.js` ES module and include the files in your project:

```shell
wget https://my.YOUR_TENANT.appmixer.cloud/appmixer/package/appmixer.es.js
wget https://my.YOUR_TENANT.appmixer.cloud/appmixer/package/appmixer.css
```

```javascript
import { Appmixer } from './appmixer.es.js'
import './appmixer.css'

const appmixer = new Appmixer(/* ... */)
```

Choose Appmixer UI widgets to include:

```javascript
import { Designer, FlowManager } from './appmixer.es.js'

appmixer.ui('Designer', Designer)
appmixer.ui('FlowManager', FlowManager)

const designer = appmixer.ui.Designer(/* ... */)
const flowManager = appmixer.ui.FlowManager(/* ... */)
```