Install Layer

Layer is distributed as a source code package or compiled bundle, and can be easily integrated into a new app or an existing codebase with standard tooling.

The Layer UI for Web is built as a UMD module that can be loaded via CDN, NPM, or from source.

Option 1: CDN

<script src='https://cdn.layer.com/sdk/3.2/layer-websdk.min.js'></script>
<script src='https://cdn.layer.com/ui/1.0/layer-ui-web.min.js'></script>
<link  href='https://cdn.layer.com/ui/1.0/themes/bubbles-basic.css' rel='stylesheet' />

<script>
var client = new window.layer.Client({
  appId: 'layer:///apps/staging/UUID'
});
window.layerUI.init({
  appId: 'layer:///apps/staging/UUID'
});
</script>

Passing an Application ID into layerUI.init() is recommended; you could also pass the Application ID into each of your widgets instead.

You can also specify a patch version for stricter dependency control:

<script src='https://cdn.layer.com/ui/1.0.n/layer-ui-web.min.js'></script>

n is the patch number for the desired release

Option 2: NPM

The Layer UI for Web is also available on NPM:

npm install layer-websdk layer-ui-web --save
var layer = require('layer-websdk');
var layerUI = require('layer-ui-web');

var client = new layer.Client({
  appId: 'layer:///apps/staging/UUID'
});
layerUI.init({
  appId: 'layer:///apps/staging/UUID'
});

Passing an Application ID into layerUI.init() is recommended; you could also pass the Application ID into each of your widgets instead.

Note that for apps that prefer to import es6 code rather than es6 code that has been compiled into es5 code:

var layer = require('layer-websdk/index-es6');
var layerUI = require('layer-ui-web/lib-es6');

var client = new layer.Client({
  appId: 'layer:///apps/staging/UUID'
});
layerUI.init({
  appId: 'layer:///apps/staging/UUID'
});

Option 3: From source

Download the UI release from Github, extract the files, and run the following commands from the extracted project folder (you’ll need to have Grunt installed):

npm install
grunt

The build command will generate:

  • A build folder that contains layer-ui-web.js and layer-ui-web.min.js.
  • A themes/build folder that contains all compiled themes and their templates
Overview Demos