QuestionPoint

Standard (HTML) Chat Forms

Adding Chat Form to Your Web Site
Home : Support : Implementation Materials : Standard (HTML) Chat Forms : Adding Chat Form to Your Web Site
Select language:

Revised: May 16, 2003

Adding the Patron Chat Form to Your Web Site

Contents

Introduction
Form Editing
Overall Procedure
Removing the Question Field
Making the Question Field Required

Introduction

After you download a patron chat form template, you need to modify the form and add it to your library's Web site. Although you can use the chat form with the same formatting as the QuestionPoint Web site, the form with minimal formatting offers more flexibility for making the form consistent with the formatting on your Web site. You can also modify the form with the QuestionPoint formatting and change its colors, fonts and graphics so that they match those on your Web site. Finally, you can remove the Question field from either template or make this field required.

This document provides a step-by-step procedure for completing these tasks.

Back to top
 

Form Editing

  • When the procedure includes a step that requires you to edit the form, open the form using an editor of your choice. You can use as a Windows text editor (such as TextPad or NotePad), an HTML editor, or a UNIX editor. Use a word processor only if it allows you to see the HTML code and it allows you to save files in plain text format. Save the form with an .htm or .html extension, whichever is the convention for your Web site.

  • The items to modify in the form appear in a box like this:
<!-- Begin library hidden input field -->
<!-- Replace the value attribute "1" with your library's QuestionPoint institution ID, supplied by OCLC, in the library hidden input field -->
<input type=hidden name="library" value="1" >
<!-- End library hidden input field -->

with the code to modify highlighted, such as this: value="1".

  • Unless a procedure step directs to you modify the JavaScript, do not modify or remove anything between these tags:

    <script language="JavaScript">
        and
    </script>
Back to top
 

Overall Procedure

This procedure takes an incremental approach, where you frequently test modifications to the form and ensure that they are working correctly before moving on to subsequent modifications.

Step Action
1 Make a backup copy of the form you downloaded.
2 Open the form file in a text editor.
3

Are you planning on modifying the form text so that it is in a language other than English?

  • Yes. Go to step 4.
  • No. Go to step 5.
4

To allow your patrons to see QuestionPoint messages in your language, follow these steps:

  • Find the section of the form that looks like this:

<!-- Begin language hidden input field -->
<!-- If this form will be in a language other than English, replace the value attribute "1" with the appropriate value for your language, as described in
http://questionpoint.org/web/members/
addingchatform.html. -->
<input type=hidden name="language" value="1">
<!-- End language hidden input field -->

  • Use this table to find the value that corresponds to your language:

    Language Value
    French (Français)
    2
    Spanish (Español)
    3
    Chinese-Traditional (中文(繁體))
    4
    Chinese-Simplified (中文(简体))
    5
    Dutch (Nederlands)
    7
    Slovene (Slovensko)
    8
    German (Deutsch)
    10
    Korean (한국어)
    12

  • Change value="1" so that it contains your library's language value, like this:
<input type=hidden name="language" value="3">
5

Add your library's institution ID to the form's hidden "library" field:

  • Find the section of the form that looks like this:
<!-- Begin library hidden input field -->
<!-- Replace the value attribute "1" with your library's QuestionPoint institution ID, supplied by OCLC, in the library hidden input field -->
<input type=hidden name="library" value="1" >
<!-- End library hidden input field -->
  • Change value="1" so that it contains your library's institution ID, like this:
<input type=hidden name="library" value="10097" >
How can I find my library's institution ID?
  • Log into QuestionPoint.
  • If you do not see the Home screen, click the Home link in the black bar at the top of the screen.
  • Your institution ID appears under your institution's name.
6 Save and close the form file.
7 Add the form to your library Web site test or staging area. This is wherever you test additions to your site before moving them into your live Web site, the one accessible to patrons and other users.
8 Use the form to open a chat session. Make sure that the session shows up on the QuestionPoint chat monitor.
9

Open the form in an editor and make any modifications you wish to the form's page title, image, or introductory text. You are also free to add more images and text elsewhere on the page. The code shown below is from the chat form with minimal formatting. The other forms may be slightly different but the changes you make will be similar.

Page Title

<html>
<head>
<!--Modify the next line to insert your page title-->
<title>Chat Form Example #2 [QuestionPoint] - Change to your page title</title>

Image

<table width="95%" cellpadding="3" cellspacing="0" align="center">
  <tr>
    <td colspan="2">
    <!-- This is a placeholder for a graphic of your choice. -->
    <img src="images/image_placeholder.gif"
       width="200" height="110">
   </td>
  </tr>

Introductory Text

<td colspan="2">
<!-- Modify the data in this table cell (down through the </td> tag) as needed.-->
<p>&nbsp;<br>
Welcome to the QuestionPoint Ask a Librarian service, a Web-based reference service that helps libraries deliver reference services via e-mail and chat. QuestionPoint is brought to you by your library. </p>
<p>To chat with a librarian, enter your name and e-mail address, and if you wish, your question; then click Chat. Another browser window opens for the chat session.
&nbsp; </p>
</td>

Save and close the form file.
10 Repeat steps 7 and 8 to test your modifications.
11

Would you like to:
12 Repeat steps 7 and 8 to test your modifications (removing the Question field or making it required).
13 Apply your library Web site's formatting (style sheet, top and bottom navigation links, colors, fonts, and so on) to the form.
14 Add links to the form from other pages on your Web site in your test or staging area.
15 Repeat steps 7 and 8 to test any modifications you made in steps 13 and 14.
16 When you are satisfied with the form's appearance and functioning, add the form to your library's live Web site.

Back to top

Removing the Question Field

To remove the Question field from your form, perform these steps:

Step Action
1

Delete these lines from the file:

<!-- Start of question field -->
<tr>
  <th width="20%" align="right">
    <label for="question"
     accesskey="Q">Question:</label>
  </th>
  <td width="80%">
     <textarea name="question" rows="7"
      cols="50"></textarea>
   </td>
</tr>
<!-- End of question field -->
2 Save and close the file.
3 Return to step 12 of the overall procedure.
Back to top

Making the Question Field Required

To make the Question field required, follow these steps:

Step Action
1 Go to the JavaScript section at the top of the file, between these lines:
<script language="JavaScript">
    and
</script>
2 Remove the comment characters (//) from the line highlighted below:

function checkIt(form) {
   var name = form.chat_name.value;
   var email = form.chat_email.value;
   /*Library: To make the question field
   required, remove the comment characters
   (//) from the next line and
   other sections where indicated.*/
   //var ques = form.question.value;
   var lib = form.library.value;
   var msg = '';
3 Remove the comment characters (//) from each of these lines.

//if (ques.length < 1) {
// if(msg.length > 0)
// msg+=', ';
// msg += 'Question';
//}
4 To indicate that a field is required, change the field's screen label in a way consistent with your question form's design, such as preceding the field's label with an asterisk.

Example:

<!-- Start of question field -->
<tr>
  <th width="20%" align="right">
   <label for="question" accesskey="Q">
    *Question:</label>
  </th>
  <td width="80%">
   <textarea name="question" rows="7"
      cols="50"></textarea>
   </td>
</tr>
<!-- End of question field -->
5 Return to step 12 of the overall procedure.
Back to top