Drop-in UI styling

The drop-in UI is a complete user interface that is generated on the Weavy backend and rendered in your application using iframes. Since all HTML and CSS exist on the Weavy backend you can't modify it using the frontend library. To change the look and feel you can instead provide additional styling that will override the built-in defaults.

Applying custom styles

Weavy will look in your existing stylesheets and identify style rules beginning with the .wy- prefix and apply them to all apps rendered with the drop-in UI. For instance, to set a purple background on the server rendered .wy-messages element you can add the following to your existing stylesheet.

.wy-messages {
  background: lightblue;
}

You can also apply inline css and or custom stylesheet(s) by passing them as options when initializing Weavy.

let weavy = new Weavy({
  css: ".wy-messages { background: lightblue; }",
  stylesheet: "/css/custom-styles.css"
});

Example: Inline css and custom stylesheets.

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

Example: Multiple custom stylesheets.

Scoped stylesheets

Styles can be scoped to a specific app by specifying the app id or className in your css selectors.

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

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

Example: Target app by id.

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

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

Example: Target app by className.

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

let weavy = new Weavy();

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

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({
  css: ".wy-conversation { color: red }",
  stylesheet: "additional-styles.css"  
});
Weavy Docs