Using Appmixer SDK

The Appmixer JavaScript SDK allows you to embed any of the UI widgets of Appmixer into your own web products. You can also take advantage of the SDK methods to communicate with the Appmixer engine REST API.

Open the Appmixer SDK demo

Start with opening the Appmixer SDK demo in your browser. First we need to edit the demo HTML file to add base URL of our Appmixer engine REST API and our user credentials. Open the frontend/appmixer/demo.html file in your editor and find the following section:

<script>
var BASE_URL = '<your-base-url>';
var USERNAME = '<your-username>';
var PASSWORD = '<your-password>';

Replace <your-base-url> with http://localhost:2200 and <your-username> and <your-password> with the user credentials that you used in the Getting Started guide to sign-up your first user. Now you can open the demo.html file in your browser. You should see something like this:

Appmixer SDK Demo

The demo shows a plain HTML page that embeds the Appmixer UI widgets via the Appmixer JS SDK. Try to switch to different widgets using the select control at the top:

Insights page in Appmixer SDK Demo

Study the source code of the demo.html file to understand how the Appmixer SDK can be used to embed Appmixer UI into your own page. As you can see, we start by authenticating the user:

appmixer.api.authenticateUser(USERNAME, PASSWORD).then((auth) => {
appmixer.set('accessToken', auth.token);
start();
});

Then we initialize the Appmixer UI widgets passing a reference to a <div> container element they will render in:

<div id="your-flow-manager"></div>
var flowManager = appmixer.ui.FlowManager({ el: '#your-flow-manager' });

Once our widgets are initialized, we can just call open() and close() methods to render the widgets inside their container or close them:

flowManager.open();

And react on events the UI widgets provide. For example, if the user clicks a flow inside the flow manager, the flow manager widget triggers the "flow:open" event which we can react on to open the designer for that flow:

flowManager.on('flow:open', (flowId) => {
designer.set('flowId', flowId);
flowManager.close();
designer.open();
});
‚Äč

To learn more about the Appmixer JavaScript SDK, please visit the Appmixer SDK section.