LogoLogo
6.0
  • Docs
  • Connector Configuration
  • Knowledge Base
  • Changelog
6.0
  • Introduction
  • Getting Started
    • Build and Publish an Integration
    • Build and Run an Automation
    • Build a Custom Connector
    • Embed into Your Application
    • Monitor & Troubleshoot
    • Access Appmixer REST API
    • Install and Update Connectors
    • Connector Configuration
    • Handle Flow Errors
    • Use App Events
    • End User Guide
  • API
    • Authentication
    • Flows
    • Apps
    • Accounts
    • User
    • Insights
    • Files
    • Data Stores
    • Connector Configuration
    • People Task
    • ACL
    • Charts
    • Config
    • Modifiers
    • Public Files
    • Unprocessed Messages
    • Variables
  • Building Connectors
    • Flow
    • Component
    • Basic Structure
    • Manifest
      • name
      • label
      • icon
      • description
      • auth
      • inPorts
      • outPorts
      • properties
      • quota
      • tick
      • private
      • webhook
      • state
      • author
      • marker
      • localization
      • firePatterns
    • Behaviour
    • Dependencies
    • Authentication
    • Quotas & Limits
    • Example: twilio.SendSMS
    • Example: Webhook Trigger
  • Appmixer UI SDK
    • Introduction
    • Installation
    • Quick Start
    • Constructor
    • API Module
    • UI & Widgets
      • Flow Manager
      • Designer
      • Insights Logs
      • Insights Chart Editor
      • Insights Dashboard
      • Accounts
      • Storage
      • People Tasks
      • Connectors
      • Integrations
      • Wizard
    • Custom API
  • Customizing Embedded UI
    • Custom Theme
    • Custom Strings
    • Custom Component Strings
  • Appmixer Backoffice
    • Getting Started
    • System Configuration
  • Appmixer CLI
    • Getting Started
    • OpenAPI Connector Generator
      • Getting started
      • Open API Extensions
      • Examples
  • Appmixer Self-Managed
    • Installation Docker Compose
    • Installation AWS ECS
    • Getting Started
    • Authentication Hub
    • Additional Configuration
    • Appmixer Architecture
    • Appmixer Deployment Models
  • Tutorials
    • Appmixer Virtual Users
    • Flows Metadata & Filtering
    • Access Control
    • Sharing Flows
    • People Tasks
    • Customizing modifiers
  • Connectors
    • Connector Configuration
    • Connector Request
Powered by GitBook
On this page
  • Basic Usage
  • Advanced Usage

Was this helpful?

Export as PDF
  1. Appmixer UI SDK

Installation

Appmixer SDK package includes two types of modules: basic UMD and advanced ESM.

PreviousIntroductionNextQuick Start

Last updated 1 year ago

Was this helpful?

Basic Usage

Load appmixer.js UMD module in your HTML file:

<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 , .

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.

Advanced Usage

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

wget https://my.YOUR_TENANT.appmixer.cloud/appmixer/package/appmixer.es.js
wget https://my.YOUR_TENANT.appmixer.cloud/appmixer/package/appmixer.css
import { Appmixer } from './appmixer.es.js'
import './appmixer.css'

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

Choose Appmixer UI widgets to include:

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(/* ... */)
https://github.com/clientIO/appmixer-demo-embedded-integrations
https://github.com/clientIO/appmixer-demo-firebase-vanilla