Getting Started

Last updated 6 months ago

Appmixer can be embedded into your own web products. By including Appmixer into your own product, you can give your users a whole new set of workflow automation features with a very little effort.

Embed Appmixer UI in your own web pages with the Appmixer SDK

You can use the provided Appmixer SDK to include the Appmixer Drag&Drop Designer and Flows list in any web page. First, include the appmixer.js and appmixer.css in your page:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="./appmixer.css" />
</head>
<body>
‚Äč
<div id="my-am-designer" class="am-designer"></div>
<div id="my-am-flow-manager" class="am-flow-manager-container"></div>
<script src="./appmixer.js"></script>
...
</body>
</html>

Note we're also creating two <div> elements that will serve as containers for our designer and flow manager.

Once you've included the Appmixer SDK, you can create your first user:

<script>
appmixer.api.signupUser('first-username', 'first-password-123', function(err, auth) {
if (err) alert('Something went wrong.');
appmixer.api.setAccessToken(auth.token);
});
</script>

Notice how we set the user's access token. The token is used by the Appmixer backend to identify the user. You should store the token together with the username and password in your DB with your own product user's record. This way, you can always associate users of your product with Appmixer (virtual) users.

Now we can create the first flow and open the Appmixer Designer to let your user design their first flow.

<script>
appmixer.api.createFlow({}, 'My First Flow', function(err, flowId) {
if (err) alert('Something went wrong.');
var designer = new appmixer.ui.Designer();
designer.open({ el: '#my-am-designer', flowId: flowId });
});
</script>

At this point, you should see the Appmixer Designer rendered inside your <div id="my-am-designer"> element.

Once you create a user in Appmixer (appmixer.api.signupUser()) and have stored their username and password in your system, you can always request a new token by calling appmixer.api.authenticateUser():

<script>
appmixer.api.authenticateUser('first-username', 'first-password-123', function(err, auth) {
if (err) alert('Something went wrong.')
appmixer.api.setAccessToken(auth.token);
});
</script>

Full Example

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="./appmixer.css" />
</head>
<body>
<div id="my-am-designer" class="am-designer"></div>
<div id="my-am-flow-manager" class="am-flow-manager-container"></div>
<script src="./appmixer.js"></script>
<script>
var yourUserUsername = '123ABC456'; // User ID of the user in YOUR system.
var appmixerUserPassword = '[POPULATE_FROM_YOUR_DB]'; // A password of the virtual user in Appmixer.
appmixer.api.authenticateUser(yourUserUsername, appmixerUserPassword, function(err, auth) {
if (err && err.status === 403) {
// Virtual user not yet created in Appmixer. Create one with a random password..
appmixerUserPassword = Math.random().toString(36).slice(-8);
appmixer.api.signupUser(yourUserUsername, appmixerUserPassword, function(err, auth) {
if (err) alert('Something went wrong.');
appmixer.api.setAccessToken(auth.token);
// ... Store auth.token and appmixerUserPassword in your DB.
onAppmixerReady();
});
} else if (!err) {
appmixer.api.setAccessToken(auth.token);
onAppmixerReader();
} else {
alert('something went wrong.');
}
});
function onAppmixerReady() {
appmixer.Controller.load();
var designer = new appmixer.ui.Designer({ el: '#my-am-designer' });
var flowManager = new appmixer.ui.FlowManager({ el: '#my-am-flow-manager' });
flowManager.open();
flowManager.on('flow:edit', function(flowId) {
designer.open(flowId);
});
flowManager.on('flow:create', function() {
appmixer.api.createFlow({}, 'My First Flow', function(err, flowId) {
if (err) alert('Something went wrong.');
designer.open(flowId);
});
});
}
</script>
</body>
</html>