Skip to main content
OCLC Support

Insert multiple Qwidgets on a web page

1. How it works

Up to 5 QuestionPoint Qwidgets can now co-exist on the same webpage.

The Qwidgets can be a combination of existing Qwidget code snippets, newly created, or copied Qwidget code snippets.

Each Qwidget on the page (pre-existing or new) must contain the specifically identified unique identifier as described below, embedded within the code snippet.

2. V4 Qwidgets (post 8/25/2013)

If your Qwidget was created or has been updated since August 25, 2013, it’s known as the “V4 Qwidget” and the source code on your webpage will look like this:

Figure 1: V4 Qwidget
Figure 1: V4 Qwidget

Congratulations! Your task will be easier. The code snippet already contains the new and necessary javascript section highlighted at the top:

<script src="http://ajax.googleapis.com/ajax/libs.../jquery.min.js"
type="text/javascript" ></script>

Just follow the instructions in the code and uniquely number each Qwidget snippet as shown in Figure 2.

Figure 2: V4 Qwidget instructions
Figure 2: V4 Qwidget instructions

3. Older Qwidgets

If your Qwidget doesn’t contain “qwidget V4” in the code, follow instructions in Section 4 or Section 5 as described below, depending on the age of the Qwidget. Each page must use an additional new script tag, to allow the multiple Qwidgets to display.

Analyze the page or pages that will host the additional Qwidgets

Chances are that the original, older Qwidget on that page does not yet contain the necessary unique identifier. You must therefore identify how that initial Qwidget is implemented on your target page. What version is it, and how is it displayed: is it in a banner or sidebar that displays on one or more different pages of the website, or is it embedded directly onto that target page?

If the Qwidget is in a banner or side bar that displays on multiple pages, locate the page that contains that Qwidget code and edit that code snippet first, typically using the number “1” as the unique identifier in the Setup steps below. Once that potentially “omnipresent” Qwidget has been identified as Number 1, that number can no longer be used on subsequent Qwidgets.

If the Qwidget is not on a “reused” page section such as a banner or sidebar, edit the existing Qwidget code snippet on the target page itself; again, typically identifying the original Qwidget as number “1”, using the steps below.

4. Instructions for modifying original or copied Qwidget code snippets for very old Qwidgets (pre-October 2012)

Identify the original Qwidget code

There are currently three accepted and working historical Qwidget code formats.

Figure 3: 1st Generation Qwidget code introduced in 2006
Figure 3: 1st Generation Qwidget code introduced in 2006

Figure 4: 2nd Generation Qwidget code introduced in 2008
Figure 4: 2nd Generation Qwidget code introduced in 2008

Edit the original Qwidgets code as follows

Regardless of which type of code comprises your original Qwidget, you must insert the following 2 lines of code within the original Qwidget code, replacing the red X with a unique number between 1 and 5 (typically you would name the original Qwidget “1”):

  1. <div id="qpchatwidget" qwidgetno="X"></div> [inserted at the beginning of the original Qwidget code snippet]
  2. qwidgetno="X" [inserted in the body of the Qwidget code itself]

Your resulting Qwidget code should now look like this:

questionpoint-note-the-insertion-of-#2-above.png
Figure 5: Note the insertion of #2 above, as an element within the body of the script tag

Add additional JavaScript

An additional JavaScript snippet must also be added to webpages containing original V.1 or V.2 Qwidgets:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"
type="text/javascript" ></script>

 Note:  This last additional script tag only needs to appear once per target page, regardless of how many additional Qwidgets (from 1 to 5) appear on the page.

5. Insert additional not-as-old Qwidgets (between October 2012 and August 2013) on the target page

If you are inserting a Qwidget code snippet created after October 13, 2012 but before August 25, 2013, (now known as Version 3), it will have some additional code that must be included on the target page at least once, and it will have a Qwidget number that must be edited by you, replacing the “1” with a different number from 2-5.

The new code that you must add is already included in Figure 6 below. The function is:

<script src="http://ajax.googleapis.com/ajax/libs.../jquery.min.js"
type="text/javascript" ></script>

Figure 6: 3rd Generation Code post 10/2012, pre 8/25/2013
Figure 6: 3rd Generation Code post 10/2012, pre 8/25/2013

6. Support

Prior to going live with your new multiple Qwidget page, we recommend that you test it to ensure that you have followed the steps and added all of the necessary new code. If you have all of the code, you should be able to see 2 Qwidgets on the page. If not, neither Qwidget will appear. If you have difficulties getting the two or more Qwidgets on a single page, please contact David Leslie (leslied@oclc.org) or Carol Bonnefil (bonnefic@oclc.org), and email the html page containing the multiple Qwidgets as built thus far, so that we may examine the code to ascertain the point of failure.

 

  • Was this article helpful?