Web Clock

Swipeclock’s Web Clock is built to be stand-alone or as an embeddable widget. Embedding as a widget is easily done using an HTML iframe or object tag. Below is a code example of creating an iframe to display the web clock using a generated employee token.

<!DOCTYPE html>

<html>
<head>
  <title>Embedded Web Clock Sample</title>
</head>
<body>
  <h2>Web Clock Sample</h2>
  <div id="result">
    <iframe src="https://clock.payrollservers.us/?enclosed=1&compact=1&showess=1&jwt=[replace with employee JWT]" style="height: 900px; width: 100%;"></iframe>
  </div>
</body>
</html>

Sample Embedded Web Clock

Embedded Web Clock Parameters

The Web Clock can be presented on an integrator’s page or portal in two ways: 1) as a link that opens the Web Clock in another tab, or 2) as a widget embedded in an iframe on the portal page.

When embedding the web clock, you can also apply a few settings via query strings that help control the layout of the clock. These query string settings include:

Query String

Name

Value(s) Description
enclosed 1 (recommended)

0

If set to 1, the background and other extraneous content is removed from the page when rendering and the clock will present a more compact layout, making the presentation more compatible with being embedded in an iframe.
compact 1 (recommended)

0

If set to 1, the Web Clock UI elements are rendered smaller, allowing for a slightly smaller layout.
showess 1

0

If set to 1, a single sign on link is shown in the Web Clock to Swipeclock’s TWP ESS system, implemented as opening a new browser window/tab (assuming that the Client configuration allows for the employee to use the Employee Portal).

 

Note: The presence of a parameter will trigger the clock’s use, regardless of the value of the parameter. e.g., Providing a parameter as enclosed=false will still render the clock in the enclosed presentation.

Sample Embedded Clock With Enclosed=true

Sample Embedded Clock With Enclosed=true and Compact=true

Sample Embedded Clock with Enclosed=true and Compact=true and Showess=true