Engagement Window Studio Document Version: 1.2 October 2017

2

Engagement Window Studio Provide a consistent experience across devices. To provide a consistent experience across devices, you can design identical engagement windows for both desktop and mobile versions of LiveEngage. Using the Engagement window studio, design a chat window once and use it across any number of engagements. To access the Engagement window studio 1. Open the Engagement window library.

2. Hover over an existing window design and click Edit or click Add new to design a new window. Once you have designed the window it will be added to your Engagement window library for future use. 3. After clicking Add new, the Engagement window studio opens. Note: In the Engagement window library, you can delete window designs that are not in use by clicking the Action menu and selecting Delete. In addition, you can set a default window design by clicking the Action menu and selecting Set as default. To see which campaigns are using each window design, hover over the link icon. The Engagement window studio allows you to customize the look and feel of both desktop and mobile windows. Any change you perform to the design of the desktop window takes effect in the mobile window as well.

3

Using the Engagement window studio, you can:

• Customize the look and feel of engagement windows. • Add a banner, a picture of your agent, or another image. • Add surveys. • Add action buttons, e.g. to request an email of the chat transcript.

For instructions on designing windows with the Engagement window studio, click one or more of the following items:

To edit the window name and description .............................................................................. 4 To select a predefined color scheme for your window .......................................................... 4 To customize chat window elements ....................................................................................... 5 To add a header to the window ................................................................................................ 6 To add an image to the window ............................................................................................... 8 To add additional functionality to your window ...................................................................... 9 To add and edit surveys ......................................................................................................... 11

4

To edit the window name and description 1. Click the window name (in this example, Support). 2. Enter a new window name and type in a description. The window name and description are used to help you identify windows in the library. The name and description display in the Engagement window library.

To select a predefined color scheme for your window 1. Click the Look and feel customization button. 2. Select your preferred theme. You can choose a theme and use it as a base for further customization.

5

To customize chat window elements You can fully customize the chat window to suit your brand by changing the colors, fonts, visitor bubble, agent bubble, system messages, info line and chat window background. Click each of the window elements and follow the steps below:

1. Click an element. 2. From the properties window, customize the element according to your brand. 3. You can change the icon set of some elements to suit the background. Tip: Choose bright icons for dark backgrounds and dark icons for bright backgrounds.

6

Note: Surveys and dialogs inherit the main chat window’s colors.

• The background color is the same as the chat window background. • Text is the same color and font as the Automatic Messages. • Buttons have the same look and feel of the title bar

To add a header to the window 1. Click the Add Element button. 2. Click the +Add button. 3. Insert the URL of the image. 4. Click the checkmark button to save. 5. Insert a Target URL that will open in a new tab when the banner is clicked. 6. Add alt text that will display when the image fails to load, or for visitor who require visual aid (this ensures the banner meets accessibility standards).

7

7. Choose a background color, if you’d like. 8. Set the position of the banner: Left, Right or Middle. 9. Choose between pinning the banner to the top of the window, or letting it scroll up during the conversation Note:

• If your header is not the full body width of the window, the background color will be displayed on the sides.

• If you upload images with a height of more than 32 pixels, the system will resize the image to fit the available height (32 pixels), while maintaining the ratio of the image.

• If the width of the image is greater than the widget of the window, it will align to the right.

• The recommended width (140 pixels) is mostly for logos.

8

To add an image to the window

1. Click the Add Element button. The Add element menu opens.

2. Click Select to add an image. 3. Select an image from the Gallery or click Custom to add your own image.

9

4. Choose a background color, if you’d like. Note: If your image is not full body width of the window, the background color will be displayed on the sides.

To add additional functionality to your window 1. Click the Action menu button or click the + button in the desktop preview.

10

2. Select the action buttons that you would like to add, e.g., email transcripts. A preview displays on the screen.

3. To change the color of the Action menu, click the actions area in the chat window. The action window will open.

11

4. Change the font, background color and/or icon color (dark or bright), as desired.

To add and edit surveys 1. Click the Views drop-down menu to view the list of surveys. Then do one or more of the following:

• Click a survey enable button to enable and edit it. • Click a survey to edit it. • Click a question to edit or delete it. • Click Add Question to add a new question.

12

Note: Surveys and dialogs inherit the main chat window’s colors (see example below.)

• The background color is the same as the chat window background. • Text is the same color and font as the Automatic Messages. • Buttons inherit the look and feel of the title bar.

13

This document, materials or presentation, whether offered online or presented in hard copy ("LivePerson Informational Tools") is for informational purposes only. LIVEPERSON, INC. PROVIDES THESE LIVEPERSON INFORMATIONAL TOOLS "AS IS" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING, BUT NOT LIMITED TO THE IMPLIED WARRANTIES OF MERCHANTABILITY OR FITNESS FOR A PARTICULAR PURPOSE. The LivePerson Informational Tools contain LivePerson proprietary and confidential materials. No part of the LivePerson Informational Tools may be modified, altered, reproduced, stored in or introduced into a retrieval system, or transmitted in any form or by any means (electronic, mechanical, photocopying, recording, or otherwise), without the prior written permission of LivePerson, Inc., except as otherwise permitted by law. Prior to publication, reasonable effort was made to validate this information. The LivePerson Information Tools may include technical inaccuracies or typographical errors. Actual savings or results achieved may be different from those outlined in the LivePerson Informational Tools. The recipient shall not alter or remove any part of this statement. Trademarks or service marks of LivePerson may not be used in any manner without LivePerson's express written consent. All other company and product names mentioned are used only for identification purposes and may be trademarks or registered trademarks of their respective companies. LivePerson shall not be liable for any direct, indirect, incidental, special, consequential or exemplary damages, including but not limited to, damages for loss of profits, goodwill, use, data or other intangible losses resulting from the use or the inability to use the LivePerson Information Tools, including any information contained herein. © 2017 LivePerson, Inc. All rights reserved.