Welcome to the Alive5 Customization Guide. This guide intends to cover the basic design outline of your chat window. Learn more about customization tips, dimensions and more.
(If you are onboarding with Alive5 Support, we’ll need a brand example/sample such as a web page, PDF brochure or design guide.)
While our Chat Window Customization Editor is very easy to use, it is good to familiarize yourself with the individual pieces of the chat window that you can customize. Below is a diagram that shows the individual pieces and their pixel values.
Within the Customization Editor you will be able to control the color and backgrounds of virtually every element within the Header, Chat Section and Footer.
Logo Sizes need to be no less than 64px x 64px to maintain crispness of the logo - but do not have to be square. Large high resolution logos are best. Logos can be centered or justified left or right.
Logo Format needs to be a .PNG file with the background set to transparent to get the best look from a single logo.
Header Logo Spreads - these are background images/logos that are placed on a custom background image of your choice and span the entire header of the chat window. The header area is 320px x 48px. (See example below.)
To welcome your guests, you can set a custom Welcome Message that appears directly under the header. To edit this, simply click the field and type in your message. Click outside the Welcome Message area and it will automatically save.
Furthermore you can edit the background and font color of the Welcome Message to match your company’s branded colors.
Within the chat section you will be able to customize the color and background of each element to create a custom look and feel for your incoming chats.
Within the Customization Editor you will see an Agent Chat Bubble and a User Chat Bubble. Each of these elements can be customized to suit your company’s branded colors.
You can customize the background with a solid color, gradient, tiled background or full-size background. Experiment with different styles to create a user experience unlike any other.
Learn the basics to get up and running fast!
Explore our in-depth guides and new ways to use Alive5.
Turbo-charge your customer service.
Free desktop and mobile apps, extensions and more.
Learn how to setup your Alive5 account.
Learn how to customize your chat/chatbot window.
Learn all about Alive5's chatbots.