AskHandle

Setup & Channels

How to configure and customize your web messenger

Updated October 7, 2026

The Web Messenger configuration page lets you control how your messenger looks, opens, collects visitor information, behaves during chat, and tracks activity.

You can customize:

  • Installation and widget access
  • Launcher appearance and behavior
  • Welcome screen
  • Pre-chat form
  • Chat screen
  • Layout and text direction
  • Privacy and consent
  • Greeting quick replies
  • End-chat confirmation
  • Google Analytics tracking

Changes are managed from one Web Messenger configuration page for the selected AI agent.

1. Choose which AI agent you are editing

At the top of the configuration page, AskHandle shows which AI agent the Web Messenger belongs to.

If you need to configure a different AI agent, click Switch.

This helps prevent accidentally changing the messenger for the wrong agent.

2. Install the Web Messenger

The top of the page includes the Web Messenger installation information.

Installation Code

Use Installation Code for the standard website installation.

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

When the code is ready to use, the panel shows Ready to install!

If you already installed the widget, you usually do not need to replace the installation code when you later change colors, text, layout, or other messenger settings.

Widget Token

The Widget Token is used for API and SDK implementations.

Pass the token as widgetId when initializing the widget through JavaScript or when using the supported REST/API integration.

For most standard websites, use the Installation Code. The Widget Token is mainly useful for developer-controlled implementations.

3. Configure the Launcher

The Launcher is the floating button visitors use to open the Web Messenger.

Primary color

Set the main launcher and messenger accent color using the Primary color field.

This color is used across the widget for accents and selected controls.

Chat Button Icon

Choose between:

  • Default
  • Custom

If you select Custom, upload your own chat button image.

The current interface supports PNG or JPG and recommends a transparent image when possible.

The launcher preview shown in the configuration uses a 120 × 120 px image area.

Outer ring

Enable Outer ring if you want a 1 px ring around the launcher.

You can set the ring color independently.

This is especially useful when a light logo needs more contrast against a light website background.

Launcher tooltip

Enable Show launcher tooltip to display a short message next to the launcher.

For example:

text
1Hi! How can I help you?

Keep the tooltip short.

You can choose whether the tooltip:

  • Fades after 5s
  • Is Always visible

Auto-open messenger

You can automatically open the messenger after the page loads.

Auto-open is configured separately for:

  • Desktop
  • Mobile

For each one, enter the number of seconds to wait before opening.

The messenger auto-opens once per visitor. If the visitor closes or minimizes it, it will not keep reopening during the same visit.

Use auto-open carefully so the messenger attracts attention without interrupting the visitor too aggressively.

4. Customize the Welcome Screen

The Welcome Screen controls what visitors see before the conversation starts.

Background

Choose between:

  • Color
  • Image/Video

Use a plain color for a simple experience or an image/video for a more branded opening screen.

Enable Show Logo to display a logo at the top of the welcome screen.

You can upload or replace the logo.

The current interface supports a wide logo area up to approximately 960 × 288 px and automatically resizes the image to fit.

Logo Size

Choose:

  • Small
  • Default
  • Large

Use Large when you want the logo to fill more of an otherwise simple welcome screen.

Title

Set the main welcome-screen heading.

Example:

text
1Welcome! How can we help?

Title Text Color

Choose the text color used for the welcome-screen title.

Subtitle

Add a shorter line under the title.

Example:

text
1We reply in seconds

Subtitle Text Color

Choose the text color used for the subtitle.

Start Button Text

Customize the button visitors click to start.

Examples:

text
1Start Chat
2Ask a question
3Get help

Start Button Color

Choose the button background color.

Start Button Text Color

Choose the text color shown inside the start button.

Powered by AskHandle

Use the Powered by AskHandle toggle to control whether AskHandle branding appears at the bottom of the welcome screen, when your plan and configuration allow it.

5. Configure the Pre-Chat Form

The Pre-Chat Form collects visitor information before the conversation starts.

Turn it on if you want to capture contact details before the visitor enters chat.

Label Text Color

Choose the color used for field labels.

Name field

You can enable or disable the Name field.

When enabled, customize:

  • Label
  • Placeholder

Example:

text
1Label: Name
2Placeholder: Your name

Email field

You can enable or disable the Email field.

Customize:

  • Label
  • Placeholder

Example:

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

Phone field

You can enable or disable the Phone field.

Customize:

  • Label
  • Placeholder

Example:

text
1Label: Phone
2Placeholder: +1 (555) 000-0000

Submit Button Text

Customize the button shown at the end of the pre-chat form.

Example:

text
1Start Chat

Use the pre-chat form when you need contact information before the conversation begins.

If speed and low friction are more important, keep the form shorter or leave it turned off.

6. Customize the Chat Screen

The Chat Screen controls how the active conversation looks and behaves.

Show Header Icon

Enable Show Header Icon to display a small image in the widget top bar.

Upload a Header Icon Image when enabled.

The current interface automatically resizes this image to approximately 80 × 80 px.

Header Title

Set the compact title shown in the top bar of the active chat.

Examples:

text
1Customer Support
2Guest Services
3Sales Help

Chat background

Choose between:

  • Color
  • Image/Video

This background appears behind the conversation messages and is independent of the Welcome Screen background.

For uploaded media, the current configuration indicates:

  • JPG / PNG / WebP images up to 2 MB
  • MP4 recommended for videos up to 5 MB

Input Area Background

Choose the background color of the message input area at the bottom.

Input Placeholder

Customize the text shown before the visitor starts typing.

Example:

text
1Type your message...

Show Chat Message Avatar

Enable Show Chat Message Avatar to display an avatar next to AI messages.

Upload or replace the Chat Message Avatar.

The current interface resizes the avatar to approximately 80 × 80 px.

Typing Indicator

Choose what visitors see while the AI is preparing a response:

  • Animated dots
  • Custom text

Use Custom text if you want a more branded or descriptive status message.

7. Customize message colors

You can style visitor and AI messages separately.

User Message

Configure:

  • Text Color
  • Background Color

AI Message

Configure:

  • Text Color
  • Background Color

Using distinct colors makes it easier for visitors to see who sent each message.

8. Configure Layout

The Layout section controls how the messenger appears and how visitors interact with it.

Position

Choose where the messenger appears on the page.

A common option is:

text
1Bottom Right

Size

Choose the messenger size.

The current default shown in the configuration is:

text
1Default (600px)

Border Radius

Enter the corner radius for the messenger.

Example:

text
112

Higher values create more rounded corners.

Text direction

Choose:

  • Left to right
  • Right to left

Use Right to left for languages such as:

  • Arabic
  • Hebrew
  • Persian
  • Urdu

When right-to-left is enabled, welcome text, forms, and the input bar flip direction while message bubbles remain on their usual sides.

Send message with

Choose how visitors send a message from the keyboard.

For example:

  • Enter
  • A Ctrl+Enter-style option, when available

Ctrl+Enter can be easier for visitors typing in Chinese, Japanese, or Korean because Enter may be used to confirm word selection while composing.

9. Configure Privacy & Consent

The Privacy & Consent section lets you show a consent checkbox before the visitor starts chatting.

Enable it when you want visitors to acknowledge your privacy policy, terms, or another notice.

Consent Text

Enter the text shown next to the checkbox.

Markdown links are supported.

Example:

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

You control the linked words and can write the consent text in any language.

Text Color

Choose the consent label text color.

Links still use the primary color.

Required to proceed

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

10. Add Greeting Quick Replies

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

Examples:

text
1What are your prices?
2Book an appointment
3Talk to support
4What services do you offer?

Quick replies help visitors start with one click instead of typing.

Use short, specific options that match common visitor intents.

11. Configure End Chat Confirmation

The End Chat Confirmation section controls the confirmation dialog shown when a visitor tries to end the conversation.

You can customize:

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

Example:

text
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 reduces accidental chat endings.

12. Connect Google Analytics

The Analytics section lets you add a Google Analytics 4 Measurement ID.

Enter a value such as:

text
1G-XXXXXXXXXX

AskHandle can fire Web Messenger events including:

text
1chat_widget_opened
2chat_started
3message_sent
4chat_ended

This can help you measure how visitors interact with the messenger.

The GA4 setting works alongside an existing Google Tag Manager setup on the page.

Leave the field blank to disable this integration.

13. Save your changes

After making updates, click Save Changes.

Changes to design, text, launcher behavior, forms, layout, consent, quick replies, and analytics apply to the existing installed Web Messenger.

You normally do not need to reinstall the widget after changing these settings.

Recommended setup for most websites

A practical starting configuration is:

text
1Primary color: Your main brand color
2Launcher tooltip: Short and helpful
3Auto-open: Only if it improves the visitor experience
4Welcome background: Clean brand color or light image
5Welcome title: Clear and direct
6Subtitle: One short supporting line
7Pre-chat form: Only the fields you really need
8Chat background: High contrast and easy to read
9Text direction: Match your website language
10Privacy consent: Enable if required for your business
11Quick replies: Common visitor intents
12Google Analytics: Add GA4 if you track website events

Best practices

  • Keep the launcher visible without making it intrusive.
  • Use auto-open carefully, especially on mobile.
  • Keep welcome text short.
  • Do not ask for unnecessary information in the pre-chat form.
  • Make user and AI message colors easy to distinguish.
  • Check right-to-left settings if you support RTL languages.
  • Use privacy consent when required by your business or legal policy.
  • Keep greeting quick replies focused on real customer intents.
  • Test the messenger on desktop and mobile after significant design changes.
  • Verify GA4 events if analytics tracking is important to your reporting.

Frequently asked questions

Do I need a developer to customize the messenger?

No. Most visual, behavioral, and visitor-experience settings can be configured directly in AskHandle.

A developer may only be needed to install the Web Messenger code or use the Widget Token for a custom implementation.

Can I customize the floating launcher?

Yes. You can change the primary color, upload a custom launcher icon, add an outer ring, show a tooltip, and configure automatic opening on desktop and mobile.

Can I use a different design for the welcome screen and active chat?

Yes. The Welcome Screen and Chat Screen have separate background and content settings.

Can I collect visitor information before the chat starts?

Yes. Enable the Pre-Chat Form and choose whether to collect name, email, and phone.

Can I support right-to-left languages?

Yes. Set Text direction to Right to left for languages such as Arabic, Hebrew, Persian, or Urdu.

Can I require visitors to agree to a privacy policy?

Yes. Enable Privacy & Consent, add your consent text and links, and turn on Required to proceed if the checkbox must be selected before chat begins.

Can I add quick-reply buttons?

Yes. Greeting Quick Replies appear with the initial greeting and can be used for common questions or actions.

Can I track Web Messenger activity in Google Analytics?

Yes. Add your GA4 Measurement ID in Analytics. AskHandle can send events for widget opens, chat starts, messages sent, and chat endings.

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

No. Once the widget is installed, changes saved in the Web Messenger configuration apply to the existing installation.

← Back to Help Center