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 Web XDK is built as a UMD module that can be loaded via CDN, NPM, or from source.

Option 1: CDN

The simplest way to load the Layer Web SDK is to add a <script> tag:

<script src='//cdn.layer.com/xdk/4.0/layer-xdk.min.js'></script>
<link rel='stylesheet' href='//cdn.layer.com/xdk/4.0/themes/layer-basic-blue.css' />

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

<script src='//cdn.layer.com/xdk/4.0.n/layer-xdk.min.js'></script>

n is the patch number for the desired release

All classes and methods can then be accessed via the Layer namespace:

var client = Layer.init({
    appId: "layer:///apps/staging/YOUR-APP-ID"
});

Option 2: NPM

The Layer Web XDK is also available on NPM:

npm install @layerhq/web-xdk --save

All classes can then be accessed by requireing the module (import also should work)

var Layer = require('@layerhq/web-xdk');

var client = Layer.init({
    appId: "layer:///apps/staging/YOUR-APP-ID"
});

Or

import Layer from '@layerhq/web-xdk';

var client = Layer.init({
    appId: "layer:///apps/staging/YOUR-APP-ID"
});

Your HTML file should contain:

<link rel='stylesheet' href='node_modules/xdk/themes/build/layer-basic-blue.css' />

Refining the NPM Import

You may also import the following instead of @layerhq/webxdk:

  • @layerhq/webxdk/index-core: Import the Layer Client to provide APIs for authentication and sending/receiving of messages, but leave out all of the XDK’s UI components
  • @layerhq/webxdk/index-all: Imports all of the XDK components whether you use them or not
  • @layerhq/webxdk/index-lite: Removes components in order to minimize build size, including:
    • Webcomponents Polyfil: see Custom Elements v1 support grid to see which of your users will become unsupported by removing this.
    • Drag and drop support for sending files from your desktop (mobile web users won’t much care about this)
    • Replacing URLs in messages with hyperlinks
    • Parsing of emoji’s such as :-) into emoji characters
    • Supporting browsers that don’t have emoji characters by providing emoji image libraries via Twemoji

Option 3: From source

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

git clone git@github.com:layerhq/web-xdk.git
grunt build

The build command will generate a build folder that contains layer-xdk.min.js.

Other grunt commands available:

  • grunt develop: Rebuilds as you make changes, and exposes a simple web server for running tests and samples
  • grunt docs: Generates a docs folder with the API documentation
Getting Started Connecting