5. Zipping and Uploading the Custom Sample Clock Widget

Create the zip package

Every Widget is packaged as a zip archive. You add the “index.html” and any other file you want in that zip archive.

index.html file name

Keep in mind that the “index.html” file must be in the main folder of the zip archive and all related resources must use relative paths.

Since we do not have any other file, just add the “index.html” file you created above to a new zip file called ” SimpleClock.zip “.

Upload your Custom Widget to your Yodeck Account

To use your newly created Custom Widget, you need to upload it to the Yodeck Portal.

  1. Log in to your Yodeck Account.
  2. On the main menu on the left, click on “Widgets”.
  3. Click on the button in the lower-left corner saying “+Add Widget”.
  4. Click the “Custom Widget” button next to All widgets
  5. Click on the “Create HTML Widget” button to upload your new Custom Widget.
  6. Fill out the form:
    1. Name: Type “Simple Clock”. That’s the name of your Custom Widget, which your users will see when they try to add a new instance of your Custom Widget. Try keeping this as short as possible, 2-3 words max.
    2. Description: Type in a description for your Custom Widget, so that your users can read and understand what this Widget does exactly.
    3. Zoom Factor (%) and Auto Adjust Zoom have the same meaning as for Web Pages. Skip them for this example.
    4. Click on the New ZIP file field and select the zip archive ” SimpleClock.zip ” you created above.
    5. In the UI Configuration field use the UI configuration that you created in this step:
      2. Add Options to the Clock Widget#2.AddOptionstotheClockWidget-ProvideaUIConfigurationForm
  7. Click the “Save” button to upload and create your new Custom Widget.

Use the Custom Sample Clock Widget

Your Custom Widget should now be available for use. First, create an instance of your Custom Widget.

  1. Log in to your Yodeck Account.
  2. On the main menu on the left, click on “Widgets”.
  3. Click on the button saying “Add Widget”. In the menu that appears, you should select “Simple Clock” ( the sample clock that you created ).
  4. A form will appear. Since we do not have any configuration parameters yet for our Custom Widget, the only (always there) parameters are:
    1. Name : a name for this Widget instance you are creating. Use “My Clock no1”.
    2. Description : a more detailed description, if needed.
  5. Click on the “Save” button to create the new instance of your Widget.

Now, go ahead to your Player and add the Widgets instance to display it on screen!