Customizing Chat Widget Appearance

Customize the look and feel of your chat widget to match your website's design. You can change colors, position, button style, header text, and more.

Tab Style

Choose between two button styles in the General tab:

Tab Color

Set the button background color using a hex code (e.g., #0E71EB). This color also applies to the chat window header.

Tab Position

Choose where the button appears:

• Right - Right side of the page
• Left - Left side of the page
• Bottom - Bottom edge of the page

For more details on repositioning the widget, see Move the Live Chat Location on Your Website.

For the floating circle style, you can fine-tune the position using the JavaScript SDK:

window.socialintents = window.socialintents || {};
window.socialintents.settings = {
    alignment: "right",
    horizontal_padding: "25px"
};

Logo and Header

• Logo - Upload a square image (max 150x150px) displayed in the chat window
• Header Text - The title shown at the top of the chat window
• Chatbot Icon - A separate avatar shown next to AI chatbot responses

Widget Dimensions

Optionally set a custom popup height and width. If not set, the widget uses automatic sizing based on the content.

Home Panel Cards

The widget home panel can display up to three cards with custom headers, descriptions, images, and links. Configure these in the Customize Text tab under the Home section.

Custom Tab Image

Replace the default tab with a custom image by providing a URL in the tab image setting.

Background Image

Add a background image URL to display behind the chat conversation.

CSS personalizado

On paid plans, you can add custom CSS in the CSS & Javascript tab to override any visual aspect of the widget. This gives you full control over fonts, spacing, colors, and layout.

Dark Mode

If your website uses a dark theme, you can restyle the chat widget to match. Paste the following CSS into the CSS & Javascript tab to apply a full dark mode to the widget:

/* Dark mode for Social Intents Chat Widget */

/* Body and main container */
body {
  background: #1a1a1a !important;
}

.full-gradient {
  background: linear-gradient(to bottom, #1e3a5f, #1a1a1a) !important;
}

/* Header panels - keep blue accent */
.bg-blue-600 {
  background-color: #1e40af !important;
}

/* Gray backgrounds */
.bg-gray-50,
#chat-presales,
#chatContent,
#nav-panel,
#nav-panel-presales,
#panel-loading-presales {
  background-color: #1a1a1a !important;
}

/* White backgrounds */
.bg-white,
#home-tab .bg-white,
#messages-tab .bg-white,
#chat-presales-questions,
#footer {
  background-color: #2d2d2d !important;
}

/* Footer */
#footer {
  border-color: #444 !important;
  color: #888 !important;
}

#footer a {
  color: #888 !important;
}

/* Navigation panel */
#nav-panel, #nav-panel-presales {
  border-color: #444 !important;
}

#nav-panel span,
#nav-panel-presales span,
.homeBtn span,
.messagesBtn span {
  color: #d0d0d0 !important;
}

#nav-panel svg,
#nav-panel-presales svg {
  color: #9ca3af !important;
}

/* Text colors */
.text-gray-600, .text-gray-700, .text-gray-500, .text-gray-900,
#greetingText, #greeting2Text,
#chat-presales-questions p,
h1, h2, p, span, label {
  color: #e0e0e0 !important;
}

/* White text stays white */
.text-white {
  color: #ffffff !important;
}

/* Form inputs */
#presales-fields input,
#presales-fields textarea,
#presales-fields select,
#message,
.msgArea,
input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
  background-color: #3d3d3d !important;
  color: #f0f0f0 !important;
  border-color: #555 !important;
}

#presales-fields input::placeholder,
#presales-fields textarea::placeholder,
#message::placeholder,
.msgArea::placeholder {
  color: #888 !important;
}

/* Agent messages (incoming) */
.si-comment-wrapper-admin .si-comment {
  background-color: #3d3d3d !important;
  color: #e0e0e0 !important;
}

/* User messages (outgoing) - keep blue */
.si-comment-wrapper-user .si-comment {
  background-color: #2563eb !important;
  color: #ffffff !important;
}

/* Agent name and timestamps */
.si-comment-wrapper-admin-name,
.si-comment-wrapper-admin-time,
.si-comment-wrapper-user-time,
.si-nt-admin,
.si-nt-user {
  color: #888 !important;
}

/* Message container */
.sic-blocks {
  background-color: transparent !important;
}

/* Conversation list */
#conversation-list li {
  background-color: #2d2d2d !important;
  border-color: #444 !important;
}

#conversation-list li:hover {
  background-color: #3d3d3d !important;
}

/* Dropdown menus */
#options-menu,
#options-menu-presales,
#options-menu-chat {
  background-color: #2d2d2d !important;
  color: #e0e0e0 !important;
}

#options-menu li:hover,
#options-menu-presales li:hover,
#options-menu-chat li:hover {
  background-color: #3d3d3d !important;
}

/* Modals */
#feedback-modal > div,
#email-modal > div,
#close-chat-modal > div,
#aiFeedbackModal > div {
  background-color: #2d2d2d !important;
  color: #e0e0e0 !important;
}

#aiFeedbackModal textarea,
#feedback,
#emailAddress {
  background-color: #3d3d3d !important;
  color: #f0f0f0 !important;
  border-color: #555 !important;
}

/* Textarea wrapper */
#textarea-wrapper {
  background-color: #1a1a1a !important;
}

/* Message cards on home */
#message-cards .bg-white {
  background-color: #2d2d2d !important;
}

/* Borders */
.border-gray-300,
.border-gray-200 {
  border-color: #444 !important;
}

.border-t {
  border-color: #444 !important;
}

/* SVG icons */
#nav-panel svg,
#nav-panel-presales svg,
#empty-message svg {
  color: #9ca3af !important;
}

/* Typing indicator */
.typing-indicator {
  background-color: #3d3d3d !important;
}

/* Scrollbar */
#chatContent::-webkit-scrollbar {
  width: 8px;
}

#chatContent::-webkit-scrollbar-track {
  background: #2d2d2d;
}

#chatContent::-webkit-scrollbar-thumb {
  background: #555;
  border-radius: 4px;
}

/* AI feedback */
.ai-feedback svg {
  color: #888 !important;
}

/* Empty message state */
#empty-message p {
  color: #888 !important;
}

You can adjust the hex color values to match your site's specific dark theme. The key principle is replacing white backgrounds with dark grays (#1a1a1a, #2d2d2d, #3d3d3d) and dark text with light grays (#e0e0e0, #d0d0d0).

Custom JavaScript

Add custom JavaScript or jQuery in the CSS & Javascript tab for advanced behavior customization. This code runs when the widget loads.

Proactive Chat Popup

Trigger the chat to open automatically based on visitor behavior. In the Targeting tab:

• Time on page - Open after the visitor has been on the page for a set number of seconds (5s to 120s)
• Visit count - Trigger on all visits, or only after the 1st, 2nd, or 3rd visit
• Popup action - Choose to show the tab only, show both tab and popup, or show popup and hide the tab
• Proactive message - Set a custom invitation message (e.g., "Need help? Chat with us!")