Contact Us 

Puzzuka Integration Notes

Embedding in a <div>

The following code can be used to embed the Puzzuka™ puzzle in a positioned div on your page.

<div id="divPuzzuka" style="width: 480px; height: 360px;">
  <script type="text/javascript" src="http://www.puzzuka.com/Puzzle.ashx?id=hostID&w=480&h=360&l=en"></script>
</div>

The service, Puzzle.ashx, responds to the following parameters:
id: The host ID of the site hosting the puzzle. This should be the domain name to ensure that it is unique.
w: The width of the advert image to render (This will be the width of the hosting div, divPuzzuka). Default is 300.
h: The height of the advert image to render (This will be the height of the hosting div, divPuzzuka). Default is 250.
l: The language of the hosting site. Default is en. Support is currently provided for:

  • ar: Arabic
  • de: German
  • en: English (Intl.)
  • es: Spanish (EU.)
  • fr: French (Fr.)
  • it: Italian
  • ru: Russian
  • zh: zh-CHS - Simplified Chinese

Standard widths and heights are: 300x250 and 480x360. To include support for additional sizes, please contact Puzzuka™ Support.

This service returns Javascript that runs in the host page. The debug version of this code is 23Kb in size. This will be compressed to less than 10Kb for final release [6 April 2009] . Care has been taken to ensure that objects running are named with the prefix 'Puzzuka' so that name conflicts do not occur. The same applies to objects (divs and images) created by the script and inserted into the page.

All objects created by the script are confined to the bounding div with id divPuzzuka. This includes the puzzle construct itself, except that this div is absolutely positioned to the centre of the current window. The first time it will appear in response to a mouse-over event. It is built so that users can easily close it, and thereafter it does not appear except when the Puzzuka advert is clicked.

All links and url's resolve back to Puzzuka.com only, and where these display content, the content is either confined to the puzzle component, or they open in a new window.

The embedded script may change slightly in the near future to allow for minor changes in the user interface, and to fix minor problems that are discovered.

Embedding in an <iframe>

Inline frames can block the puzzle so that it can't be seen or played. This can happen if the puzzle div (divPuzzuka) is a child of the frame element.

To fix this, divPuzzuka can be given the styles position: absolute; top: topval; left: leftval; to position it over the frame.

Browser compatibility may be a problem - the embedded puzzle may appear in different positions in different browsers. We suggest finding the correct position in each target browser, and then apply conditional styles to divPuzzuka. Here's an example:

<style type="text/css">.puzzuka{top: 80px; left: 270px;}</style>
<!--[if ie]><style type="text/css">.puzzuka{top: 80px; left: 270px;}</style><![endif]-->
<div class="puzzuka" id="divPuzzuka" style="width: 480px; height: 360px; position: absolute;">
  <script type="text/javascript" src="http://www.puzzuka.com/Puzzle.ashx?id=someID&w=480&h=360&l=en"></script>
</div>

Important: HTML Standards

It is important to include the XHTML 1.0 Transitional DOCTYPE directive and the 1999/xhtml namespance in the head tag:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head> ...etc.

If this is not correct then the puzzle will not display correctly.

For special requirements and additional help, please contact Puzzuka™ Support.