Customization Guide

Last updated: October, 2021

Introduction

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.

Required Assets

  • PNG Logo
  • Primary brand color (# hex value)
  • Secondary and Tertiary (accent) colors (# hex values)
  • Widget image (call to action)

(If you are onboarding with Alive5 Support, we’ll need a brand example/sample such as a web page, PDF brochure or design guide.)

Chat Window

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.

Chat UI

Overview

screenshot

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.

Best Practices: Header, Logo Sizes and Format

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.)

Best Practices

Overview

screenshot

Welcome Message

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.

Chat Section

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.

Agent Versus Users

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.

Backgrounds

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.

flight_takeoff
Quick Start

Learn the basics to get up and running fast!

extension
How To Guides

Explore our in-depth guides and new ways to use Alive5.

wysiwyg
API Reference

Turbo-charge your customer service.

get_app
Apps & Downloads

Free desktop and mobile apps, extensions and more.

play_arrow
Video Setup Guides

Learn how to setup your Alive5 account.

color_lens
Customization Guide

Learn how to customize your chat/chatbot window.

smart_toy
Chatbot Overview

Learn all about Alive5's chatbots.

© 2020 Alive Technologies Inc.