What is the App Zone?

In the App Zone section you can define the external applications you want to use inside XCALLY Motion environment.

On this page:

The type of integration you can achieve can be:

Html: in this case you will open a web page or a custom html file using a link internal to an XCALLY Motion Module
Script: in this case the application will be installed and run as a "local" application

All you need to do is to:

develop a Plugin, where the software is provided either by third parties and Partners and by the XCALLY developing team;
upload it in your server configuration Plugins using the button ;
install the plugin;
enable the users and/or the agents to use it.

Plugin Samples

Download the samples clicking on the images:

Upload and Install a Plugin

NB. The plugin zip file must be 4 MB maximum.

Drop the .zip file in the dialog window and click on .

At the end the plugin will be shown in the Plugins list:

Click on and then install the plugin:

and the installation process starts:

At the end of the process the Active mark for the plugin is set and the application name is inserted in the Plugins Menu section (if the app is configured in order to be available to the admin):

Once the plugin has been installed, it can be started/stopped (script only), unistalled, removed or edited and modified.

Edit/Modify a Plugin

Click on and then on Edit plugin.

The command menu will be shown according to the plugin type:

HTML

SCRIPT

Add the Plugin to the Staff

Edit the Staff members Profile and enable the Plugin in order to let them use it (of course, if the application settings allows it):

User Profile:

Agent Profile:

For the Users with Admin role, all modules are enabled by default

How to create a Plugin

Step 1: Manifest reference

The manifest.json must contains the configuration of your plugin and must be included inside the zip file, like in the following example:

Script Example

{
  "name": "MyScriptPlugin",
  "version": "1.0.0",
  "description": "Displays the MyPlugin",
  "author": {
    "name": "AuthorName",
    "email": "name@name.com",
    "website": "https://www.name.com"
  },
  "type": "script",
  "sidebar": "always",
  "icon": "icon-apps",
  "parameters": {
    "scriptName": "my-plugin",
    "scriptPath": "app/index.js",
    }
  }
}

Html Example

{
  "name": "MyHtmlPlugin",
  "version": "1.0.0",
  "description": "Displays the myPlugin",
  "author": {
    "name": "AuthorName",
    "email": "name@name.com",
    "website": "https://www.name.com"
  },
  "type": "html",
  "sidebar": "adminOnly",
  "icon": "icon-apps",
  "parameters": {
    "views": {
      "admin": "https://www.name.com"
    }
  }
}

Name

Specifies a name for the plugin. Required.

Version

Specifies a version number for the plugin. Required.

Description

Specifies the plugin’s functionality. Required.

Author

Specifies the author of the plugin. It contains a JSON object with the following properties:

name: an individual or a company.
email: the address to which users can send support requests.
website: url pointing to a page about the author or the plugin.

Type

Specifies the type of the plugin. Required.

html: displays the url or the custom html page specified.
script: launch the Node.js application provided inside the zip.

Sidebar

Specifies the plugin’s visibility [default: always]

always: visible on both admin’s and agent’s sidebar
adminOnly: visible on the admin’s sidebar only
agentOnly: visible on the agent’s sidebar only
never: hidden on both admin’s and agent’s sidebar

Icon

Specifies the icon that will be displayed on the agent’s sidebar. [default: icon-apps]

Parameters

Contains all the information needed for the correct functioning of the plugin. Required.

scriptName: the name used for the new process when starting the Node.js application. Required for script type plugin only.
scriptPath: the path to where the Node.js application launcher file is located. Required for script type plugin only.
views: a JSON object with the following properties (required for html type plugin only):

- admin: an url or the path to a custom html file that will be displayed on the admin side
- agent: an url or the path to a custom html file that will be displayed on the admin side

Motion Variables

You can use User Variables in the agent view property (i.e. https://www.name.com?name={{user.name}}))

Step 2: Create the Plugin Application and the .zip file

As an example we consider a Script Plugin:

The application must be developed in node.js like in the following example:

var express = require('express');

var app = express();

app.listen(9006, function () {
  console.log('Sample Node Application Plugin Service listening on port ' + 9006);
});

remember the pakage.json file must be added in the zip file, according to the node.js specification. For more information click here.

and this is the corresponding manifest.json file:

{
  "name": "Sample Script",
  "version": "1.0.0",
  "description": "Sample plugin developed in Node.js",
  "author": {
    "name": "Xenialab",
    "email": "xenialab@xcally.com",
    "website": "https://www.xcally.com/en/"
  },
  "type": "script",
  "sidebar": "always",
  "parameters": {
    "scriptName": "sample",
    "scriptPath": "app/index.js",
    "views": {
      "admin": "admin/index.html",
      "agent": "https://www.xcally.com/en/"
    }
  }
}

The script can use the XCALLY Motion style (angular material): in this case it must be defined in the index.html file.