Effortless Clock Integration in Q-Play: A Step-by-Step Guide

How to get an Analog Clock in Q-Play

This guide covers the v1 version of Q-Play. We recommend switching to v2 when you can, as that's the version we're actively developing and supporting going forward. See our guide on migrating from v1 to v2 to get started.


1. Head to the website timeanddate, and then press Continue.
Web page offering free clocks for websites, featuring main features like accuracy, automatic DST adjustment, and support for multiple time zones and languages



2. Select the design you want to use, and click Continue.
Web page displaying a selection of free digital and analog clock templates for websites, in various styles and colors, with a 'Continue' button below.



3. Select a timezone for the clock, and customize the design to your liking in these next few steps. Press Continue after each step.
Web page customization section for free clocks, with options to select the location, clock size, face background, face circles, and number display for an analog clock.



4. Copy the URL under the HTML Code.
Web page section showing HTML code for an iframe element to embed a free clock on a website, with instructions for insertion.



5. Open Q-Play in your browserand head to DesignTool. Here you can click on the series, where you want the clock to be.


6. When you've found the spot where you want the analog clock to be in. Click on the Webpage App, under apps on the right side.
A content creation interface with a blank canvas and a toolbar on the right side featuring various app icons, including Klipfolio, for drag-and-drop design.



7. Click on the app element, and paste the URL in Webpage URL Box
Settings panel for a web page app with fields to enter the title, mode, background color, webpage URL, update time, and view width.



8. You now have a working clock in Q-Play!
User interface for a content creation tool showing a canvas with an analog clock element selected and a properties panel for webpage settings on the right side.