Getting Started

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 UI widgets (including the Drag&Drop Designer, Flows manager, Insights, ...) any web page, right into your own web products, completely white-labeled. First, include the appmixer.js in your page:

<!DOCTYPE html>
<html>    
    <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 included the Appmixer SDK, you need to create an instance of the global Appmixer class and pass the base URL of the engine:

<script>
    var appmixer = new Appmixer({ baseUrl: 'https://api.appmixer.com' });
</script>

Now you can create your first user:

<script>
    appmixer.api.signupUser('first-username', 'first-password-123').then(function(auth) {
        appmixer.set('accessToken', auth.token);
    }).catch(function(err) {
        alert('Something went wrong.');
    });
</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>
    var designer = appmixer.ui.Designer({ el: '#my-am-designer' });
    appmixer.api.createFlow('My First Flow').then(function(flowId) {
        designer.set('flowId', flowId);
        designer.open();
    }).catch(function(err) {
        alert('Something went wrong.');
    });
</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').then(function(auth) {
        appmixer.set('accessToken', auth.token);
    }).catch(function(err) {
        alert('Something went wrong.');
    });
</script>

Full Example

<!DOCTYPE html>
<html>
    <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 appmixer = new Appmixer({ baseUrl: 'https://api.qa.appmixer.com' });
           var yourUserUsername = '[email protected]'; // User ID of the user in YOUR system (must be in an email format!).
           var appmixerUserPassword = '[POPULATE_FROM_YOUR_DB]'; // A password of the virtual user in Appmixer.
           appmixer.api.authenticateUser(yourUserUsername, appmixerUserPassword).then(function(auth) {
               appmixer.set('accessToken', auth.token);
               onAppmixerReady();
           }).catch(function(err) {
               if (err.response && err.response.status === 403) {
                   // Virtual user not yet created in Appmixer. Create one with a random password and save the password in YOUR system
                   // so that you can authenticate the user later.
                   appmixerUserPassword = Math.random().toString(36).slice(-8);
                   appmixer.api.signupUser(yourUserUsername, appmixerUserPassword).then(function(auth) {
                       appmixer.set('accessToken', auth.token);
                       // ... Store auth.token and appmixerUserPassword in your DB.
                       onAppmixerReady();
                   }).catch(function(err) {
                       alert('Something went wrong.');
                   });
               } else {
                   alert('Something went wrong.');
               }
           });
           
           function onAppmixerReady() {
               
               var designer = appmixer.ui.Designer({ el: '#my-am-designer' });
               var flowManager = appmixer.ui.FlowManager({ el: '#my-am-flow-manager' });
               
               flowManager.open();
               flowManager.on('flow:open', function(flowId) {
                   designer.set('flowId', flowId);
                   flowManager.close();
                   designer.open();
               });
               flowManager.on('flow:create', function() {
                   flowManager.state('loader', true);
                   appmixer.api.createFlow('New Flow').then(function(flowId) {
                       designer.set('flowId', flowId);
                       flowManager.close();
                       designer.open();
                   }).catch(function(err) {
                       flowManager.state('error', 'Error creating a new flow.');
                   });
               });
           }
        </script>
    </body>
</html>

PreviousUnprocessed Messages NextAPI Reference

Last updated 5 years ago

Was this helpful?