Styles API

setStyles(styles)

The setStyles method allows you to dynamically update the visual appearance and positioning of the Gleen chat widget after initialization. Pass a JavaScript object containing style properties to override or extend the widget's existing styles. The method merges the provided styles with the current style configuration, preserving any previously set values while applying your new customizations.

Available Style Options

Positioning

• widget_position (string): Widget placement on screen. Options: 'RIGHT', 'LEFT', or 'CENTER'. Default: 'RIGHT'

• bottom_spacing (number): Distance from bottom of viewport in pixels. Default: 0

• left_spacing (number): Distance from left edge when positioned left. Default: 0

• right_spacing (number): Distance from right edge when positioned right. Default: 0

Mobile-Specific Positioning

• mobile_bottom_spacing (number): Bottom spacing override for mobile devices. Default: 0

• mobile_left_spacing (number): Left spacing override for mobile devices. Default: 0

• mobile_right_spacing (number): Right spacing override for mobile devices. Default: 0

• use_same_position_for_mobile (boolean): If true, uses desktop spacing values on mobile. Default: false

Visual Styling

• widget_border_radius (number): Border radius of the chat window in pixels. Default: 0

• widget_width (number): Width of the chat window in pixels (when not expanded). Default: 0 (uses default width)

• widget_background_color (string): Background color of the chat window. Accepts any valid CSS color value. Default: '#fff'

Layering

• z_index (number): Z-index for the chat window. Default: 200000

• launcher_z_index (number): Z-index for the launcher button. Falls back to z_index if not specified. Default: 200000

Typography

• fontFamily (string): Custom font family for the chat widget. Accepts any valid CSS font-family value. If not specified, falls back to the organization's configured font or the default 'Nunito, sans-serif'.

Example Usage

// Update widget positioning
window.gleenWidget.setStyles({
    widget_position: 'LEFT',
    bottom_spacing: 20,
    left_spacing: 20,
});

// Later, dynamically update the position
function adjustForMobile() {
  window.gleenWidget.setStyles({
      bottom_spacing: 80,
      right_spacing: 10,
  });
}

Configuring Styles During Initialization

In addition to the setStyles() method for dynamic updates, you can also configure widget styles during initialization by passing them in the window.gleenConfig.styles object.

This is useful if you want to override the options set in the dashboard on specific pages.

Initial Configuration via window.gleenConfig

Add the styles object to your window.gleenConfig before the Gleen widget script loads:

document.gleenConfig = {
    company: 'your-company-key',
    styles: {
        widget_position: 'RIGHT',
        bottom_spacing: 20,
        right_spacing: 20
    };
}