Drop-in UI styling

When initializing the drop-in UI you can style and theme the user interface by providing stylesheets and/or inline styles.

Default stylesheet

Weavy needs at least the default stylesheet to function properly (the default stylesheet is called weavy-dropin.css and can be found in the NPM package). This stylesheet can be provided using traditional or option loading as explained below.

Traditional stylesheet loading

You can apply styles by adding them directly to your HTML code as <link> or <style> elements. Styling provided this way is considered to be general styling and will apply to all Weavy instances and their apps.

Stylesheet as <link> in <head>

<link href="weavy-dropin.css" rel="stylesheet">

Inline styles in <style> element

<style>
  @namespace weavy "http://www.weavy.com/";

  .conversation .list-group-item {
    background: purple;
  }
</style>

To identify the styles rules to be picked up by Weavy you must provide @namespace weavy "http://www.weavy.com/" as the first rule in your stylesheet or inline styles.

Option stylesheet loading

You can also pass in general styling by providing stylesheet(s) and/or css as options when initializing Weavy.

Single external stylesheet and inline styles

let weavy = new Weavy({
  stylesheet: "weavy-dropin.css",
  css: ".conversation .list-group-item { background: red; }"
});

Multiple external stylesheets

let weavy = new Weavy({
  stylesheet: [
    "weavy-dropin.css",
    "custom-styles.css"
  ]
});

Scoped stylesheets

Styles can also be scoped to a specific app. To target an app in your general styling you can simply specify the app id or className in your css selectors.

Target app by id

// Using id #my-messenger as selector
let weavy = new Weavy({
  css: "#my-messenger body { color: red; }"
});

let messenger = weavy.app({
  id: "my-messenger",
  type: "messenger",
  container: "#messenger-container"
});

Target app by className

// Using className .custom-theme as selector
let weavy = new Weavy({
  css: ".custom-theme body { background: cyan; }"
});

let messenger = weavy.app({
  id: "my-messenger",
  type: "messenger",
  container: "#messenger-container",
  className: "custom-theme"
});

You can also limit the scope to a specific app by providing stylesheet or css as options when initializing the app.

let weavy = new Weavy();

// Providing stylesheet and css as app options
let messenger = weavy.app({
  id: "my-messenger",
  type: "messenger",
  container: "#messenger-container",
  stylesheet: "custom-messenger.css",
  css: "body { background: cyan; }"
});

Finally, you can add styles to an app at any time using the addStyles() method. The method will return a promise that resolves when the stylesheet has been applied.

messenger.addStyles({
  stylesheet: "additional-styles.css",
  css: ".conversation .list-group-item { color: red }"
});
Weavy Docs