
Security News
Deno 2.2 Improves Dependency Management and Expands Node.js Compatibility
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
layer-ui-web
Advanced tools
The Layer UI for Web provides a library of widgets to simplify adding chat capabilities into your application.
Use our new XDK! The XDK enables a richer messaging experience and new features will be added there. See the repository at https://github.com/layerhq/web-xdk. Don't worry, Layer UI for Web is still supported.
Browser | Version | OS Tested Against |
---|---|---|
Internet Explorer | 11.0 | Windows 8.1 |
Edge | 13.0 | Windows 10 |
Edge | 14.0 | Windows 10 |
Safari | 10.0 | OSX 10.12 |
Safari | 9.0 | OSX 10.11 |
Safari (IOS) | 9.x | IOS 10.0 |
Safari (IOS) | 10.0 | IOS 9.3 |
Chrome | 55 | OSX 11.0 |
Chrome | 48 | Linux |
Firefox | 51 | OSX 11.0 |
Firefox | 50 | Windows 8 |
Older versions of Safari do not support Websockets and will not work with the Layer WebSDK.
The Layer UI for Web provides a library of widgets to simplify adding chat capabilities into your application.
It is implemented using the Webcomponents Polyfill; in particular, this project uses the "light" version of the polyfill which means we do not use Shadow Dom.
You can build all these things on your own using only Layer WebSDK; but that shifts a lot more development and maintenance onto you.
This is a Beta Release. We welcome feedback, and look forwards to working with customers who have issues.
Feedback can be sent via https://github.com/layerhq/layer-ui-web/issues
Layer UI for Web depends upon the Layer WebSDK, and provides an init
method for providing a Layer Client,
as well as access to the WebSDK library itself. How to use this depends on your installation method.
Note that if you do not have an appId
at the time you call init()
you can instead pass app-id
attributes into each widget you use.
<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 rel='stylesheet' href='https://cdn.layer.com/ui/1.0/themes/bubbles-basic.css' />
<script>
window.layerUI.init({
appId: 'layer:///apps/staging/UUID'
});
</script>
Alternatively, a separate theme and templates can be loaded using:
<link rel='stylesheet' href='https://cdn.layer.com/ui/1.0/themes/groups-basic.css' />
<!-- This file can be copied from https://cdn.layer.com/ui/1.0/themes/groups-basic-templates.html but
generates CORS errors if loaded directly from CDN -->
<link rel='import' href="groups-basic-templates.html">
Note: Using a custom template must access this package from the
window
object; as such, regardless of what module system you use, the default build will assignwindow.layerUI
to this package.
More information on creating/customizing themes is in the Themes section.
The following themes are available:
npm install layer-websdk layer-ui-web --save
var layer = require('layer-websdk');
var layerUI = require('layer-ui-web');
layerUI.init({
appId: 'layer:///apps/staging/UUID'
});
If you have your own babel build process, you may prefer to take es6 classes as input:
var layer = require('layer-websdk/index-es6');
var layerUI = require('layer-ui-web/lib-es6/index');
layerUI.init({
appId: 'layer:///apps/staging/UUID'
});
<link rel='stylesheet' href='node_modules/layer-ui-web/themes/build/groups-basic.css' />
<link rel='import' href="node_modules/layer-ui-web/themes/build/groups-basic-templates.html">
The following themes are available:
Clone the repo, install dependencies and build it:
git clone git@github.com:layerhq/layer-ui-web.git
cd layer-ui-web
npm install
grunt
<script src='https://cdn.layer.com/sdk/3.2/layer-websdk.min.js'></script>
<script src='layer-ui-web/build/layer-ui-web.min.js'></script>
A full API reference for all widgets can be seen at:
Using the Widget Library is as simple as adding an html tag to your page. The following would generate a suitable UI assuming some CSS to size and position the widgets:
<html>
<head>
<script src='http://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>
<!-- Code for instantiating a layer.Client and authenticating it: -->
<script src='my-client-initializer.js'></script>
<script>
layerUI.init({appId: 'layer:///apps/staging/UUID'});
</script>
</head>
<body>
<layer-identities-list></layer-identities-list>
<layer-conversations-list></layer-conversations-list>
<layer-conversation-panel ></layer-conversation-panel>
</body>
</html>
Using a Webcomponent Polyfill and implementation means that you can also create an element simply with:
var conversationWidget = document.createElement('layer-conversation-panel');
document.body.appendChild(conversationWidget);
There are many widgets in this framework, but mostly you only need to work with the Main Components; these are high level widgets that wrap and manage a set of subcomponents. Typically you would not directly interact with the subcomponents.
<layer-conversation-panel />
: Manages a message list, a typing indicator panel, and a compose bar for typing a message
layer-conversation
widget hardcoded to a single conversation with a customer support user; no other widgets needed.conversationId
(or used as an attribute: conversation-id
), which lets you configure which Conversation its being used to interact with.<layer-conversations-list />
: Manages a Conversation List
layer-conversation-selected
event to set the layer-conversation
conversationId
property to render the selected Conversation.<layer-identities-list />
: Manages a User list
var conversation = myLayerClient.createConversation({ participants: [list.selectedUsers] }); myConversationPanel.conversationId = conversation.id;
<layer-notifier />
: Creates desktop and toast notifications for new messagesSee the API Documentation for more information on the parameters of each of these widgets.
A primary goal of this library is ease of customization so that both look-and-feel as well as behaviors can match your design goals. The main customization mechanisms include:
See CUSTOMIZATION.md for more details.
query-id
rather than a query
, or an app-id
instead of a client
. Booleans need to accept the string "false" and "0" as false
. Strings representing strings may need to be evaled.query-id
when query
will suffice.<layer-date />
that must be created and rendered repeatedly. But by abstracting date into its own widget, a developer can easily replace <layer-date />
with a custom component without any changes to the parent components. Customizability as long as performance doesn't cause noticable problems is worth pursuing.ConversationPanel.composeButtons
one must dom create elements,
put them in an array and then set composeButtons
to refer to them. This is especially bad in React. A better mechanism should be discussed,
and implemented.The biggest problem likely to be encountered while editing this code is if you try using npm link
to test your changes with your code.
node_modules/layer-websdk
npm link
will convince browserify
and webpack
that layer-ui-web/node_modules/layer-websdk
is something totally different from node_modules/layer-websdk
and will include two copies of the WebSDK in your build. These two will not talk to each other. Your app will then fail.Solution: For each project you want to try with your in-development-code:
cd my-project
-- Go to your projectnpm install layer-ui-web
-- This will install layer-ui-web into your project, and all of its dependencies.rm -rf node_modules/layer-ui-web
-- This removes the npm repo, but leaves all of its dependencies within your node_modules
folderlayer-ui-web/npm-link-projects.json
to contain an array of paths to projects; add the project: ['../my-project']
grunt develop
At no time is it OK to use npm link
which will introduce errors; the grunt watch
will replace npm link
.
Other than dealing with issues around npm link
, development is done as follows:
grunt develop
will startup grunt watch
and startup a server for running teststest/layer-ui-web-test.js
that includes both the WebSDK and Layer UI.http://localhost:8004/test/SpecRunner.html
To run coverage tests:
grunt coverage
will overwrite test/layer-ui-web-test.js
with an instrumented version of the build filehttp://localhost:8004/test/SpecRunner.html
Object.keys(__coverage__).forEach(key => {
var newKey = key.replace(/^.*?lib-es5/, '');
newKey = newKey.replace(/components\/.*\//, "components/");
var parts = newKey.split(/\//);
if (parts[parts.length-2] + '.js' == parts[parts.length-1]) {
parts.splice(parts.length-2, 1);
}
if (parts.length > 2 || parts[1] == 'base.js') {
newKey = parts.join('/');
__coverage__[newKey] = __coverage__[key];
}
delete __coverage__[key];
})
copy(JSON.stringify(__coverage__))
coverage/coverage.json
istanbul report --root coverage --dir coverage/report html
open coverage/report/index.html
WARNING:
grunt develop
may overwrite your coverage-instrumentedtest/layer-ui-web-test.js
file
div
,
but that widget was created from the template for layer-xxx
, which is the parent component.FAQs
The Layer UI for Web provides a library of widgets to simplify adding chat capabilities into your application.
The npm package layer-ui-web receives a total of 5 weekly downloads. As such, layer-ui-web popularity was classified as not popular.
We found that layer-ui-web demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
Security News
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.