helixml / chat-widget

Configuration Options - helixml/chat-widget

The chat widget provides various configuration options to customize its appearance and behavior. This guide covers the possible options and provides examples for each option.

Widget Appearance

The widget appearance can be customized using the widget configuration object.

Example

const config = {
widget: {
title: 'Chat',
subtitle: 'Need help? Chat with us!',
onlineTitle: 'Online',
offlineTitle: 'Offline',
colorScheme: 'dark',
},
};

Options

  • title: The title of the chat widget. (string, required)
  • subtitle: The subtitle of the chat widget. (string)
  • onlineTitle: The title of the chat widget when the agents are online. (string)
  • offlineTitle: The title of the chat widget when the agents are offline. (string)
  • colorScheme: The color scheme of the chat widget. Can be either ‘light’ or ‘dark’. (string, default: ‘light’)

Widget Position

The widget position can be customized using the position configuration object.

Example

const config = {
position: {
top: 20,
right: 20,
},
};

Options

  • top: The top position of the chat widget in pixels. (number, required)
  • right: The right position of the chat widget in pixels. (number, required)

Widget Behavior

The widget behavior can be customized using the behavior configuration object.

Example

const config = {
behavior: {
autoOpen: true,
hideOnScroll: true,
},
};

Options

  • autoOpen: Whether the chat widget should be automatically opened when the page loads. (boolean, default: false)
  • hideOnScroll: Whether the chat widget should be hidden when the page is scrolled. (boolean, default: false)

Integrations

The chat widget supports various integrations, such as email, Slack, and more. These integrations can be configured using the integrations configuration object.

Example

const config = {
integrations: {
email: {
enabled: true,
address: '[email protected]',
},
slack: {
enabled: true,
webhookUrl: 'https://hooks.slack.com/services/...',
},
},
};

Options

  • email: The email integration configuration.
  • enabled: Whether the email integration is enabled. (boolean, default: false)
  • address: The email address to send the messages to. (string, required if enabled is true)
  • slack: The Slack integration configuration.
  • enabled: Whether the Slack integration is enabled. (boolean, default: false)
  • webhookUrl: The webhook URL to send the messages to. (string, required if enabled is true)

Sources: