Skip to content
Sites

Overview of Chat Widget Customizations

Learn how to customize the GHL Customer Care Chat Widget, including style, placement, dimensions, chat window, compliance consent, messaging, and language settings.

6 min read1,422 words10 explained imagesUpdated Wed, 9 Sep at 5:57 AM
View as markdownOpen in ClaudeOpen in ChatGPT
Each image has a one line explanation. Switch to full detail for the step it belongs to, the fields and buttons involved, examples and the whole procedure.
On this page
  1. Key Benefits of Customizing Your Chat Widget
  2. Create or Open a Chat Widget
  3. Widget
  4. Chat Launcher
  5. Chat Icon Selection
  6. Theme Customization
  7. First-Time and Returning Visitor Messages
  8. Avatar Images
  9. Widget Placement
  10. Widget Dimensions
  11. Chat Window
  12. Chat Window Content
  13. Load on User Interaction
  14. Compliance Notice & Consent
  15. View Consent Details for a Submission
  16. Existing Widgets and Default Compliance Settings
  17. Messaging
  18. Support Details, Greetings, and Acknowledgement Messages
  19. Language Settings
  20. Frequently Asked Questions
  21. Related Articles
 
Video 1 Open in a new tab
 

Use Chat Widget customization settings to control how your widget looks, where it appears, what visitors see, and how it behaves on your website.

Available settings vary by Chat Widget type. For example, Live Chat, SMS/Email, WhatsApp, All-in-One Chat, Facebook, Instagram, and Voice AI can provide different customization options.

TABLE OF CONTENTS

Key Benefits of Customizing Your Chat Widget

  • Match your brand: Customize the widget theme, colors, icons, avatar images, and visitor-facing messages.
  • Control widget placement: Choose between sticky and embedded placement options based on your website layout.
  • Adjust the visitor experience: Configure messages for first-time and returning visitors, Chat Window content, and acknowledgement messages.
  • Optimize loading behavior: Delay widget loading until a visitor interacts with the page or allow it to load immediately.
  • Configure notice and consent: Display a legal notice and configure whether a consent checkbox is shown, required, or pre-selected.

Create or Open a Chat Widget

  1. Go to Sites > Chat Widget.
  2. Click New to create a Chat Widget, or open an existing widget you want to customize.
  3. Open the widget configuration to customize its settings.
  4. If you create a new widget, select the Chat Widget type you want to configure. Available customization settings depend on the selected widget type.
    Step 4 of 4: If you create a new widget, select the Chat Widget type you want to… What this shows Step 4 of 4: If you create a new widget, select the Chat Widget type you want to configure. What this shows Shows what to fill in for step 4 of 4 in the "Create or Open a Chat Widget" section of "Overview of Chat Widget Customizations". This screenshot accompanies step 4 of 4 in the "Create or Open a Chat Widget" section of "Overview of Chat Widget Customizations". At this point in the walkthrough you if you create a new widget, select the Chat Widget type you want to configure. Available customization settings depend on the selected widget type. The navigation path used here is Sites > Chat Widget. Step 4 of 4Path: Sites > Chat WidgetImage 1 of 10 What to fill inIf you create a new widget, select the Chat Widget type you want to configure. Available customization settings depend on the selected widget type.
    Buttons and menus referenced Sites > Chat WidgetNewGetting Started with Chat Widget
    All 4 steps in this procedure
    1. Go to Sites > Chat Widget.
    2. Click New to create a Chat Widget, or open an existing widget you want to customize.
    3. Open the widget configuration to customize its settings.
    4. If you create a new widget, select the Chat Widget type you want to configure. Available customization settings depend on the selected widget type. this image

For complete instructions on Chat Widget types, creation, setup, and installation, see  Getting Started with Chat Widget .

Widget

Use the Widget section to control the appearance, placement, and dimensions of your Chat Widget.

Note: Available settings can differ based on the Chat Widget type. If you do not see a setting described below, confirm that your selected widget type supports it.

Chat Launcher

Configure the Chat Launcher that visitors use to open the widget.

You can display the launcher with or without a prompt message to encourage visitors to start a conversation.

Sticky widgets use a launcher that visitors click to open the chat experience. Embedded/Inline widgets appear directly within the page content and do not rely on a floating launcher in the same way.

Chat Icon Selection

Choose the chat icon that best matches your website and brand experience.

Chat Icon Selection (image 2 of 10) What this shows Choose the chat icon that best matches your website and brand experience. What this shows Illustrates the "Chat Icon Selection" section of "Overview of Chat Widget Customizations". This screenshot appears in the "Chat Icon Selection" section of "Overview of Chat Widget Customizations". The text alongside this image reads: Choose the chat icon that best matches your website and brand experience. Immediately after, the guide continues: Select a predefined theme or customize the widget colors and styling to match your brand. Image 2 of 10 What to chooseChoose the chat icon that best matches your website and brand experience. Next stepSelect a predefined theme or customize the widget colors and styling to match your brand.

Theme Customization

Select a predefined theme or customize the widget colors and styling to match your brand.

Theme Customization (image 3 of 10) What this shows Select a predefined theme or customize the widget colors and styling to match your brand. What this shows Illustrates the "Theme Customization" section of "Overview of Chat Widget Customizations". This screenshot appears in the "Theme Customization" section of "Overview of Chat Widget Customizations". The text alongside this image reads: Select a predefined theme or customize the widget colors and styling to match your brand. Immediately after, the guide continues: Configure different prompt messages depending on whether the visitor is opening the Chat Widget for the first time or returning to your website. Image 3 of 10 What to chooseSelect a predefined theme or customize the widget colors and styling to match your brand. Next stepConfigure different prompt messages depending on whether the visitor is opening the Chat Widget for the first time or returning to your website.

First-Time and Returning Visitor Messages

Configure different prompt messages depending on whether the visitor is opening the Chat Widget for the first time or returning to your website.

Use these messages to provide a more relevant greeting without changing the underlying conversation routing.

Avatar Images

Add avatar images for agents or support teams to give visitors a more recognizable and personalized interaction.

Widget Placement

Choose how and where the Chat Widget appears on your website.

  • Sticky: Keeps the widget fixed in a page corner, such as the bottom-left or bottom-right corner.
  • Embedded / Inline: Displays the complete conversation experience within your page content.

Embedded / Inline placement is available for All-in-One Chat, Email/SMS, WhatsApp, Facebook, Instagram, Live Chat, and Voice AI.

Widget Placement (image 4 of 10) What this shows Embedded / Inline placement is available for All-in-One Chat, Email/SMS, WhatsApp, Facebook, Instagram, Live Chat, and Voice AI. What this shows Illustrates the "Widget Placement" section of "Overview of Chat Widget Customizations". This screenshot appears in the "Widget Placement" section of "Overview of Chat Widget Customizations". The text alongside this image reads: Embedded / Inline placement is available for All-in-One Chat, Email/SMS, WhatsApp, Facebook, Instagram, Live Chat, and Voice AI. Immediately after, the guide continues: Keep the widget dimensions set to Auto, or select Custom to configure the width and height for your website layout. Image 4 of 10 What this coversEmbedded / Inline placement is available for All-in-One Chat, Email/SMS, WhatsApp, Facebook, Instagram, Live Chat, and Voice AI. Next stepKeep the widget dimensions set to Auto, or select Custom to configure the width and height for your website layout.
All 2 steps in this procedure
  1. Sticky: Keeps the widget fixed in a page corner, such as the bottom-left or bottom-right corner.
  2. Embedded / Inline: Displays the complete conversation experience within your page content.

Widget Dimensions

Keep the widget dimensions set to Auto, or select Custom to configure the width and height for your website layout.

Custom dimensions support values starting from 200px and are not restricted by the previous placement-based minimum dimensions.

Widget Dimensions (image 5 of 10) What this shows Custom dimensions support values starting from 200px and are not restricted by the previous placement-based minimum dimensions. What this shows Illustrates the "Widget Dimensions" section of "Overview of Chat Widget Customizations". This screenshot appears in the "Widget Dimensions" section of "Overview of Chat Widget Customizations". The text alongside this image reads: Custom dimensions support values starting from 200px and are not restricted by the previous placement-based minimum dimensions. Immediately after, the guide continues: Use Set to Default to restore the recommended dimensions for the current widget placement. Image 5 of 10 What this coversCustom dimensions support values starting from 200px and are not restricted by the previous placement-based minimum dimensions.
Buttons and menus referenced AutoCustom200pxSet to DefaultStickyEmbedded Live Chat
Next stepUse Set to Default to restore the recommended dimensions for the current widget placement.

Use Set to Default to restore the recommended dimensions for the current widget placement.

When you switch between Sticky and Embedded Live Chat, custom dimensions reset to the recommended defaults for the newly selected placement.

If custom dimension values are missing or set to Auto, the widget uses the default dimensions.

Configured dimensions are respected without being automatically increased to previous minimum values. he widget also adjusts its display to stay within the available container space.

Widget Dimensions (image 6 of 10) What this shows Configured dimensions are respected without being automatically increased to previous minimum values. What this shows Illustrates the "Widget Dimensions" section of "Overview of Chat Widget Customizations". This screenshot appears in the "Widget Dimensions" section of "Overview of Chat Widget Customizations". The text alongside this image reads: Configured dimensions are respected without being automatically increased to previous minimum values. he widget also adjusts its display to stay within the available container space. Immediately after, the guide continues: Use the Chat Window settings to configure the information visitors see when they open or interact with the widget. Image 6 of 10 What this coversConfigured dimensions are respected without being automatically increased to previous minimum values. he widget also adjusts its display to stay within the available container space.
Buttons and menus referenced AutoCustom200pxSet to DefaultStickyEmbedded Live Chat
Next stepUse the Chat Window settings to configure the information visitors see when they open or interact with the widget.

Chat Window

Use the Chat Window settings to configure the information visitors see when they open or interact with the widget.

Depending on the selected Chat Widget type, available settings can include:

  • Chat Window title
  • Introductory message
  • Contact form fields
  • Call-to-action text
  • Email or phone collection options
  • Prefilled message content
  • Additional visitor-facing messages

Not every option is available for every Chat Widget type.

Use the Chat Window section to configure the static content visitors see when they open the widget.

Available fields can vary depending on the Chat Widget type.

Chat Window Content

Supported Chat Widget types can include a prefilled Message field that gives visitors a starting message they can edit before submitting.

This is available for supported widget types such as:

  • WhatsApp
  • SMS/Email
  • All-in-One Chat
  • Voice AI

Live Chat continues to use its standard free-form message experience.

For complete setup instructions, see Customizable Message Field in Chat Widgets.

Configure visitor-facing content such as the Chat Window title, introductory message, email option, and call-to-action button.

Chat Window Content (image 7 of 10) What this shows Configure visitor-facing content such as the Chat Window title, introductory message, email option, and call-to-action button. What this shows Illustrates the "Chat Window Content" section of "Overview of Chat Widget Customizations". This screenshot appears in the "Chat Window Content" section of "Overview of Chat Widget Customizations". The text alongside this image reads: Configure visitor-facing content such as the Chat Window title, introductory message, email option, and call-to-action button. This part of the guide covers 4 fields, listed below. Immediately after, the guide continues: Use Load on user interaction to control when the Chat Widget loads on your website. Image 7 of 10 What this coversConfigure visitor-facing content such as the Chat Window title, introductory message, email option, and call-to-action button.
Fields in this part of the guide WhatsAppSMS/EmailAll-in-One ChatVoice AI
Buttons and menus referenced Message
Next stepUse Load on user interaction to control when the Chat Widget loads on your website.
All 4 steps in this procedure
  1. WhatsApp
  2. SMS/Email
  3. All-in-One Chat
  4. Voice AI

Load on User Interaction

Use Load on user interaction to control when the Chat Widget loads on your website.

EnabledDisabled
The widget loads after visitor interaction, such as a scroll, click, or touch. If no interaction occurs, it automatically loads after approximately 8 seconds.The widget loads immediately.

Use Compliance notice & consent to configure the legal notice and consent experience shown with your Chat Widget contact form.

Go to Chat Widget > Chat window > Additional options > Compliance notice & consent.

You can configure the following options:

  • Show legal notice: Display a read-only disclosure below the contact form. Visitors do not need to take action on the notice.
  • Add a consent checkbox: Display a checkbox with custom consent text for visitors to acknowledge or opt in.
  • Make this checkbox required: Require visitors to select the consent checkbox before submitting the form. Leave this setting off to make consent optional.
  • Pre-check the box by default: Display the consent checkbox as already selected when the form loads.

If consent is required and the visitor does not select the checkbox, the widget displays Please tick this box to continue.

The live preview updates as you configure these settings. Click Save when you finish.

Compliance Notice & Consent (image 8 of 10) What this shows The live preview updates as you configure these settings. What this shows Illustrates the "Compliance Notice & Consent" section of "Overview of Chat Widget Customizations". This screenshot appears in the "Compliance Notice & Consent" section of "Overview of Chat Widget Customizations". The text alongside this image reads: The live preview updates as you configure these settings. Click Save when you finish. Immediately after, the guide continues: Chat Widget form submissions record consent information in the contact's Activity details. Image 8 of 10 How to confirmThe live preview updates as you configure these settings. Click Save when you finish.
Buttons and menus referenced Compliance notice & consentPlease tick this box to continue.Save
Next stepChat Widget form submissions record consent information in the contact's Activity details.
All 4 steps in this procedure
  1. Show legal notice: Display a read-only disclosure below the contact form. Visitors do not need to take action on the notice.
  2. Add a consent checkbox: Display a checkbox with custom consent text for visitors to acknowledge or opt in.
  3. Make this checkbox required: Require visitors to select the consent checkbox before submitting the form. Leave this setting off to make consent optional.
  4. Pre-check the box by default: Display the consent checkbox as already selected when the form loads.

Chat Widget form submissions record consent information in the contact's Activity details.

The Activity details show:

  • Whether the visitor gave consent.
  • Whether consent was required.
  • The consent text shown to the visitor.
View Consent Details for a Submission (image 9 of 10) What this shows Whether the visitor gave consent. What this shows Illustrates the "View Consent Details for a Submission" section of "Overview of Chat Widget Customizations". This screenshot appears in the "View Consent Details for a Submission" section of "Overview of Chat Widget Customizations". The text alongside this image reads: Whether the visitor gave consent. Whether consent was required. The consent text shown to the visitor. Immediately after, the guide continues: Existing widgets keep their current appearance and behavior until you open and save them in the builder. Existing legal text is carried over automatically to the corresponding compliance field. Widgets created through A2P registration…. Image 9 of 10 What this coversWhether the visitor gave consent. Whether consent was required. The consent text shown to the visitor. Next stepExisting widgets keep their current appearance and behavior until you open and save them in the builder. Existing legal text is carried over automatically to the corresponding compliance field. Widgets created through A2P registration keep their existing compliance configuration. New widgets start with the legal notice enabled and the consent checkbox enabled. Required consent is disabled by default. You do not need to change your existing website embed code.
All 3 steps in this procedure
  1. Whether the visitor gave consent.
  2. Whether consent was required.
  3. The consent text shown to the visitor.

Existing Widgets and Default Compliance Settings

  • Existing widgets keep their current appearance and behavior until you open and save them in the builder.
  • Existing legal text is carried over automatically to the corresponding compliance field.
  • Widgets created through A2P registration keep their existing compliance configuration.
  • New widgets start with the legal notice enabled and the consent checkbox enabled. Required consent is disabled by default.
  • You do not need to change your existing website embed code.
Note: A2P-generated Chat Widgets can contain locked disclosure language, required fields, and consent settings. See the A2P article in the Related Articles section for details.

Messaging

Use the Messaging section to configure acknowledgement messages, greetings, support information, and language settings.

Support Details, Greetings, and Acknowledgement Messages

Configure the support contact details, greeting, and acknowledgement message shown to visitors.

Language Settings

Select the language used by the Chat Widget.

Language Settings (image 10 of 10) What this shows Select the language used by the Chat Widget. What this shows Illustrates the "Language Settings" section of "Overview of Chat Widget Customizations". This screenshot appears in the "Language Settings" section of "Overview of Chat Widget Customizations". The text alongside this image reads: Select the language used by the Chat Widget. Immediately after, the guide continues: Can I Customize Different Chat Widgets Differently? Image 10 of 10 What to chooseSelect the language used by the Chat Widget. Next stepCan I Customize Different Chat Widgets Differently?

Frequently Asked Questions

Can I Customize Different Chat Widgets Differently?

Yes. Each Chat Widget can have its own supported appearance and configuration settings.

Are All Customization Settings Available for Every Chat Widget Type?

No. Available options depend on the selected Chat Widget type.

Can I Use an Embedded Widget Instead of a Floating Widget?

Yes. Supported Chat Widget types offer Embedded / Inline placement in addition to Sticky placement.

Do I Need to Replace My Embed Code After Changing the Widget Design?

Generally, no. Saved configuration changes update the existing widget without requiring a new embed code.

Why Did My Custom Dimensions Reset?

Changing between Sticky and Embedded placement can restore the recommended dimensions for the new placement.

Can I Customize the Visitor's First Message?

Supported WhatsApp, SMS/Email, All-in-One Chat, and Voice AI widgets provide a customizable prefilled Message field. Live Chat uses its standard free-form message box.

Was this guide helpful?

Related guides

Getting Started with Chat Widget5 min read · 16 imagesChat Widget - Business Office Hours in Live Chat1 min read · 7 imagesChat Widget - Send your leads to Whatsapp Chat1 min read · 4 imagesHow to Install GHL Customer Care's Chat Widget2 min read · 2 images