How to configure and customize your web messenger

The AskHandle web messenger can be customized to match your company’s brand, website style, and customer experience. You can update the colors, welcome screen, chat design, layout, branding, visitor form, privacy consent, quick-reply buttons, end-chat confirmation, and Google Analytics tracking from one configuration page.

This guide explains each setting in simple steps so your team can launch a web messenger that looks professional and feels consistent with the rest of your website.

1. Install the web messenger on your website

At the top of the messenger configuration page, you will see two installation options:

1. Installation Code
2. Widget Token

Installation Code

Use the Installation Code if you want to add the messenger directly to your website.

1. Open the Installation Code section.
2. Click Copy Code.
3. Paste the code before the closing </body> tag on your website.
4. Save and publish your website changes.

After the code is added, the AskHandle messenger will appear on your website based on the layout and style settings you configure.

Widget Token

The Widget Token is used for API or SDK-based implementations.

You usually only need this if your developer is initializing the widget manually through JavaScript or connecting it through the REST API. For most SMB websites, the standard installation code is the easiest option.

2. Set your brand colors

The Colors section lets you control the visual style of the messenger.

Primary color

The Primary color is the main brand color used across the messenger. It usually controls areas such as:

• The messenger header
• Main buttons
• User message bubbles
• Active controls
• Chat button color

Use your company’s main brand color here. For example, if your website uses a specific blue, green, purple, or red, add that same hex code so the messenger feels like a natural part of your site.

Example:

1#4f46e5

Welcome screen background

The Welcome screen background controls the background behind the opening welcome message.

You can choose:

• Color: Use a simple background color.
• Image/Video: Upload a background image or video.

Use a clean background that keeps the welcome text easy to read. If you upload an image or video, keep it lightweight so the messenger loads quickly.

Recommended limits shown in the configuration page:

• Images: up to 2 MB
• Videos: up to 10 MB

Chat screen background

The Chat screen background controls the background inside the active chat conversation.

You can choose:

• Color: Use a plain background color.
• Image/Video: Upload a background image or video.

For most business websites, a light neutral color works best because it keeps messages readable.

Input area background

The Input Area Background controls the background color of the typing area at the bottom of the chat.

Use a color that clearly separates the typing area from the chat history while still matching your brand style.

3. Customize message colors

The messenger lets you control how visitor messages and AI messages appear.

User message

The User Message settings control the messages sent by your website visitors.

You can configure:

• Text Color: The color of the visitor’s message text.
• Background Color: The color of the visitor’s message bubble.

A common setup is to use white text on your primary brand color.

Example:

1Text Color: #ffffff
2Background Color: #4f46e5

AI message

The AI Message settings control the responses sent by your AI agent.

You can configure:

• Text Color: The color of the AI response text.
• Background Color: The color of the AI response bubble.

A good default is dark text on a light background.

Example:

1Text Color: #1f2937
2Background Color: #e8e7ff

This helps visitors quickly see the difference between their own messages and the AI’s responses.

4. Choose the typing indicator

The Typing Indicator setting controls what visitors see while the AI is preparing a reply.

You can choose:

• Animated dots
• Custom text

Animated dots are simple and familiar. Custom text can make the experience feel more branded or conversational.

Examples of custom typing text:

1AI is typing...
2Finding the best answer...
3Checking that for you...

5. Configure the layout

The Layout section controls where and how the messenger appears on your website.

Position

Use the Position setting to choose where the messenger appears on the page.

The most common option is:

1Bottom Right

This is familiar to most website visitors and usually works well for support, sales, and booking assistance.

Size

Use the Size setting to control the width of the messenger.

The default option shown in the configuration page is:

1Default (600px)

This works well for most desktop websites and keeps the chat experience easy to read.

Border radius

Use Border Radius to control how rounded the messenger corners are.

Example:

112

A higher number creates a softer, more rounded look. A lower number creates a sharper, more traditional interface.

6. Add branding and icons

The Branding & Icons section lets you control the visual identity of the messenger.

Show header icon

Enable Show Header Icon to display a small icon in the top bar of the messenger.

You can upload a custom Header Icon Image. The recommended size shown in the configuration page is:

140 × 40px

This can be your logo, AI assistant icon, or a simple branded symbol.

Show branding

Enable Show Branding if you want to display the “Powered by AskHandle” text at the bottom of the welcome screen.

Turn this off if your plan allows removing AskHandle branding and you want a fully white-labeled experience.

Welcome screen logo

Use Welcome Screen Logo to upload a larger logo shown in the center of the welcome screen.

This is useful if you want the first screen of the messenger to feel more branded before the visitor starts a chat.

Chat message avatar

Use Chat Message Avatar to upload a small avatar shown next to AI messages.

Recommended size shown in the configuration page:

124-32px

This can be a company logo, assistant avatar, or support icon.

Chat button icon

The Chat Button Icon controls the icon used for the floating chat launcher button.

You can use:

• Default: Uses the standard AskHandle chat button style.
• Custom: Lets you upload or configure your own icon.

Recommended file types shown in the configuration page:

1PNG, JPG, transparent recommended

7. Update the messenger text

You can customize the main text visitors see before starting a chat.

Header title

The Header Title appears in the top bar of the messenger.

Example:

1AI Support

You can make this more specific to your business.

Examples:

1Guest Support
2Sales Assistant
3Customer Support
4Booking Help
5AI Concierge

Welcome screen title

The Welcome Screen Title is the main heading visitors see when the messenger opens.

Example:

1Welcome! How can we help?

Other examples:

1Hi, how can we help today?
2Ask us anything.
3Need help? Start here.
4Welcome. How can we assist you?

Welcome screen subtitle

The Welcome Screen Subtitle appears below the welcome title.

Example:

1We reply in seconds

Other examples:

1Get instant answers from our AI assistant.
2We are here to help.
3Ask a question and get help right away.

Start button text

The Start Button Text controls the button visitors click to begin.

Example:

1Start Chat

Other examples:

1Chat with us
2Ask a question
3Get help
4Start now

Start button color

Use Start Button Color to choose the color of the welcome screen button. Most businesses use the same color as their primary brand color.

8. Enable a pre-chat form

The Pre-Chat Form lets you collect visitor information before the chat starts.

This is useful when you want to capture lead details, identify the visitor, or send the conversation to your team with contact information attached.

To enable it:

1. Turn on Pre-Chat Form.
2. Choose which fields you want to collect.
3. Edit the labels and placeholders.
4. Update the submit button text.
5. Save your changes.

Available fields

You can enable fields such as:

• Name
• Email
• Phone

Each field can be turned on or off.

Field labels and placeholders

For each enabled field, you can customize the label and placeholder text.

Example for the name field:

1Label: Name
2Placeholder: Your name

Example for the email field:

1Label: Email
2Placeholder: your@email.com

Submit button text

The Submit Button Text controls the button shown after the visitor fills out the form.

Example:

1Start Chat

You can also use:

1Continue
2Start conversation
3Send and start chat

When to use the pre-chat form

Use a pre-chat form when your team needs contact details before helping the visitor.

Good use cases include:

• Sales inquiries
• Booking requests
• Demo requests
• Lead capture
• Support conversations where follow-up may be needed

If your main goal is fast support with the lowest possible friction, you may want to keep the pre-chat form off or only ask for one field.

9. Add privacy and consent

The Privacy & Consent section lets you show a consent checkbox before visitors start chatting.

This is useful if you want visitors to agree to your Privacy Policy, Terms, or other required notices before using the messenger.

To enable it:

1. Turn on Privacy & Consent.
2. Add your consent text.
3. Add links to your Privacy Policy and Terms.
4. Choose whether consent is required to proceed.
5. Save your changes.

Consent text

The consent text supports Markdown links.

Example:

1I agree to the [Privacy Policy](https://www.askhandle.com/privacy) and [Terms](https://www.askhandle.com/terms)

You can replace those links with your own company’s Privacy Policy and Terms pages.

Required to proceed

Enable Required to proceed if visitors must check the consent box before starting the chat.

When this is enabled, the start button remains disabled until the visitor checks the box.

10. Add greeting quick replies

The Greeting Quick Replies section lets you add suggested buttons that appear with the first greeting.

Quick replies help visitors start faster because they can click a common question instead of typing from scratch.

To add quick replies:

1. Open Greeting Quick Replies.
2. Click Add quick reply button.
3. Add the button text.
4. Save your changes.

The configuration page allows you to add up to 5 quick-reply buttons.

Good quick-reply examples:

1What are your prices?
2Book a demo
3Talk to support
4What services do you offer?
5I need help with my account

Keep quick replies short and focused. The best quick replies are common questions visitors are likely to ask.

11. Configure end-chat confirmation

The End Chat Confirmation section controls the message visitors see when they try to end the conversation.

You can customize:

• Modal Title
• Confirmation Message
• Confirm Button Text
• Cancel Button Text

Example:

1Modal Title: End Conversation?
2Confirmation Message: Your chat history will be cleared and this conversation will end.
3Confirm Button Text: End Chat
4Cancel Button Text: Cancel

This helps prevent visitors from accidentally ending a conversation and losing their chat history.

12. Connect Google Analytics

The Analytics section lets you add your Google Analytics 4 Measurement ID to track web messenger events.

To enable Google Analytics tracking:

1. Open the Analytics section.
2. Find your GA4 Measurement ID in Google Analytics.
3. Paste it into the Google Analytics Measurement ID field.
4. Save your changes.

The field format usually looks like this:

1G-XXXXXXXXXX

Events tracked

The configuration page shows that AskHandle can fire the following widget events:

1chat_widget_opened
2chat_started
3message_sent
4chat_ended

These events can help you understand how visitors interact with the messenger.

You can use them to track questions such as:

• How many visitors open the messenger?
• How many visitors start a chat?
• How many visitors send a message?
• How many conversations are ended?

The analytics setting can work alongside any existing Google Tag Manager setup on your website.

Leave the field blank if you do not want to send widget events to Google Analytics.

13. Preview desktop and mobile before saving

The preview area lets you see how the messenger will look before you publish changes.

You can switch between:

• Desktop
• Mobile

Before saving, review both versions and check that:

• The widget matches your brand colors.
• The welcome title is clear.
• The button text makes sense.
• The pre-chat form is not too long.
• The privacy consent text is readable.
• The messenger position does not block important website content.
• The chat design looks good on mobile.

14. Save your changes

After updating your configuration, click Save Changes.

Your changes will apply to the installed web messenger. If the widget is already installed on your website, you usually do not need to reinstall the code after editing colors, text, forms, or branding settings.

Recommended setup for most SMB websites

For most small and medium-sized businesses, we recommend starting with a simple setup:

1Primary color: Your main brand color
2Welcome screen background: Light neutral color
3Chat screen background: Light neutral color
4Header title: AI Support or Customer Support
5Welcome title: Welcome! How can we help?
6Subtitle: We reply in seconds
7Start button: Start Chat
8Pre-chat form: Name and Email only, if lead capture is needed
9Privacy consent: Enabled if required by your business or legal policy
10Quick replies: 3-5 common questions
11Google Analytics: Add your GA4 Measurement ID if you track website events

This keeps the messenger clean, easy to use, and aligned with your website without adding too much friction for visitors.

Best practices

Keep the design simple

Use your brand color, but avoid too many different colors. A clean messenger usually performs better than one with too many visual elements.

Make the welcome message clear

Visitors should immediately understand that they can ask a question and receive help.

Good example:

1Welcome! How can we help?

Avoid long or confusing welcome messages.

Do not ask for too much information upfront

If you enable the pre-chat form, only collect the fields you really need. Asking for too much information before the chat starts can reduce the number of visitors who begin a conversation.

Use quick replies for common questions

Quick replies should help visitors take action faster. Use questions or actions your customers already ask about often.

Test on mobile

Many visitors will use your website from a phone. Always check the mobile preview before publishing.

Frequently asked questions

Do I need a developer to customize the messenger?

No. Most visual and experience settings can be configured directly from the messenger configuration page. A developer may only be needed to place the installation code on your website or use the widget token for a custom implementation.

Can I match the messenger to my brand colors?

Yes. You can update the primary color, button color, message colors, backgrounds, and other visual settings to match your company’s brand.

Can I upload my logo?

Yes. You can upload a header icon, welcome screen logo, chat message avatar, and custom chat button icon.

Can I collect visitor information before chat starts?

Yes. Enable the pre-chat form and choose which fields to collect, such as name, email, or phone number.

Can I require visitors to accept our Privacy Policy or Terms?

Yes. Enable Privacy & Consent, add your consent text with links, and turn on Required to proceed if visitors must check the box before starting the chat.

Can I add quick-reply buttons?

Yes. You can add greeting quick replies so visitors can click common questions or actions at the start of the conversation.

Can I track messenger activity in Google Analytics?

Yes. Add your GA4 Measurement ID in the Analytics section. AskHandle can send events such as widget opened, chat started, message sent, and chat ended.

Do I need to reinstall the widget after changing the settings?

Usually no. Once the widget is installed, changes to colors, text, layout, forms, branding, and analytics settings can be saved from the configuration page and applied to the existing messenger.