Creating a New Creative Widget

General

This article describes steps for creating a new creative widget using the Widget Editor.

For information on available Clinch SDK methods, see ClinchSDK Reference for HTML Creative Widgets.

Create a New Widget

Step 1: Create the Widget and Its Manifest Parameters

To create a new widget and its Manifest parameters from scratch:

1. Go to Libraries > Creative Widgets.
2. Click Create > Create New.
   • You'll be directed to the Widget Editor.
   • Note: You can also create a widget from an account library of existing widgets or through a ZIP file import.
3. Toggle Activate within the Widgets Info section to activate the widget for use in creative templates.
4. Optional. Enter a description for your widget.
5. Add one or more Manifest parameters by clicking the plus sign. (These manifest rows represent values that you want to make configurable in the widget. For example, in a countdown widget, you may add date, color, size, font, and other rows.)
6.  
   1. Enter a key value for the parameter. This is the unique JavaScript identifier to be used in the widget Code section.
   2. Enter a name for the parameter.

   3. Select a field type for the parameter and follow its subsequent steps:

      Field Type	Steps
      Text / Text Area	Enter free-form text in the Default Value field.
      Font	Select one or more supported languages for the widget's font in the Default Value dropdown. Reducing the number of supported languages for the font helps to reduce the overall ad size.
      Color	Select or enter a HEX color code in the Default Value field.
      Number	Enter a number in the Default Value field.
      Image	Drag and drop an image file or select one from your account's Assets Library within the Default Value field.
      Video	Drag and drop a video file or select one from your account's Assets Library within the Default Value field.
      Date	Select or enter a UTC timestamp within the Default Value field.
      Select	Click Options + to add one or more selector options. Enter a name and value for each option. Select a default selector option within the Default Value field.
      Boolean	Select Yes or No in the Default Value field.
      Script	Upload a JavaScript file from your local device or the Assets Library within the Default Value field. Note: Ensure any scripts you wish to include for the widget are uploaded through this method. Otherwise, issues may occur when using the widget in a creative template.
      Style Sheet	Upload a CSS file from your local device or the Assets Library within the Default Value field. Note: Ensure any stylesheets you wish to include for the widget are uploaded through this method. Otherwise, issues may occur when using the widget in a creative template.

   4. Optional. Group Manifest parameters using the Section field.
      • When a Section selection isn't made, the parameter will display in the General category when editing the widget within a creative template.

Step 2: Code the Widget

After establishing Manifest parameters, you can utilize them and the Clinch SDK in your creative widget code:

1. Enter the JavaScript code used to generate the HTML creative widget.
   • Important: Assume a "config" variable exists that contains the Manifest parameter data (example: "drawer.style.color = config.drawerColor;") to use in the code. Also, assume a "parent" variable exists that contains the parent element (example: "parent.appendChild(trigger);").
2. Optional. Preview the creative widget and inject simulated variables to see how they alter it.
   1. Adjust the widget's width and height values to preview how it affects the widget.
      • Note: Actual widget sizes are determined by the creative template design layer that contains the widget.
   2. Click Play to refresh the widget within the Sample Ad section after making changes.
3. Click Save.

The creative widget has been created. You can now add the widget to a creative template.