WHITEPAPER. Skinning Guide. Let s chat Velaro [email protected] by Velaro

Transcription

1 WHITEPAPER Skinning Guide Let s chat by Velaro Velaro [email protected]

2 INTRODUCTION Throughout the course of a chat conversation, there are a number of different web pages that your visitor encounters including the pages for: The chat conversation The pre chat survey ** The post chat survey ** The unavailable to chat form ** The pre and post click to call surveys ** **Please note that the surveys themselves are not created with the Skinning Engine, the questions/options are created within the Settings > Design section of the Control Panel ( )** Since Velaro s inception in 1999, customers have always had the ability to provide a significant amount of customizations to each of the above web pages. However now, Velaro has taken that ability even farther, allowing our customers to fully customize and enhance their visitor facing chat web pages with the Advanced Skinning Mode offered in the Control Panel's ( Design section. Velaro s advanced skinning engine allows you to design your own custom HTML pages, and place a number of special components on each page. Once a skin is uploaded to your account, Velaro s live help service will parse your HTML, embed any specific chatrelated components needed to successfully engage your visitor, and present the final output to your visitor during the chat. With Velaro s skinning engine, you have total control over how each of the above forms. Below are a few examples of just what the Advanced editor can produce: Normal(Legacy) Editor Default Chat Window

3 Advanced Chat Windows ENABLING ADVANCED MODE First Since Velaro's advanced skinning mode requires knowledge of HTML and some web design capability, it is not required to be used and the legacy(normal) editor which provides a more visual/option oriented is always accessible. For organizations who would not feel comfortable designing their own skins, we recommend using our Normal skin editor. Within the Velaro Control Panel you can easily toggle from the Normal skin editor to the Advanced one, and vice versa. To switch the editor types please follow these steps: 1. Log in to the Velaro Control Panel at 2. Navigate to the Settings > Design section the main menu bar. 3. On the left hand column, below the Current Form selection there is a text link that displays either: "Current Skin Mode: Normal" or "Current Skin Mode: Advanced"

4 4. Click this text link to toggle your account between normal and advanced skin mode. Below is the editor set to the Advanced mode.

5 WHAT DO I NEED? Before modifying any HTML, it will be best to know what you want the final product to look like and how to build around that. We recommend creating designs for each window form (prechat, chat, postchat, etc..) to the actual size you'd like it to be in our system. In each form there will be a few things to consider, which we will cover through the rest of this guide. This document will outline each window form in a template version so that you can easily get an idea of just what each window will need to contain, as well as show you the basics for editing the HTML. At the end of each form, there will be a 'Build It Yourself' section containing the necessary variables/elements required if in the end if your HTML developers and web designers want to create the skin from scratch.

6 EDITING EACH FORM CHAT CONVERSATION By default, your Velaro account will come with standard templates created by our development team that is the same skin as seen in the Normal mode, once you toggle to Advanced you will see the HTML for these templates. In this guide, we will modify the existing template to create our custom skin. **You can also view/download the standard HTML for this skin here** As we saw earlier, below is a comparison of the default chat skin to an advanced version: Default Advanced There are 5 main elements and functions that we need to keep in mind when designing our new chat window: 1. The conversation pane 2. An input field for new text 3. A send button 4. An 'End' button 5. An button **Not required, if you do not wish visitors to be able to send themselves transcripts** 6. Agent Typing status **The typing status is plain text inserted from Velaro, make sure you leave room for this area** Below is my new design, and placement of the 5 elements.

7 MODIFY OUR CHAT HTML TEMPLATE Now that we have an image of what my final product should look like, we can begin to modify the standard template to fit the new design. The overall logic here is to use our new design as background image, and line up the objects of the required fields accordingly. To use your new design as the background for the chat, it will need to be hosted online which can be done through the Velaro. 1. Log into the Velaro Control Panel ( ) with your account's administrative user 2. Navigate to the Install > Image Gallery section 3. Make sure you are within your 'Account Images' folder, then select the Choose File button and select the image from your computer 4. Click the Submit button just below and you should see the image now a part of your gallery. 5. Once hosted you will also need its URL, click your image from the gallery and you'll see a larger preview. For most browsers you will have an option to "Copy Link URL", click that and then paste your URL into a separate document and save it. Now we can begin to modify the HTML of the standard template, below you will find the completed script as I have edited it: <html> <HEAD> <title>##title##</title> <style type="text/css"> /* base style - edit at own risk */ html overflow:hidden;

8 html, body height:100%; margin:0; padding:0; table border collapse:collapse; width:100%; height:100%; /* end base style */ /* Common Chat Window Style */.maindiv height:474px; width:100%; background image: url(' background repeat: no repeat; /* Logo width is also the width of the entire window. This should match the length of the logo.*/.logowidth width:400px; body background color:##bodybgcolor##; color:##bodytextcolor##; #bodysection height:100%;.tbltextcontainer font family:verdana; font size:10pt; color:##bodytextcolor##;

9 SETTING THE BACKGROUND IMAGE: In the header we define an extra class called.maindiv where we also set a background image (the URL we saved to the Control Panel earlier).maindiv height:474px; width:100%; background image: url(' background repeat: no repeat; In the body of the document, we encompass the standard ID elements so that everything appears with our design as the background: <div class="maindiv"> <div id="convocontainer"> <div id="conversation" class="conversation" style="overflow y:auto;"> </div> </div> <textarea id="message" class="message"></textarea> <div id="transcript" class="transcript"> </div> <div id="endchat" class="endchat"> </div> <div id="typingstatus" class="typingstatus"> </div> <div id="sendbutton" class="sendbutton"> </div> </div> The height of your image should be defined within the.maindiv class, and the overall width should be defined.logowidth class that appears next in my code. In this case my image is 400x474 pixels, so the width is set to 400px and my height to 474px. You should also note that Skin Properties list on the left side of the screen should be updated as well to reflect these size changes, so Velaro is properly rendering the window. SETTING THE BACKGROUND IMAGE: Now that your background has been set, we will focus on moving the ID's for each button to the right location and setting their size. We will cover each ID as mentioned originally, but it s important to note a few things at this point. For all ID's the position will be set to absolute to ensure that if the window is manually resized by your visitor, that the placements of the buttons will remain correct. Also you may find for your actual design, that certain placement elements will need to be changed (I.E. using a left margin instead of right), this is normal and should be done so it s most relevant to your design. Developer tools included with browsers such as

10 Google Chrome are a great resource for moving elements in real time and perfecting placement/size. Lastly, the Advanced editor also gives you a set of Skin Properties that are accessible on the left of the Design section of the control panel. Some of these settings will need to be modified and left blank so plain text is not being displayed overtop your design. These locations will be pointed out throughout this guide. EDIT CHAT BUTTON: The.endchat ID is the first to modify in the template; this will be placed over the end chat button you have created:.endchat margin right: 5px; height: 11px; margin top: 17px; width: 52px; display: block; position: absolute; left: 328px; The function of the end chat button in any form is to exit the chat or end that step within the system, if your chat has another step created such as a postchat survey

11 following a competed chat then this will take the visitor to the next form. The standard chat window uses plain text for the end chat button and is modifiable within the skin properties. **Make sure if you do not want to use plain text that you set the "End Chat button text" option in Skin Properties to nothing and click apply** TRANSCRIPT BUTTON The.transcript ID is used to create your button, allowing the visitor to themselves the transcript..transcript width: 60px; height: 20px; float: left; margin top: 425px; margin left: 12px; Once the visitor clicks this button, it will open a separate window allowing them to enter the address they'd wish to receive the transcript to. This is another button that uses plain text by default and you can modify this in the skin properties list under "E mail chat button text", leave this as blank if your design incorporates its own picture SEND BUTTON The.sendbutton ID creates the send button in your chat window that a visitor clicks to send through the text they have type (alternative to the 'Enter' key on a keyboard)..sendbutton margin right: 0; height: 22px; width: 77px; position: absolute; top: 423px; left: 52px; The send button by default uses plain text which is listed in the skin properties as "Send button text", remember to set this option as blank if you do not want to use plain text. THE CONVERSION CONTAINER The convocontainer is where text is displayed once sent through including the visitor s text, the agents, and any system notifications.

12 #convocontainer position:absolute; width: 300px; height: 212px; top:63px; left: 48px; Typically this area is reserved as the largest in the window since it will display the entire conversation, and will scroll accordingly. THE INPUT FIELD The.message ID creates the input field for your visitor to type their text..message width: 300px; position: absolute; height: 93px; top: 301px; left: 48px; border:none; resize: none; It s important to note the resize: none; here since in many browsers input field sizes can be bypassed when manually resizing a window. Setting resize to none will help ensure that your design and window are not compromised if your visitor extends their window height/width. THE AGENT TYPING STATUS The.typingStatus ID is displayed to your visitor when the Agent is typing a message, this lets the user know that the agent is actively participating and can await a response..typingstatus position: absolute; top: 429px; left: 146px; color: #000000; font family: tahoma; font style: italic; width: auto; font size: 12px; font weight: bold;

13 The typing status by default is plain text and is modifiable within the Skin Properties under "Agent typing Notification". If you do not want any notification please set this skin property to blank and then save it. If you'd rather a logo or image to be placed in this notification area, then this should be added into the body of the HTML when the typingstatus ID is called: <div id="typingstatus" class="typingstatus"> <img src=" /> Agent Typing... </div> DEVELOP YOUR OWN CHAT TEMPLATE If you or your web developer would rather build the skin from scratch rather than follow the previous template, then make sure to include the following in your HTML. ID Required Use in Description Header <img> or <span> Header image specified in the Velaro Control Panel. By using this attribute, Velaro dynamically places the proper header that you have assigned to each specific department. You may alternatively define a completely different skin for each department and simply place all images displayed on the chat window on your own servers. Headshot <img> Headshot image specified in the Velaro Control Panel. If this attribute is deployed on your skin, Velaro dynamically places the headshot of the agent who answered the chat in its place. Headshots may be configured in the Velaro image gallery. Conversation X <div> Defines where the ongoing live transcript of the conversation is displayed. Once visitor s create new text in the messages section, it is placed here. As agents add new text, it is added here as well

14 Message X <textarea> Defines the placement of the area which visitors can type new text which will ultimately be added to the conversation. SendButton X <img> or <span> Defines the placement and type of button displayed for letting the visitor commit to sending the new text they have types in the messages section. EndChat X <img> or <span> Defines the placement and type of button displayed for letting the visitor exit the chat conversation. Transcript <img> or <span> Defines the placement and type of button displayed for letting the visitor e mail a copy of the transcript to a specified e mail address. TypingStatus <img> or <span> Defines the placement and type of button displayed for letting the visitor know that the agent on the other end of the conversation is currently typing. Enablesound <img> or <span> Defines the placement and type of button displayed for letting the visitor toggle the sound effects that are played during the course of a conversation. When using an image to display this function, you may add an additional attribute to the <img> tag, srcoff="nosound.gif". As visitors toggle the sound, this image will be displayed when sound is turned off. Postsurvey <img> or text Defines the placement and type of button displayed for letting the visitor launch a separate window to view and submit the post chat survey associated with this chat.

15 Print <img> or text Defines the placement and type of button displayed for letting the visitor launch a separate window to view a printer friendly copy of the transcript. Development of your templates is straightforward, simply design the template using standard HTML elements then include specific ID names in to the components that are required for a functional Velaro form. These ID s are used to determine where to render specific Velaro components within the HTML documents. CUSTOMIZING THE FONT STYLES The display properties of the conversation test can be further customized by defining the following CSS styles within your chat template:.vmsgline.vsystemmsg.vmsgagentname.vmsgagenttext.vmsgvisitorname.vmsgvisitortext Style used for the container of every full line of chat text, including system messages, agent text, and visitor text. All other styles listed in this table are used for inner elements of this primary container element. Style used to display system messages created by the Velaro chat service. Style used to display the agent s name. Style used to display the text that an agent sends to the conversation. Style used to display the visitor s name. Style used to display the text that a visitor sends to the conversation. Below is the most basic example of how to embed Velaro tags in to your HTML: <html> <head> <title>velaro Live Help</title> <style type="text/css">.vmsgline display: block; padding left:2px;.vsystemmsg

16 font style:italic; padding top:2px; font family:tahoma; font size:12px.vmsgagentname display: inline block; color:navy; font weight:bold; padding top:2px; font family:tahoma; font size:12px; vertical align: top; width: 12%; display: inline block;.vmsgagenttext display: inline block; color:black; padding top:2px; font family:tahoma; font size:12px; vertical align: top; width: 87%; display: inline block;.vmsgvisitorname vertical align: top; width: 12%; display: inline block; color:green; font weight:bold; padding top:2px; font family:tahoma; font size:12px;.vmsgvisitortext vertical align: top; width: 87%; display: inline block; color:graytext; padding top:2px; font family:tahoma; font size:12px; </style> </head> <body height="440" width="400"> <img id="header" src= border= 0 /> <div> <div style="width:100%;height:300px;"> <div id="conversation" style="height:300px;" /> </div> <div> <div style="background color:#cccc;"> <div> <textarea id="message" style="width:80%;height:50px;" /> <span

17 </html> id="sendbutton">send</span> </div> <span id="endchat" />CLOSE</span> <span id="typingstatus">agent is typing</span> </div> <script> function test() alert('testing'); </script> </body> PRECHAT/PRECALL SURVEY Up until now, we have viewed only the Chat conversation window design but need to also consider the other forms that your visitor will encounter. The first and most common form next to the Chat form is the Prechat survey (or precall if you utilize Velaro's Click to Call system). This form in many cases is the first thing that your visitor will see if your account is utilizing Prechat surveys. Default Advanced **If you'd like to see Velaro's template outside of the Control Panel, then you can view and download either the Prechat or Precall template.** Please note that your Prechat Survey should not include your survey questions, Velaro will dynamically insert your survey and body text into the design when a chat is launched and you should leave the appropriate amount of room in your design for this. Below is my Prechat survey design, with the appropriate amount of space left open:

18 Like the Chat form, there are a few elements and functions to keep in mind when creating the Prechat survey form: 1. The end chat button 2. The body text **This field is not required to use, unless you want to have any message displayed and modifiable through the control panel and skin properties.** 3. The survey space Below is my finished design with each element highlighted: MODIFY OUR PRECHAT/PRECALL HTML TEMPLATE Just like the Chat skin, the logic here is to the design we have created as the background image and place the necessary elements over top. If your image is not already hosted online, then please follow these steps to upload your design to Velaro directly:

19 1. Log into the Velaro Control Panel ( ) with your account's administrative user 2. Navigate to the Install > Image Gallery section 3. Make sure you are within your 'Account Images' folder, then select the Choose File button and select the image from your computer 4. Click the Submit button just below and you should see the image now a part of your gallery. 5. Once hosted you will also need its URL, click your image from the gallery and you'll see a larger preview. For most browsers you will have an option to "Copy Link URL", click that and then paste your URL into a separate document and save it. Now the HTML can be modified, below is my completed skin with the relevant functions in bold text: <html> <HEAD> <title>##title##</title> <style type="text/css"> /* Base Style Edit at own risk */ html overflow:hidden; html, body height:100%; margin: 0; padding:0; table border collapse:collapse; width:100%; height:100%; /* End Base Style */ /* Common Chat Window Style */ /* Logo width is also the width of the entire window. This should match the length of the logo.*/.logowidth width:400px; body color:##bodytextcolor##; background image: url(' g'); background repeat: no repeat;

20 #bodysection height:100%;.tbltextcontainer font family:verdana; font size:10pt; color:##bodytextcolor##; /* End Common Chat Window Style */.bodytext padding:5px 15px 15px; #footersection height:50px; width:100%; display:block; text align:right; line height:3em;.endchat font family:arial, Verdana, Sans Serif; color:white; font size: 16px; font weight: bold; position:absolute; top: 495px; left: 345px; text decoration: none; #bodysection vertical align:top;.sendbutton font weight:bold; color:#000000; float:right;

21 .tbluserinfo height:auto;.survey height:420px; width:375px; margin left: 10px; margin top:35px;.tbltextcontainer font family:verdana; font size:10pt; color:##bodytextcolor##;.name,. width:170px;.td lbl padding top:3px; vertical align:top; </style> </HEAD> <body width="400" height="474"> <table class="tbltextcontainer logowidth" cellspacing="0" cellpadding="0" border="0" frame="border"> <p> <p> <tbody> <tr> <! Header > <td id="headersection"> </td> </tr> <tr> <! Body Text > <td id="bodytextsection" align="center"> <table class="tbltextcontainer" style="width:auto; margin:0 auto;"> <tbody> <tr> <td>

22 <div id="bodytext" class="bodytext"></div> </td> </tr> </tbody> </table> </td> </tr> <tr> <! Body Section > <td id="bodysection"> <div id="survey" class="survey" style="background color:transparent;"> <table class="tbltextcontainer" style="margin:0 auto; height:auto; width:auto"> <tbody> <tr> <td class="tdname">name:</td> <td class="tdname"> <input id="name" type="text" class="name"></input> </td> </tr> <tr> <td class="td td lbl">e mail (Optional):</td> <td class="td "> <input id=" " type="text" class=" "></input> <br> <a id="sendbutton" class="sendbutton">[click Here to Begin]</a> </td> </tr> </tbody> </table> </div> </td> </tr> <tr> <! Footer > <td id="footersection"> <div id="endchat" class="endchat">exit</div> </td> </tr> </tbody> </table> </body> </HTML>

23 SETTING THE BACKGROUND IMAGE: In the header we define.body to have the background image (the URL we saved to the Control Panel earlier) body color:##bodytextcolor##; background image: url(' background repeat: no repeat; For this window, I define my height and width within the actual body of the HTML itself: <body width="400" height="474"> Just like my chat window, the window is set to 400x474 pixels. SETTING YOUR BODY TEXT The body text is typically used as an introduction to the chat and survey. Its spacing and location is defined within the.bodytext ID.bodyText padding:5px 15px 15px; The body text is not required to use, if your design incorporates some sort of welcome text already or you just don't want any, then you can modify the Body Text field under the Prechat survey Skin Properties. SETTING THE END CHAT BUTTON The.endChat ID comes next, and is used by your visitor to exit if they'd like before submitting the survey and entering a chat..endchat font family:arial, Verdana, Sans Serif; color:white; font size: 16px; font weight: bold; position:absolute; top: 495px; left: 345px; text decoration: none;

24 The standard Prechat window uses plain text for the end chat button and is modifiable within the skin properties. Make sure if you do not want to use plain text that you set the "End Chat button text" option in Skin Properties to nothing and click apply MAKING ROOM FOR THE SURVEY The.survey ID is where your survey will be added dynamically. It is very important to make sure the area is large enough to contain your survey; otherwise a scrollbar will be inserted within the window and will not be visually appealing..survey height:420px; width:375px; margin left: 10px; margin top:35px; DEVELOP YOUR OWN PRECHAT/PRECALL TEMPLATE If you would like to create your own template, then please ensure to include the following into your HTML: ID Required Use In Description Header <img> Header image specified in the Velaro Control Panel. By using this attribute, Velaro dynamically places the proper header that you have assigned to each specific department. You may alternatively define a completely different skin for each department and simply place all images displayed on the chat window on your own servers. Survey X <div> Defines the placement of the actual survey. This component displays the appropriate Velaro survey and allows the visitor to answer the survey questions. All the formatting for the actual survey itself is configured within the Velaro Control Panel > Surveys section. EndChat X <img> or <span> Defines the placement and type of button displayed for letting the visitor close this window.

25 BodyText <span> Defines the placement of the body text section POSTCHAT/POSTCALL SURVEY The Postchat and Postcall survey's are typically used to gather quality assurance ratings and customer feedback about the chat/call they just had. This survey will appear to your visitor after a chat/call takes place. Default Advanced **If you'd like to see Velaro's template outside of the Control Panel, then you can view and download either the Postchat or Postecall template.** Just like the Prechat/precall survey, Velaro will dynamically insert the survey and body text you have created in the Control Panel so your design should leave the appropriate amount of space. Below is my Postchat Survey design with space for the survey in mind:

26 The Postchat and Postcall skins utilize the same basic fields as the Prechat does, including: 1. The end chat button 2. The body text **This field is not required to use, unless you want to have any message displayed and modifiable through the control panel and skin properties.** 3. The survey space Below is my finished design with each element highlighted: MODIFY OUR POSTCHAT/POSTCALL HTML TEMPLATE Just like the Chat skin, the logic here is to the design we have created as the background image and place the necessary elements over top. If your image is not already hosted online, then please follow these steps to upload your design to Velaro directly: 1. Log into the Velaro Control Panel ( ) with your account's administrative user 2. Navigate to the Install > Image Gallery section 3. Make sure you are within your 'Account Images' folder, then select the Choose File button and select the image from your computer 4. Click the Submit button just below and you should see the image now a part of your gallery. 5. Once hosted you will also need its URL, click your image from the gallery and you'll see a larger preview. For most browsers you will have an option to "Copy Link URL", click that and then paste your URL into a separate document and save it.

27 Now the HTML can be modified, below is my completed skin with the relevant functions in bold text: <html> <HEAD> <title>##title##</title> <style type="text/css"> /* Base Style Edit at own risk */ html overflow:hidden; html, body height:100%; margin: 0; padding:0; table border collapse:collapse; width:100%; height:100%; /* End Base Style */ /* Common Chat Window Style */ /* Logo width is also the width of the entire window. This should match the length of the logo.*/.logowidth width:100%; body color:##bodytextcolor##; background image: url(' background repeat: no repeat; #bodysection height:100%;.tbltextcontainer

28 font family:verdana; font size:10pt; color:##bodytextcolor##; /* End Common Chat Window Style */.bodytext padding:5px 15px 15px; #footersection height:50px; width:100%; display:block; text align:right; line height:3em;.endchat font family:arial, Verdana, Sans Serif; color:white; font size: 16px; font weight: bold; position:absolute; top: 650px; left: 345px; text decoration: none; #bodysection vertical align:top;.sendbutton font weight:bold; color:#000000; float:right;.tbluserinfo height:auto;.survey

29 height:550px; width:375px; margin left: 10px; margin top:35px;.tbltextcontainer font family:verdana; font size:10pt; color:##bodytextcolor##;.name,. width:170px;.td lbl padding top:3px; vertical align:top; </style> </HEAD> <body width="400" height="688"> <table class="tbltextcontainer logowidth" cellspacing="0" cellpadding="0" border="0" frame="border"> <p> <p> <tbody> <tr> <! Header > <td id="headersection"> auto;"> </td> </tr> <tr> <! Body Text > <td id="bodytextsection" align="center"> <table class="tbltextcontainer" style="width:auto; margin:0 <tbody> <tr> <td> <div id="bodytext" class="bodytext"></div> </td> </tr> </tbody> </table> </td> </tr>

30 <tr> <! Body Section > <td id="bodysection"> <div id="survey" class="survey" style="backgroundcolor:transparent;"> <table class="tbltextcontainer" style="margin:0 auto; height:auto; width:auto"> <tbody> <tr> <td class="tdname">name:</td> <td class="tdname"> <input id="name" type="text" class="name"></input> </td> </tr> <tr> <td class="td td lbl">e mail (Optional):</td> <td class="td "> <input id=" " type="text" class=" "></input> <br> <a id="sendbutton" class="sendbutton">[click Here to Begin]</a> </td> </tr> </tbody> </table> </div> </td> </tr> <tr> <! Footer > <td id="footersection"> <div id="endchat" class="endchat">exit</div> </td> </tr> </tbody> </table> </body> </HTML> SETTING THE BACKGROUND IMAGE In the header we define.body to have the background image(the URL we saved to the Control Panel earlier) body color:##bodytextcolor##; background

31 image:url(' X.png'); background repeat: no repeat; For this window, I define my height and width within the actual body of the HTML itself: <body width="400" height="688"> Just like my chat window, the window is set to 400x474 pixels. BUTTON AND TEXT AREAS As we mentioned earlier, this form will dynamically insert your Survey as well as other text into the design so there will need to be defined space for each as well as the exit button to close your window. SETTING YOUR BODY TEXT The body text is typically used as an introduction to the chat and survey. Its spacing and location is defined within the.bodytext ID.bodyText padding:5px 15px 15px; The body text is not required to use, if your design incorporates some sort of welcome text already or you just don't want any, then you can modify the Body Text field under the Prechat survey Skin Properties. My example did not utilize the body text, so that property was left blank and the field in the HTML was not used. SETTING THE END CHAT BUTTON The.endChat ID comes next, and is used by your visitor to exit if they'd like before submitting the survey and entering a chat.

32 .endchat font family:arial, Verdana, Sans Serif; color:white; font size: 16px; font weight: bold; position:absolute; top: 650px; left: 345px; text decoration: none; The standard Postchat/Postcall window uses plain text for the end chat button and is modifiable within the skin properties. Make sure if you do not want to use plain text that you set the "End Chat button text" option in Skin Properties to nothing and click apply MAKING ROOM FOR THE SURVEY The.survey ID is where your survey will be added dynamically. It is very important to make sure the area is large enough to contain your survey; otherwise a scrollbar will be inserted within the window and will not be visually appealing..survey height:550px; width:375px; margin left: 10px; margin top:35px; DEVELOP YOUR OWN POSTCHAT/POSTCALL TEMPLATE If you would like to create your own template, then please ensure to include the following into your HTML: ID Required Use In Desciption Header <img> Header image specified in the Velaro Control Panel. By using this attribute, Velaro dynamically places the proper header that you have assigned to each specific department. You may alternatively

33 define a completely different skin for each department and simply place all images displayed on the chat window on your own servers. Survey x <div> Defines the placement of the actual survey. This component displays the appropriate Velaro survey and allows the visitor to answer the survey questions. All the formatting for the actual survey itself is configured within the Velaro Control Panel > Surveys section. Endchat x <img> or <span> Defines the placement and type of button displayed for letting the visitor close this window. BodyText <span> Defines the placement of the body text section UNAVAILABLE TO CHAT The unavailable to chat form is displayed when a visitor attempts to chat but does not get through. This can occur if the no agents are online, if the visitor exits their queue manually, if the queue times out, or if an Agent manually rejects the visitor's chat. Default Advanced **You can also view/download the standard HTML for the Unavailable to chat skin here**

34 Like the other survey templates, you can choose to utilize a standard or custom survey and those will be dynamically added into the design along with any body text you may use. Below is my design with space for the survey. The Unavailable to chat skin utilize the same basic fields as the other surveys, including: 1. The end chat button 2. The body text **This field is not required to use, unless you want to have any message displayed and modifiable through the control panel and skin properties.** 3. The survey space Below is the finished design, with the fields highlighted:

35 MODIFY OUR UNAVAILABLE HTML TEMPLATE Just like the Chat skin, the logic here is to the design we have created as the background image and place the necessary elements over top. If your image is not already hosted online, then please follow these steps to upload your design to Velaro directly: 1. Log into the Velaro Control Panel ( ) with your account's administrative user 2. Navigate to the Install > Image Gallery section 3. Make sure you are within your 'Account Images' folder, then select the Choose File button and select the image from your computer 4. Click the Submit button just below and you should see the image now a part of your gallery. 5. Once hosted you will also need its URL, click your image from the gallery and you'll see a larger preview. For most browsers you will have an option to "Copy Link URL", click that and then paste your URL into a separate document and save it. Now the HTML can be modified, below is my completed skin with the relevant functions in bold text: <html> <HEAD> <title>##title##</title> <style type="text/css"> /* Base Style Edit at own risk */ html overflow:hidden; html, body height:100%; margin: 0; padding:0; table border collapse:collapse; width:100%; height:100%; /* End Base Style */ /* Common Chat Window Style */ /* Logo width is also the width of the entire window. This should match the length of the logo.*/.logowidth

36 width:100%; body color:##bodytextcolor##; background image: url(' ); background repeat: no repeat; #bodysection height:100%;.tbltextcontainer font family:verdana; font size:10pt; color:##bodytextcolor##; /* End Common Chat Window Style */.bodytext padding:5px 15px 15px; #footersection height:50px; width:100%; display:block; text align:right; line height:3em;.endchat font family:arial, Verdana, Sans Serif; color:white; font size: 16px; font weight: bold; position:absolute; top: 495px; left: 345px; text decoration: none;

37 #bodysection vertical align:top;.sendbutton font weight:bold; color:#000000; float:right;.tbluserinfo height:auto;.survey height:460px; width:375px; margin left: 10px; margin top: 10px;.tblTextContainer font family:verdana; font size:10pt; color:##bodytextcolor##;.name,. width:170px;.td lbl padding top:3px; vertical align:top; </style> </HEAD> <bodywidth="400" height="648"> <table class="tbltextcontainer logowidth" cellspacing="0" cellpadding="0" border="0" frame="border"> <p> <p> <tbody> <tr>

38 <! Header > <td id="headersection"> </td> </tr> <tr> <! Body Text > <td id="bodytextsection" align="center" style="padding top:50px;"> <table class="tbltextcontainer" style="width:auto; margin:0 auto;"> <tbody> <tr> <td> <div id="bodytext" class="bodytext"></div> </td> </tr> </tbody> </table> </td> </tr> <tr> <! Body Section > <td id="bodysection"> <div id="survey" class="survey" style="background color:transparent;"> <table class="tbltextcontainer" style="margin:0 auto; height:auto; width:auto"> <tbody> <tr> <td class="tdname">name:</td> <td class="tdname"> <input id="name" type="text" class="name"></input> </td> </tr> <tr> <td class="td td lbl">e mail (Optional):</td> <td class="td "> <input id=" " type="text" class=" "></input> <br> <a id="sendbutton" class="sendbutton">[click Here to Begin]</a> </td> </tr> </tbody> </table> </div> </td>

39 </tr> <tr> <! Footer > <td id="footersection"> <div id="endchat" class="endchat">exit</div> </td> </tr> </tbody> </table> </body> </HTML> SETTING THE BACKGROUND IMAGE In the header we define.body to have the background image(the URL we saved to the Control Panel earlier) body color:##bodytextcolor##; background image: url(' ); background repeat: no repeat; For this window, I define my height and width within the actual body of the HTML itself: <bodywidth="400" height="648"> Just like my chat window, the window is set to 400x474 pixels. BUTTON AND TEXT AREAS As we mentioned earlier, this form will dynamically insert your Survey as well as other text into the design so there will need to be defined space for each as well as the exit button to close your window. SETTING YOUR BODY TEXT The body text is typically used as an introduction to the chat and survey. Its spacing and location is defined within the.bodytext ID

40 .bodytext padding:5px 15px 15px; The body text is not required to use, if your design incorporates some sort of welcome text already or you just don't want any, then you can modify the Body Text field under the Prechat survey Skin Properties. My example did not utilize the body text, so that property was left blank and the field in the HTML was not used. SETTING THE END CHAT BUTTON The.endChat ID comes next, and is used by your visitor to exit if they'd like before submitting the survey and entering a chat..endchat font family:arial, Verdana, Sans Serif; color:white; font size: 16px; font weight: bold; position:absolute; top: 495px; left: 345px; text decoration: none; The standard Unavailable window uses plain text for the end chat button and is modifiable within the skin properties. Make sure if you do not want to use plain text that you set the "End Chat button text" option in Skin Properties to nothing and click apply MAKING ROOM FOR THE SURVEY The.survey ID is where your survey will be added dynamically. It is very important to make sure the area is large enough to contain your survey, otherwise a scrollbar will be inserted within the window and will not be visually appealing..survey height:460px; width:375px; margin left: 10px; margin top: 10px;

41 DEVELOP YOUR OWN UNAVAILABLE TEMPLATE If you would like to create your own template, then please ensure to include the following into your HTML ID Required Use In Description Header <img> Header image specified in the Velaro Control Panel. By using this attribute, Velaro dynamically places the proper header that you have assigned to each specific department. You may alternatively define a completely different skin for each department and simply place all images displayed on the chat window on your own servers. Survey X <div> Defines the placement of the actual survey. This component displays the appropriate Velaro survey and allows the visitor to answer the survey questions. All the formatting for the actual survey itself is configured within the Velaro Control Panel > Surveys section. X <input type=textbox> Defines the placement of the text box field used to collect the visitor s e mail address. If this field is used, it must be used in conjunction with the message, and sendbutton attributes. Message X <textarea> Defines the placement of the area which visitors can type new text which will ultimately be added to the conversation. Sendbutton X <img> or <span> Defines the placement and type of button displayed for letting the visitor commit to sending the new text they have types in the messages section. Endchat X <img>or<span> Defines the placement and type of button displayed for letting the visitor close this window.

42 VELARO RESOURCES AND LINKS STANDARD TEMPLATES To download or view any of the standard templates we have previously viewed and modified, please us the following links: Prechat_Survey_Form Chat_Form Postchat_Survey_Form Unavailable_To_Chat_Form Pre_ClicktoCall_Form Post_ClicktoCall_Form VELARO COMMUNITY AND SUPPORT TEAM For additional resources and guides, please visit our forum based user community here. If you have additional questions as well please feel free to contact the Velaro via chat here, sending your inquiry to or by calling ex 2.