WHITEPAPER. Skinning Guide. Let s chat Velaro by Velaro

Size: px
Start display at page:

Download "WHITEPAPER. Skinning Guide. Let s chat. 800.9.Velaro www.velaro.com info@velaro.com. 2012 by Velaro"

Transcription

1 WHITEPAPER Skinning Guide Let s chat by Velaro Velaro

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.

Chat Window Skinning Creation Guide

Chat Window Skinning Creation Guide Chat Window Skinning Creation Guide Throughout the course of a chat conversation, there are a number of different web pages that are displayed to your website visitors, including: The pre-chat survey The

More information

Web Design Basics. Cindy Royal, Ph.D. Associate Professor Texas State University

Web Design Basics. Cindy Royal, Ph.D. Associate Professor Texas State University Web Design Basics Cindy Royal, Ph.D. Associate Professor Texas State University HTML and CSS HTML stands for Hypertext Markup Language. It is the main language of the Web. While there are other languages

More information

Caldes CM12: Content Management Software Introduction v1.9

Caldes CM12: Content Management Software Introduction v1.9 Caldes CM12: Content Management Software Introduction v1.9 Enterprise Version: If you are using Express, please contact us. Background Information This manual assumes that you have some basic knowledge

More information

Website Login Integration

Website Login Integration SSO Widget Website Login Integration October 2015 Table of Contents Introduction... 3 Getting Started... 5 Creating your Login Form... 5 Full code for the example (including CSS and JavaScript):... 7 2

More information

HTML TIPS FOR DESIGNING

HTML TIPS FOR DESIGNING This is the first column. Look at me, I m the second column.

More information

Introduction to XHTML. 2010, Robert K. Moniot 1

Introduction to XHTML. 2010, Robert K. Moniot 1 Chapter 4 Introduction to XHTML 2010, Robert K. Moniot 1 OBJECTIVES In this chapter, you will learn: Characteristics of XHTML vs. older HTML. How to write XHTML to create web pages: Controlling document

More information

Introduction to Web Design Curriculum Sample

Introduction to Web Design Curriculum Sample Introduction to Web Design Curriculum Sample Thank you for evaluating our curriculum pack for your school! We have assembled what we believe to be the finest collection of materials anywhere to teach basic

More information

Quick Start Guide. Installation and Setup

Quick Start Guide. Installation and Setup Quick Start Guide Installation and Setup Introduction Velaro s live help and survey management system provides an exciting new way to engage your customers and website visitors. While adding any new technology

More information

HTML5 and CSS3 Part 1: Using HTML and CSS to Create a Website Layout

HTML5 and CSS3 Part 1: Using HTML and CSS to Create a Website Layout CALIFORNIA STATE UNIVERSITY, LOS ANGELES INFORMATION TECHNOLOGY SERVICES HTML5 and CSS3 Part 1: Using HTML and CSS to Create a Website Layout Fall 2011, Version 1.0 Table of Contents Introduction...3 Downloading

More information

ecommercesoftwareone Advance User s Guide -www.ecommercesoftwareone.com

ecommercesoftwareone Advance User s Guide -www.ecommercesoftwareone.com Advance User s Guide -www.ecommercesoftwareone.com Contents Background 3 Method 4 Step 1 - Select Advance site layout 4 Step 2 - Identify Home page code of top/left and bottom/right sections 6 Step 3 -

More information

Professional & Workgroup Editions

Professional & Workgroup Editions Professional & Workgroup Editions Add a popup window for scheduling appointments on your own web page using HTML Date: August 2, 2011 Page 1 Overview This document describes how to insert a popup window

More information

COMMON CUSTOMIZATIONS

COMMON CUSTOMIZATIONS COMMON CUSTOMIZATIONS As always, if you have questions about any of these features, please contact us by e-mail at pposupport@museumsoftware.com or by phone at 1-800-562-6080. EDIT FOOTER TEXT Included

More information

Cisco Adaptive Security Appliance (ASA) Web VPN Portal Customization: Solution Brief

Cisco Adaptive Security Appliance (ASA) Web VPN Portal Customization: Solution Brief Guide Cisco Adaptive Security Appliance (ASA) Web VPN Portal Customization: Solution Brief Author: Ashur Kanoon August 2012 For further information, questions and comments please contact ccbu-pricing@cisco.com

More information

07 Forms. 1 About Forms. 2 The FORM Tag. 1.1 Form Handlers

07 Forms. 1 About Forms. 2 The FORM Tag. 1.1 Form Handlers 1 About Forms For a website to be successful, it is important to be able to get feedback from visitors to your site. This could be a request for information, general comments on your site or even a product

More information

MAGENTO THEME SHOE STORE

MAGENTO THEME SHOE STORE MAGENTO THEME SHOE STORE Developer: BSEtec Email: support@bsetec.com Website: www.bsetec.com Facebook Profile: License: GPLv3 or later License URL: http://www.gnu.org/licenses/gpl-3.0-standalone.html 1

More information

Using Style Sheets for Consistency

Using Style Sheets for Consistency Cascading Style Sheets enable you to easily maintain a consistent look across all the pages of a web site. In addition, they extend the power of HTML. For example, style sheets permit specifying point

More information

Web Design I. Spring 2009 Kevin Cole Gallaudet University 2009.03.05

Web Design I. Spring 2009 Kevin Cole Gallaudet University 2009.03.05 Web Design I Spring 2009 Kevin Cole Gallaudet University 2009.03.05 Layout Page banner, sidebar, main content, footer Old method: Use , , New method: and "float" CSS property Think

More information

ICE: HTML, CSS, and Validation

ICE: HTML, CSS, and Validation ICE: HTML, CSS, and Validation Formatting a Recipe NAME: Overview Today you will be given an existing HTML page that already has significant content, in this case, a recipe. Your tasks are to: mark it

More information

CREATING A NEWSLETTER IN ADOBE DREAMWEAVER CS5 (step-by-step directions)

CREATING A NEWSLETTER IN ADOBE DREAMWEAVER CS5 (step-by-step directions) CREATING A NEWSLETTER IN ADOBE DREAMWEAVER CS5 (step-by-step directions) Step 1 - DEFINE A NEW WEB SITE - 5 POINTS 1. From the welcome window that opens select the Dreamweaver Site... or from the main

More information

WP Popup Magic User Guide

WP Popup Magic User Guide WP Popup Magic User Guide Plugin version 2.6+ Prepared by Scott Bernadot WP Popup Magic User Guide Page 1 Introduction Thank you so much for your purchase! We're excited to present you with the most magical

More information

Email Campaign Guidelines and Best Practices

Email Campaign Guidelines and Best Practices epromo Guidelines HTML Maximum width 700px (length = N/A) Maximum total file size, including all images = 200KB Only use inline CSS, no stylesheets Use tables, rather than layout Use more TEXT instead

More information

Web Development 1 A4 Project Description Web Architecture

Web Development 1 A4 Project Description Web Architecture Web Development 1 Introduction to A4, Architecture, Core Technologies A4 Project Description 2 Web Architecture 3 Web Service Web Service Web Service Browser Javascript Database Javascript Other Stuff:

More information

HTML Tables. IT 3203 Introduction to Web Development

HTML Tables. IT 3203 Introduction to Web Development IT 3203 Introduction to Web Development Tables and Forms September 3 HTML Tables Tables are your friend: Data in rows and columns Positioning of information (But you should use style sheets for this) Slicing

More information

How to Properly Compose E-Mail HTML Code : 1

How to Properly Compose E-Mail HTML Code : 1 How to Properly Compose E-Mail HTML Code : 1 For any successful business, creating and sending great looking e-mail is essential to project a professional image. With the proliferation of numerous e-mail

More information

Designing HTML Emails for Use in the Advanced Editor

Designing HTML Emails for Use in the Advanced Editor Designing HTML Emails for Use in the Advanced Editor For years, we at Swiftpage have heard a recurring request from our customers: wouldn t it be great if you could create an HTML document, import it into

More information

Google Sites: Creating, editing, and sharing a site

Google Sites: Creating, editing, and sharing a site Google Sites: Creating, editing, and sharing a site Google Sites is an application that makes building a website for your organization as easy as editing a document. With Google Sites, teams can quickly

More information

Web Building Blocks. Joseph Gilbert User Experience Web Developer University of Virginia Library joe.gilbert@virginia.

Web Building Blocks. Joseph Gilbert User Experience Web Developer University of Virginia Library joe.gilbert@virginia. Web Building Blocks Core Concepts for HTML & CSS Joseph Gilbert User Experience Web Developer University of Virginia Library joe.gilbert@virginia.edu @joegilbert Why Learn the Building Blocks? The idea

More information

Web Design and Databases WD: Class 7: HTML and CSS Part 3

Web Design and Databases WD: Class 7: HTML and CSS Part 3 Web Design and Databases WD: Class 7: HTML and CSS Part 3 Dr Helen Hastie Dept of Computer Science Heriot-Watt University Some contributions from Head First HTML with CSS and XHTML, O Reilly Recap! HTML

More information

How to Add a Transparent Flash FLV movie to your Web Page Tutorial by R. Berdan Oct 16 2008

How to Add a Transparent Flash FLV movie to your Web Page Tutorial by R. Berdan Oct 16 2008 How to Add a Transparent Flash FLV movie to your Web Page Tutorial by R. Berdan Oct 16 2008 To do this tutorial you will need Flash 8 or higher, Dreamweaver 8 or higher. You will also need some movie clips

More information

Create Your own Company s Design Theme

Create Your own Company s Design Theme Create Your own Company s Design Theme A simple yet effective approach to custom design theme INTRODUCTION Iron Speed Designer out of the box already gives you a good collection of design themes, up to

More information

Embedding a Data View dynamic report into an existing web-page

Embedding a Data View dynamic report into an existing web-page Embedding a Data View dynamic report into an existing web-page Author: GeoWise User Support Released: 23/11/2011 Version: 6.4.4 Embedding a Data View dynamic report into an existing web-page Table of Contents

More information

Timeline for Microsoft Dynamics CRM

Timeline for Microsoft Dynamics CRM Timeline for Microsoft Dynamics CRM A beautiful and intuitive way to view activity or record history for CRM entities Version 2 Contents Why a timeline?... 3 What does the timeline do?... 3 Default entities

More information

Smartphones and tablets: If you have a data plan, use the SMTP server setting for the company that provides this service.

Smartphones and tablets: If you have a data plan, use the SMTP server setting for the company that provides this service. ARTSPHERE USER MANUAL Hosting for versions 5.0 and 5.1 The hosting control panel is where your website is located. We refer to this as the cpanel. To access the cpanel add /cpanel to your domain name (for

More information

Building a Horizontal Menu in Dreamweaver CS3 Using Spry R. Berdan

Building a Horizontal Menu in Dreamweaver CS3 Using Spry R. Berdan Building a Horizontal Menu in Dreamweaver CS3 Using Spry R. Berdan In earlier versions of dreamweaver web developers attach drop down menus to graphics or hyperlinks by using the behavior box. Dreamweaver

More information

How-to Guide: MIT DLC Drupal Cloud Theme

How-to Guide: MIT DLC Drupal Cloud Theme How-to Guide: MIT DLC Drupal Cloud Theme This guide will show you how to take your initial Drupal Cloud site... and turn it into something more like this, using the MIT DLC Drupal Cloud theme. See this

More information

Outline of CSS: Cascading Style Sheets

Outline of CSS: Cascading Style Sheets Outline of CSS: Cascading Style Sheets nigelbuckner 2014 This is an introduction to CSS showing how styles are written, types of style sheets, CSS selectors, the cascade, grouping styles and how styles

More information

RIT Message Center Compose and Send Messages

RIT Message Center Compose and Send Messages RIT Message Center Compose and Send Messages Table of Contents Table of Contents... 2 Logging into Message Center... 3 Category Display... 3 Message Center: Create a Message... 4 Create a New Message without

More information

Further web design: HTML forms

Further web design: HTML forms Further web design: HTML forms Practical workbook Aims and Learning Objectives The aim of this document is to introduce HTML forms. By the end of this course you will be able to: use existing forms on

More information

Website Planning Checklist

Website Planning Checklist Website Planning Checklist The following checklist will help clarify your needs and goals when creating a website you ll be surprised at how many decisions must be made before any production begins! Even

More information

Web Development I & II*

Web Development I & II* Web Development I & II* Career Cluster Information Technology Course Code 10161 Prerequisite(s) Computer Applications Introduction to Information Technology (recommended) Computer Information Technology

More information

Magento Responsive Theme Design

Magento Responsive Theme Design Magento Responsive Theme Design Richard Carter Chapter No. 2 "Making Your Store Responsive" In this package, you will find: A Biography of the author of the book A preview chapter from the book, Chapter

More information

Making Responsive Emails

Making Responsive Emails Making Responsive Emails Who Am I? Justine Jordan Wearer of Many Hats, Litmus @meladorri @litmusapp #CSSsummit litmus.com/lp/csssummit Sample HTML, slides, templates, frameworks, and other goodies. Disclaimer:

More information

A send-a-friend application with ASP Smart Mailer

A send-a-friend application with ASP Smart Mailer A send-a-friend application with ASP Smart Mailer Every site likes more visitors. One of the ways that big sites do this is using a simple form that allows people to send their friends a quick email about

More information

Creating the Surf Shop website Part3 REVISED

Creating the Surf Shop website Part3 REVISED Creating the Surf Shop website Part3 REVISED Part 2 Recap: You should have the navigation completed for the website before starting Part 3. 1)Create a new DIV in index.html. It should come after banner

More information

NDSU Technology Learning & Media Center. Introduction to Google Sites

NDSU Technology Learning & Media Center. Introduction to Google Sites NDSU Technology Learning & Media Center QBB 150C 231-5130 www.ndsu.edu/its/tlmc Introduction to Google Sites Get Help at the TLMC 1. Get help with class projects on a walk-in basis; student learning assistants

More information

Table of Contents. What is ProSite? What is Behance? How do ProSite & Behance work together? Get Started in 6 Easy Steps.

Table of Contents. What is ProSite? What is Behance? How do ProSite & Behance work together? Get Started in 6 Easy Steps. The Beginners Guide Table of Contents 03 04 05 06 34 35 What is ProSite? What is Behance? How do ProSite & Behance work together? Get Started in 6 Easy Steps See Live Examples Need More Help? What is ProSite?

More information

Fortis Theme. User Guide. v1.0.0. Magento theme by Infortis. Copyright 2012 Infortis

Fortis Theme. User Guide. v1.0.0. Magento theme by Infortis. Copyright 2012 Infortis Fortis Theme v1.0.0 Magento theme by Infortis User Guide Copyright 2012 Infortis 1 Table of Contents 1. Introduction...3 2. Installation...4 3. Basic Configuration...5 3.1 Enable Fortis Theme...5 3.2 Enable

More information

Advanced Drupal Features and Techniques

Advanced Drupal Features and Techniques Advanced Drupal Features and Techniques Mount Holyoke College Office of Communications and Marketing 04/2/15 This MHC Drupal Manual contains proprietary information. It is the express property of Mount

More information

Basic tutorial for Dreamweaver CS5

Basic tutorial for Dreamweaver CS5 Basic tutorial for Dreamweaver CS5 Creating a New Website: When you first open up Dreamweaver, a welcome screen introduces the user to some basic options to start creating websites. If you re going to

More information

EUROPEAN COMPUTER DRIVING LICENCE / INTERNATIONAL COMPUTER DRIVING LICENCE WEB EDITING

EUROPEAN COMPUTER DRIVING LICENCE / INTERNATIONAL COMPUTER DRIVING LICENCE WEB EDITING EUROPEAN COMPUTER DRIVING LICENCE / INTERNATIONAL COMPUTER DRIVING LICENCE WEB EDITING The European Computer Driving Licence Foundation Ltd. Portview House Thorncastle Street Dublin 4 Ireland Tel: + 353

More information

Sample Table. Columns. Column 1 Column 2 Column 3 Row 1 Cell 1 Cell 2 Cell 3 Row 2 Cell 4 Cell 5 Cell 6 Row 3 Cell 7 Cell 8 Cell 9.

Sample Table. Columns. Column 1 Column 2 Column 3 Row 1 Cell 1 Cell 2 Cell 3 Row 2 Cell 4 Cell 5 Cell 6 Row 3 Cell 7 Cell 8 Cell 9. Working with Tables in Microsoft Word The purpose of this document is to lead you through the steps of creating, editing and deleting tables and parts of tables. This document follows a tutorial format

More information

WebFOCUS BI Portal: S.I.M.P.L.E. as can be

WebFOCUS BI Portal: S.I.M.P.L.E. as can be WebFOCUS BI Portal: S.I.M.P.L.E. as can be Author: Matthew Lerner Company: Information Builders Presentation Abstract: This hands-on session will introduce attendees to the new WebFOCUS BI Portal. We will

More information

Create a Simple Website. Intel Easy Steps 1 2012 Intel Corporation All rights reserved.

Create a Simple Website. Intel Easy Steps 1 2012 Intel Corporation All rights reserved. Create a Simple Website Intel Easy Steps 1 2012 Intel Corporation Website Creating a Simple Website As more and more people are using the Internet to get information, it has become very important for businesses

More information

Startup Guide. Version 2.3.9

Startup Guide. Version 2.3.9 Startup Guide Version 2.3.9 Installation and initial setup Your welcome email included a link to download the ORBTR plugin. Save the software to your hard drive and log into the admin panel of your WordPress

More information

Creating Web Pages with Microsoft FrontPage

Creating Web Pages with Microsoft FrontPage Creating Web Pages with Microsoft FrontPage 1. Page Properties 1.1 Basic page information Choose File Properties. Type the name of the Title of the page, for example Template. And then click OK. Short

More information

Coding HTML Email: Tips, Tricks and Best Practices

Coding HTML Email: Tips, Tricks and Best Practices Before you begin reading PRINT the report out on paper. I assure you that you ll receive much more benefit from studying over the information, rather than simply browsing through it on your computer screen.

More information

Create a Google Site in DonsApp

Create a Google Site in DonsApp Create a Google Site in DonsApp 1 Google Web Site Interactive. Constructivist. Collaborative. Communities. WHAT IS GOOGLE SITE? With one single click, you can create a website without any knowledge of

More information

Introduction... 3. Designing your Common Template... 4. Designing your Shop Top Page... 6. Product Page Design... 8. Featured Products...

Introduction... 3. Designing your Common Template... 4. Designing your Shop Top Page... 6. Product Page Design... 8. Featured Products... Introduction... 3 Designing your Common Template... 4 Common Template Dimensions... 5 Designing your Shop Top Page... 6 Shop Top Page Dimensions... 7 Product Page Design... 8 Editing the Product Page layout...

More information

How to Edit Your Website

How to Edit Your Website How to Edit Your Website A guide to using your Content Management System Overview 2 Accessing the CMS 2 Choosing Your Language 2 Resetting Your Password 3 Sites 4 Favorites 4 Pages 5 Creating Pages 5 Managing

More information

Making Content Editable. Create re-usable email templates with total control over the sections you can (and more importantly can't) change.

Making Content Editable. Create re-usable email templates with total control over the sections you can (and more importantly can't) change. Making Content Editable Create re-usable email templates with total control over the sections you can (and more importantly can't) change. Single Line Outputs a string you can modify in the

More information

Web Portal User Guide. Version 6.0

Web Portal User Guide. Version 6.0 Web Portal User Guide Version 6.0 2013 Pitney Bowes Software Inc. All rights reserved. This document may contain confidential and proprietary information belonging to Pitney Bowes Inc. and/or its subsidiaries

More information

Interspire Website Publisher Developer Documentation. Template Customization Guide

Interspire Website Publisher Developer Documentation. Template Customization Guide Interspire Website Publisher Developer Documentation Template Customization Guide Table of Contents Introduction... 1 Template Directory Structure... 2 The Style Guide File... 4 Blocks... 4 What are blocks?...

More information

Custom Reporting System User Guide

Custom Reporting System User Guide Citibank Custom Reporting System User Guide April 2012 Version 8.1.1 Transaction Services Citibank Custom Reporting System User Guide Table of Contents Table of Contents User Guide Overview...2 Subscribe

More information

EBOX Digital Content Management System (CMS) User Guide For Site Owners & Administrators

EBOX Digital Content Management System (CMS) User Guide For Site Owners & Administrators EBOX Digital Content Management System (CMS) User Guide For Site Owners & Administrators Version 1.0 Last Updated on 15 th October 2011 Table of Contents Introduction... 3 File Manager... 5 Site Log...

More information

How to Create a Mobile Responsive Template in ExactTarget

How to Create a Mobile Responsive Template in ExactTarget How to Create a Mobile Responsive Template in ExactTarget This manual contains the following: Section 1: How to create a new mobile responsive template for a Business Unit/Artist Section 2: How to adjust

More information

CHAPTER 10. When you complete this chapter, you will be able to:

CHAPTER 10. When you complete this chapter, you will be able to: Data Tables CHAPTER 10 When you complete this chapter, you will be able to: Use table elements Use table headers and footers Group columns Style table borders Apply padding, margins, and fl oats to tables

More information

Style & Layout in the web: CSS and Bootstrap

Style & Layout in the web: CSS and Bootstrap Style & Layout in the web: CSS and Bootstrap Ambient intelligence: technology and design Fulvio Corno Politecnico di Torino, 2014/2015 Goal Styling web content Advanced layout in web pages Responsive layouts

More information

Single Page Web App Generator (SPWAG)

Single Page Web App Generator (SPWAG) Single Page Web App Generator (SPWAG) Members Lauren Zou (ljz2112) Aftab Khan (ajk2194) Richard Chiou (rc2758) Yunhe (John) Wang (yw2439) Aditya Majumdar (am3713) Motivation In 2012, HTML5 and CSS3 took

More information

!!!!!!!! Startup Guide. Version 2.7

!!!!!!!! Startup Guide. Version 2.7 Startup Guide Version 2.7 Installation and initial setup Your welcome email included a link to download the ORBTR plugin. Save the software to your hard drive and log into the admin panel of your WordPress

More information

Building Your First Drupal 8 Company Site

Building Your First Drupal 8 Company Site Building Websites with Drupal: Learn from the Experts Article Series Building Your First Drupal 8 Company Site by Todd Tomlinson July, 2014 Unicon is a Registered Trademark of Unicon, Inc. All other product

More information

Building A Very Simple Web Site

Building A Very Simple Web Site Sitecore CMS 6.2 Building A Very Simple Web Site Rev 100601 Sitecore CMS 6. 2 Building A Very Simple Web Site A Self-Study Guide for Developers Table of Contents Chapter 1 Introduction... 3 Chapter 2 Building

More information

Umbraco v4 Editors Manual

Umbraco v4 Editors Manual Umbraco v4 Editors Manual Produced by the Umbraco Community Umbraco // The Friendly CMS Contents 1 Introduction... 3 2 Getting Started with Umbraco... 4 2.1 Logging On... 4 2.2 The Edit Mode Interface...

More information

How to Use Swiftpage for Microsoft Excel

How to Use Swiftpage for Microsoft Excel How to Use Swiftpage for Microsoft Excel 1 Table of Contents Basics of the Swiftpage for Microsoft Excel Integration....3 How to Install Swiftpage for Microsoft Excel and Set Up Your Account...4 Creating

More information

WEB DESIGN LAB PART- A HTML LABORATORY MANUAL FOR 3 RD SEM IS AND CS (2011-2012)

WEB DESIGN LAB PART- A HTML LABORATORY MANUAL FOR 3 RD SEM IS AND CS (2011-2012) WEB DESIGN LAB PART- A HTML LABORATORY MANUAL FOR 3 RD SEM IS AND CS (2011-2012) BY MISS. SAVITHA R LECTURER INFORMATION SCIENCE DEPTATMENT GOVERNMENT POLYTECHNIC GULBARGA FOR ANY FEEDBACK CONTACT TO EMAIL:

More information

CMS Training. Prepared for the Nature Conservancy. March 2012

CMS Training. Prepared for the Nature Conservancy. March 2012 CMS Training Prepared for the Nature Conservancy March 2012 Session Objectives... 3 Structure and General Functionality... 4 Section Objectives... 4 Six Advantages of using CMS... 4 Basic navigation...

More information

Using Adobe Dreamweaver CS4 (10.0)

Using Adobe Dreamweaver CS4 (10.0) Getting Started Before you begin create a folder on your desktop called DreamweaverTraining This is where you will save your pages. Inside of the DreamweaverTraining folder, create another folder called

More information

PASTPERFECT-ONLINE DESIGN GUIDE

PASTPERFECT-ONLINE DESIGN GUIDE PASTPERFECT-ONLINE DESIGN GUIDE INTRODUCTION Making your collections available and searchable online to Internet visitors is an exciting venture, now made easier with PastPerfect-Online. Once you have

More information

Microsoft Expression Web Quickstart Guide

Microsoft Expression Web Quickstart Guide Microsoft Expression Web Quickstart Guide Expression Web Quickstart Guide (20-Minute Training) Welcome to Expression Web. When you first launch the program, you ll find a number of task panes, toolbars,

More information

ADOBE DREAMWEAVER CS3 TUTORIAL

ADOBE DREAMWEAVER CS3 TUTORIAL ADOBE DREAMWEAVER CS3 TUTORIAL 1 TABLE OF CONTENTS I. GETTING S TARTED... 2 II. CREATING A WEBPAGE... 2 III. DESIGN AND LAYOUT... 3 IV. INSERTING AND USING TABLES... 4 A. WHY USE TABLES... 4 B. HOW TO

More information

MCH Strategic Data Best Practices Review

MCH Strategic Data Best Practices Review MCH Strategic Data Best Practices Review Presenters Alex Bardoff Manager, Creative Services abardoff@whatcounts.com Lindsey McFadden Manager, Campaign Production Services lmcfadden@whatcounts.com 2 Creative

More information

Creating HTML authored webpages using a text editor

Creating HTML authored webpages using a text editor GRC 175 Assignment 1 Creating HTML authored webpages using a text editor Tasks: 1. Acquire web host space with ad free provider 2. Create an index webpage (index.html) 3. Create a class management webpage

More information

SPHOL326: Designing a SharePoint 2013 Site. Hands-On Lab. Lab Manual

SPHOL326: Designing a SharePoint 2013 Site. Hands-On Lab. Lab Manual 2013 SPHOL326: Designing a SharePoint 2013 Site Hands-On Lab Lab Manual This document is provided as-is. Information and views expressed in this document, including URL and other Internet Web site references,

More information

Where do I start? DIGICATION E-PORTFOLIO HELP GUIDE. Log in to Digication

Where do I start? DIGICATION E-PORTFOLIO HELP GUIDE. Log in to Digication You will be directed to the "Portfolio Settings! page. On this page you will fill out basic DIGICATION E-PORTFOLIO HELP GUIDE Where do I start? Log in to Digication Go to your school!s Digication login

More information

BlueHornet Whitepaper

BlueHornet Whitepaper BlueHornet Whitepaper Best Practices for HTML Email Rendering BlueHornet.com Page Page 1 1 2007 Inc. A wholly owned subsidiary of Digital River, Inc. (619) 295-1856 2150 W. Washington Street #110 San Diego,

More information

HTML Forms and CONTROLS

HTML Forms and CONTROLS HTML Forms and CONTROLS Web forms also called Fill-out Forms, let a user return information to a web server for some action. The processing of incoming data is handled by a script or program written in

More information

Dreamweaver CS5. Module 1: Website Development

Dreamweaver CS5. Module 1: Website Development Dreamweaver CS5 Module 1: Website Development Dreamweaver CS5 Module 1: Website Development Last revised: October 29, 2010 Copyrights and Trademarks 2010 Nishikai Consulting, Helen Nishikai Oakland, CA

More information

Hypercosm. Studio. www.hypercosm.com

Hypercosm. Studio. www.hypercosm.com Hypercosm Studio www.hypercosm.com Hypercosm Studio Guide 3 Revision: November 2005 Copyright 2005 Hypercosm LLC All rights reserved. Hypercosm, OMAR, Hypercosm 3D Player, and Hypercosm Studio are trademarks

More information

BASICS OF WEB DESIGN CHAPTER 2 HTML BASICS KEY CONCEPTS COPYRIGHT 2013 TERRY ANN MORRIS, ED.D

BASICS OF WEB DESIGN CHAPTER 2 HTML BASICS KEY CONCEPTS COPYRIGHT 2013 TERRY ANN MORRIS, ED.D BASICS OF WEB DESIGN CHAPTER 2 HTML BASICS KEY CONCEPTS COPYRIGHT 2013 TERRY ANN MORRIS, ED.D 1 LEARNING OUTCOMES Describe the anatomy of a web page Format the body of a web page with block-level elements

More information

Creating your personal website. Installing necessary programs Creating a website Publishing a website

Creating your personal website. Installing necessary programs Creating a website Publishing a website Creating your personal website Installing necessary programs Creating a website Publishing a website The objective of these instructions is to aid in the production of a personal website published on

More information

Inspiring Creative Fun Ysbrydoledig Creadigol Hwyl. Web Design in Nvu Workbook 1

Inspiring Creative Fun Ysbrydoledig Creadigol Hwyl. Web Design in Nvu Workbook 1 Inspiring Creative Fun Ysbrydoledig Creadigol Hwyl Web Design in Nvu Workbook 1 The demand for Web Development skills is at an all time high due to the growing demand for businesses and individuals to

More information

How to Build a SharePoint Website

How to Build a SharePoint Website How to Build a SharePoint Website Beginners Guide to SharePoint Overview: 1. Introduction 2. Access your SharePoint Site 3. Edit Your Home Page 4. Working With Text 5. Inserting Pictures 6. Making Tables

More information

File types There are certain image file types that can be used in a web page. They are:

File types There are certain image file types that can be used in a web page. They are: Using Images in web design (Dreamweaver CC) In this document: Image file types for web pages Inserting an image Resizing an image in Dreamweaver CSS properties for image alignment and responsiveness nigelbuckner

More information

CS412 Interactive Lab Creating a Simple Web Form

CS412 Interactive Lab Creating a Simple Web Form CS412 Interactive Lab Creating a Simple Web Form Introduction In this laboratory, we will create a simple web form using HTML. You have seen several examples of HTML pages and forms as you have worked

More information

Web Ambassador Training on the CMS

Web Ambassador Training on the CMS Web Ambassador Training on the CMS Learning Objectives Upon completion of this training, participants will be able to: Describe what is a CMS and how to login Upload files and images Organize content Create

More information

Microsoft Access 2010 handout

Microsoft Access 2010 handout Microsoft Access 2010 handout Access 2010 is a relational database program you can use to create and manage large quantities of data. You can use Access to manage anything from a home inventory to a giant

More information

Please select one of the topics below.

Please select one of the topics below. Thanks for choosing WYSIWYG Web Builder! In this section we will give a short introduction to Web Builder so you can start building your web site in (almost) no time. Please select one of the topics below.

More information

Portals and Hosted Files

Portals and Hosted Files 12 Portals and Hosted Files This chapter introduces Progress Rollbase Portals, portal pages, portal visitors setup and management, portal access control and login/authentication and recommended guidelines

More information

Slide.Show Quick Start Guide

Slide.Show Quick Start Guide Slide.Show Quick Start Guide Vertigo Software December 2007 Contents Introduction... 1 Your first slideshow with Slide.Show... 1 Step 1: Embed the control... 2 Step 2: Configure the control... 3 Step 3:

More information

Mastering the JangoMail EditLive HTML Editor

Mastering the JangoMail EditLive HTML Editor JangoMail Tutorial Mastering the JangoMail EditLive HTML Editor With JangoMail, you have the option to use our built-in WYSIWYG HTML Editors to compose and send your message. Note: Please disable any pop

More information

Self-Service Portal Implementation Guide

Self-Service Portal Implementation Guide Self-Service Portal Implementation Guide Salesforce, Winter 6 @salesforcedocs Last updated: October 0, 05 Copyright 000 05 salesforce.com, inc. All rights reserved. Salesforce is a registered trademark

More information