Tutorial – Your 1st Widget

In this guide, you will build your first Custom Widget, the “Simple Clock”. This is a very quick example, to show you all the steps required to create a Widget.

The tutorial goes through the following steps:

  1. Quickly create a simple Widget, without any type of configuration, to see the minimum steps required. This Widget is a simple digital clock.
  2. We then add two configuration options to the Simple Clock; the font size and an option to show seconds or not. We create the code needed as well as the definition for the configuration options, so that the user can easily define the configuration through the Yodeck UI.
  3. Following this step, is a small modification to enhance performance. The clock should only start when actually shown on screen, and it should stop when the Widget goes off screen.
  4. Finally, we show you some basic CSS code on how you can have a transparent background for your Widget.

Links to each page:

For any questions you may have, reach out and our dev team can help you out.