Can I customize my chat box for guests?

 

The chat box appearance is all about you.  There is no imposed branding and you can fully customize chat box skins to look however you'd like. You can add a title, change the colors, and fully overhaul all of the CSS if you wish. 

You can use the same chat box skin with any or all of your queues. You can also use different chat box skins on the same queue to customize the look of a chat box on different web pages.

Need design inspiration? Check out our chat box gallery on Pinterest!

You can edit your chat box skins in two main ways: via the admin dashboard, or if you prefer, you can customize them by hand.

---

Chat box skin designer in the admin dashboard

In the admin dashboard, go to the "Chat Skins" page (Main, CA, EU, SG). You can create a new chat box skin by clicking the purple "Create new skin" button near the top of the page. Or if you want to update an existing chat box skin, you can find and edit one from your chat skin gallery. Finding an existing chat box skin is easy with the search box at the top of the page. You can search by ID, descriptive name, or chat box title text.

Once you've created a new chat box skin or selected a skin to edit from your gallery, you'll see the settings for that skin. Each skin has an ID and descriptive name associated with it. The descriptive name is never shown to guests but instead provides a way for you to keep track of what this skin is used for or perhaps where the skin is used. By default the descriptive name for a chat box skin when it is initially created is the date and time of creation.

As you customize your chat skin, you'll see the visualization for that chat skin update on the right-hand side of the screen. You can also click within the visualization to highlight the customizations on the left which correspond to that area.

The most commonly tweaked skin settings are grouped into what we call "Branding Basics" which includes the following:

• the background color for your chat box (the area outside the transcript and typing areas)
• the height/width of the chat box. When a chat box skin is initially associated with a chat snippet, these height/width values are used as the default but you can adjust as needed later within the chat snippet
• the presence theme which shows guests when chat is available, busy, away, or offline
• the title which is shown to guests across the top of the chat box. You can adjust wording, font color, and font size.
• the identity of the operator as shown to guests. All operators who answer a chat will appear to guests under this common identity. You can also adjust font color for this identity.
• the font color for the typing notification shown to guests. The typing notification is automatically generated and lets the guest know when the operator is actively typing a message.
• the font color for the guest's identity. The actual identity is always "me."
• an optional greeting that the guest sees when the chat box loads. 

Additional configuration options are grouped under "Additional Flair" which includes the following:

• the outer border for the chat box. Generally this field is comprised of three values -- the width of the border, the type of line used for the border, and the color of the border. For example if you wanted a black solid thin line, you'd specify the border as "1px solid black" See this resource for guidance on options available for borders. This setting is used as the default when you initially associate a chat skin with a chat snippet but you can adjust the border as needed later within the chat snippet.
• chat transcript area settings which include the background color, border, and message color.
• enable/disable sound notifications for guests. Guests can later override this setting during a chat if they wish.
• add a chat policy which can optionally require acknowledgement before a guest can initiate a chat.
• disable file upload capabilities for guests. Guests will not be able to send images or files to any operator.
• icon color
• chat typing area settings which include background color, border, and optional custom typing instructions which override the default "Type here to chat. Press ENTER to send."

Experiment with changing the various fields. Be sure to click Save or Apply button near the bottom when you are done making changes to your chat box skin.

Advanced skin customizations

Within the skin designer, there are three tabs -- Branding (covered above), Wicked CSS Hacks, and Custom JavaScript. The Wicked CSS Hacks and Custom JavaScript tabs are for advanced, highly customized skin design. The Wicked CSS Hacks tab allows you to provide custom CSS to override the standard chat box styling. And the Custom JavaScript tab lets you to make dynamic changes within the chat box.

 

---

Using your skin with your chat box

If you already have a chat snippet on your web page and need to update the skin, visit the "Chat Snippets" page in the admin dashboard and edit your snippet to use the new chat box skin.  Otherwise you can use the chat snippets page in the admin dashboard to create a new snippet that leverages your spiffy new skin.

Or, to test your newly-customized chat box skin by hand in your browser, supply your chat box skin ID number using the skin variable on the direct URL.

FAQ URL: