Customizing the Chat Widget

A quick guide on how to customise the widget's appearance, language, and texts.

Only Admins of the chat account can customize the Chat Widget.

1. The appearance of the Chat Widget:

I. Login to your HappyFox Chat Account, go to Manage >> Appearance.

II. Changes to the widget appearance can be previewed on the right side. 

III. Remember to "Save" the settings after customising.

a) Widget Color: You can choose widget colour that goes with your website's theme.

b) Text Color: Set the chat widget text's color to be black or white based on the color chosen for chat widget.

c) Chat widget position: This option allows to you set the widget's position on your website.

d) Widget Size: An option to set the chat widget's size when the widget is in maximized state.

e) Chat Badge: An option to set the widget when in minimised state to a compact/full mode.

f) Agent Picture: Toggling ON 'Show agent profile picture' will display Agent's profile picture to the visitor once the agent joins the chat. Turning OFF will display the default chat bubble. (To set agent picture, refer this article here.)

g) Show maximized chat window: To show the Chat window in maximized/opened state when a visitor lands on your website. Turning OFF will keep the widget in the minimized state.

h) Chat Rating: To ask chat rating from customers after the chat ends. More details here.

i) Remove branding: To hide the "Powered by HappyFox Chat" branding on the chat widget on your website and chat transcript emails (sent to agents and customers).
j) Show Agent name on the chat window(Available from Mighty plan) : To show/hide the agent name on the widget, you can simply turn on/off the setting - Show agent display name.

2. The texts on the Chat Widget:

Go to Manage >> Messages.

Chat widget language - Set your preferred widget language.

You can edit the texts that appear in the following fields in your preferred language. 

  • Chat window title
  • Chat button title
  • Offline chat button title
  • Welcome text
  • Offline welcome text
  • Start button
  • Offline send message button
  • First message (This the auto-message which you can set so it will see to be sent to customer as soon as they fill the form and click start chat)

Note: The texts in these fields have text limits which vary for each field.

3. Pre-chat form:

Go to Manage >> Pre-Chat form.

  1. Show Pre-Chat form: To collect visitor details like name, email, and phone before starting a chat. Turning it OFF will enable the visitors to chat directly without entering any details. More details here.
  2. Visitor details: Collect Visitor Name, Email, and Phone number. You can collect the prefer details of your visitor and can also make any of the details optional.
  3. Departments: To allow customers to choose departments like sales, support, development and connect with them. More details here.