# 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. - Source: https://docs.ghlcustomercare.com/docs/sites/chat-widget/overview-of-chat-widget-customizations - Section: Sites / Chat Widget - Reading time: 6 min - Images: 10, each explained below - Modified on Wed, 9 Sep at 5:57 AM --- 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](#key-benefits-of-customizing-your-chat-widget) - [Create or Open a Chat Widget](#create-or-open-a-chat-widget) - [Widget](#widget) - [Chat Launcher](#chat-launcher) - [Chat Icon Selection](#chat-icon-selection) - [Theme Customization](#theme-customization) - [First-Time and Returning Visitor Messages](#first-time-and-returning-visitor-messages) - [Avatar Images](#avatar-images) - [Widget Placement](#widget-placement) - [Widget Dimensions](#widget-dimensions) - [Chat Window](#chat-window) - [Chat Window Content](#chat-window-content) - [Load on User Interaction](#load-on-user-interaction) - [Compliance Notice & Consent](#compliance-notice-and-consent) - [View Consent Details for a Submission](#view-consent-details-for-a-submission) - [Existing Widgets and Default Compliance Settings](#existing-widgets-and-default-compliance-settings) - [Messaging](#messaging) - [Support Details, Greetings, and Acknowledgement Messages](#support-details-greetings-and-acknowledgement-messages) - [Language Settings](#language-settings) - [Related Articles](#related-articles) - How Does It Work? - [Compliance notice & consent](#compliance-notice-and-consent) --- ## **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…](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155079792929/original/B0f6IJvpCvC1lT12NwmHwC8avxxSF3oMWg.png) **Step 4 of 4: If you create a new widget, select the Chat Widget type you want to…** 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. - Path: Sites > Chat Widget - What to fill in: If you create a new widget, select the Chat Widget type you want to configure. Available customization settings depend on the selected widget type. - Controls: Sites > Chat Widget, New, Getting Started with Chat Widget Full 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**](https://docs.ghlcustomercare.com/docs/sites/chat-widget/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. ![Screenshot 2024-07-11 at 9](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155079790007/original/bG9QVMOa7jjrnw6APkeR5ZIKg90RIYQSog.jpeg) **Chat Icon Selection (image 2 of 10)** 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. - What to choose: Choose the chat icon that best matches your website and brand experience. - Next: Select 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. ![Screenshot 2024-07-11 at 9](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155079790042/original/_Xims96jGQVHus2-mPDIzZ-s003RMNy2CQ.png) **Theme Customization (image 3 of 10)** 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. - What to choose: Select a predefined theme or customize the widget colors and styling to match your brand. - Next: Configure 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. ![Screenshot 2024-07-11 at 9](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155079790122/original/vieKQ1epIDSCV_MESgh9X2C20lpNrn4W2Q.png) **Widget Placement (image 4 of 10)** 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. - What this covers: Embedded / Inline placement is available for All-in-One Chat, Email/SMS, WhatsApp, Facebook, Instagram, Live Chat, and Voice AI. - Next: Keep the widget dimensions set to Auto, or select Custom to configure the width and height for your website layout. Full 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)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155079790174/original/OMnVzR6INPUwCUYa7havLbG95r1UVRQXYg.jpeg) **Widget Dimensions (image 5 of 10)** 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. - What this covers: Custom dimensions support values starting from 200px and are not restricted by the previous placement-based minimum dimensions. - Controls: Auto, Custom, 200px, Set to Default, Sticky, Embedded Live Chat - Next: Use 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)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155079790223/original/2kBoK6KUTGukutKs3zN5PRnuaCLvoFzf6Q.jpeg) **Widget Dimensions (image 6 of 10)** 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. - What this covers: 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. - Controls: Auto, Custom, 200px, Set to Default, Sticky, Embedded Live Chat - Next: Use 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. ![Screenshot 2024-07-11 at 9](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155030318955/original/PQYUAC5f8whizlJHA6l-5tn6yHkqvL0Qfw.jpeg) **Chat Window Content (image 7 of 10)** 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. - What this covers: Configure visitor-facing content such as the Chat Window title, introductory message, email option, and call-to-action button. - Fields: WhatsApp, SMS/Email, All-in-One Chat, Voice AI - Controls: Message - Next: Use Load on user interaction to control when the Chat Widget loads on your website. Full 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. | **Enabled** | **Disabled** | | --- | --- | | 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. | ### **Compliance Notice & Consent** 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 and consent settings](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155079775159/original/Dz9SH29PgOBiwz7cauLT1Q0nKBM8hPUqyw.png) **Compliance Notice & Consent (image 8 of 10)** 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. - How to confirm: The live preview updates as you configure these settings. Click Save when you finish. - Controls: Compliance notice & consent, Please tick this box to continue., Save - Next: Chat Widget form submissions record consent information in the contact's Activity details. Full 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. ### **View Consent Details for a Submission** 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)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155079791918/original/3YCWCnhndHJlgdo_WbprnXXf6kje4IAz-g.png) **View Consent Details for a Submission (image 9 of 10)** 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…. - What this covers: Whether the visitor gave consent. Whether consent was required. The consent text shown to the visitor. - Next: 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. Full 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. ![Screenshot 2024-07-11 at 9](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155030318953/original/a9jaYcCuHDyhEBNWzsmCO-RRf5p-h06bww.jpeg) **Language Settings (image 10 of 10)** 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? - What to choose: Select the language used by the Chat Widget. - Next: Can 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. ## **Related Articles** - [Getting Started with Chat Widget](https://docs.ghlcustomercare.com/docs/sites/chat-widget/getting-started-with-chat-widget)  - [How to Install GHL Customer Care's Chat Widget](https://docs.ghlcustomercare.com/docs/sites/chat-widget/how-to-install-ghl-customer-care-s-chat-widget)  - [How to Get Customer Consent or Track Legal Basis to Process Your Lead's or Customer's Personal Data](https://docs.ghlcustomercare.com/docs/sites/funnels-and-websites/how-to-get-customer-consent-or-track-legal-basis-to-process-your-lead-s-or-custo)  - [Pre-Built A2P Campaign Registration with Chat Widget](https://docs.ghlcustomercare.com/docs/phone-system/a2p-registration/pre-built-a2p-campaign-registration-with-chat-widget) --- Documentation for GHL Customer Care. Support: support@ghlcustomercare.com