Widget Customization

NodeLoom widgets are fully customizable to match your brand and design system. Configure colors and branding through the dashboard, inject custom CSS for fine-grained control, and add custom HTML elements to the chat interface.

Dashboard Configuration

The primary way to customize your widget is through the visual configuration panel in the NodeLoom dashboard. Navigate to Settings → Widgets, select your widget, and use the Appearance tab to adjust colors, branding, and layout options.

Live Preview

Every change you make in the appearance panel is reflected in a real-time live preview on the right side of the screen. The preview shows the widget exactly as your visitors will see it, including message bubbles, input field, header, and footer elements. No need to save and reload -- changes appear instantly.

Preview on your site

Use the "Preview on site" button to open a temporary overlay of the widget on your actual website. This lets you see how the widget looks in context with your page design.

Custom CSS

For fine-grained control beyond the color picker, you can inject custom CSS that targets semantic class names on the widget elements. Custom CSS is entered in the Advanced tab of the widget configuration.

Available Class Names

Class Name	Element
`.nodeloom-chat-header`	The top header bar containing the logo, title, and close button.
`.nodeloom-chat-messages`	The scrollable message container holding all chat bubbles.
`.nodeloom-chat-input`	The input area including the text field and send button.
`.nodeloom-chat-footer`	The footer section below the input area.

Example custom CSS

.nodeloom-chat-header {
  border-bottom: 2px solid #e2e8f0;
  font-family: 'Inter', sans-serif;
}

.nodeloom-chat-messages {
  background: linear-gradient(to bottom, #f8fafc, #ffffff);
}

.nodeloom-chat-input {
  border-top: 1px solid #e2e8f0;
  padding: 12px 16px;
}

.nodeloom-chat-footer {
  font-size: 11px;
  opacity: 0.6;
}

CSS sanitization

Custom CSS is sanitized before being applied. Dangerous properties like expression(), @import, -moz-binding, and javascript: URLs are stripped automatically. See the Widget Security page for details.

Custom HTML

You can inject custom HTML below the chat header. This is useful for displaying banners, notices, promotions, or other contextual information to visitors before they start chatting.

Example custom HTML

<div style="padding: 8px 16px; background: #fef3c7; border-radius: 8px; margin: 8px; font-size: 13px;">
  Our support team is available Mon-Fri, 9am-5pm EST.
  For urgent issues, call <strong>1-800-555-0123</strong>.
</div>

Custom HTML is sanitized to prevent XSS attacks. Script tags, iframe elements, and event handler attributes are stripped automatically.

Size Limits

Both custom CSS and custom HTML fields have a 50 KB limit per field. This is sufficient for extensive customization while preventing excessive payload sizes that would slow down widget loading for visitors.

Responsive Design

The widget automatically adapts its layout based on the visitor's device:

Device	Layout	Behavior
Mobile	Full-screen	The widget expands to fill the entire viewport when opened. A back button replaces the close button for intuitive navigation.
Desktop	Floating	The widget appears as a floating panel in the bottom corner of the page. Configurable width and height.

The breakpoint between mobile and desktop layouts is 768px. Custom CSS can target these layouts using standard CSS media queries within the custom CSS field.

Responsive custom CSS

/* Desktop styles */
.nodeloom-chat-header {
  padding: 16px 20px;
}

/* Mobile override */
@media (max-width: 768px) {
  .nodeloom-chat-header {
    padding: 12px 16px;
    font-size: 14px;
  }
}

No additional setup required

Responsive behavior is built into the widget by default. You do not need to add any viewport meta tags or responsive CSS for the basic layout to work correctly across devices.

Setup

Embedding