Using the Editor

The Editor is the part of Widgetic you will interact with the most. It is used to Create / Edit Compositions, as well as to Create / Edit / Delete Skins.

Using the Editor you can view any changes you make in the Live Preview area, where the widget is updated in real time. The Editor is composed from 3 modules, which we'll explain below:
  1. Skin
  2. Content
  3. Details

1. Skin


Use the first module to work with Skins. You can either Select or Create / Edit / Delete a Skin.


  1. Breadcrumbs - it indicates the current module, while also allowing you to quickly navigate between them (SKIN, CONTENT, DETAILS).
  2. Navigation - the navigation guides you through the breadcrumbs step by step.
  3. Edit Skin - this button opens the Advanced Settings view, where you can edit a Skin's properties.
  4. Drag Icon - use this handler to drag the Editor around the stage, to make room for larger compositions.
  5. Selected Skin - the selected Skin is indicated using a stroke and a checkmark icon.
  6. Preset Skin - the Preset Skins are indicated using a white on green PRESET text.
  7. Unused Skin with Trash Icon - any Skins that aren't used in Compositions and can be deleted, show a trash icon on hover.


When clicking the EDIT SKIN button, the Advanced Settings view opens.


  1. Back to Grid View - Click this button to return to the previous screen and close the Advanced Settings view. 
  2. Selected Skin Properties - The Skins are displayed on a single column, to make room on the right side for the properties of the selected Skin.
  3. View Tabs - Each Skin has it's properties grouped by Tabs. When there are more than 3 tabs, the View Tabs icon is displayed which you can click to view the other available tabs.
  4. All Tabs - In this dropdown you can see the other available tabs. The selected tab is indicated with a checkmark if it's in this list. When you select any of the tabs in this dropdown, they replace the tab in the 3rd position (PLAYBACK in this case). The first two tabs are always displayed in the Editor (INTERFACE and PROGRESS in this case).
  5. Selected Tab - The selected tab is displayed with a purple stroke at the top and a white background. The list of properties visible in the Editor are part of the selected tab.
  6. Inactive Tabs - The inactive tabs are greyed out. To view the properties inside each, please select them here or from the dropdown.
  7. Input Controllers - Each property of a Skin can be changed here. We call these elements Input Controllers, because they allow users to input new values and control the Skin properties.


If you change any of the values of an Input Controller, the interface changes into Skin Edit Mode.



  1. Back to Grid View - The back to grid button becomes inactive until you save the changes or revert to the original Skin properties.
  2. Skin Changes - In Skin Edit Mode the entire column of Skins disappears and only the selected Skin is visible. Here you can see the number of changes you make on all the properties.
  3. Save or Reset - If you want to get back to the original properties of the Skin, hit the Reset button. If you want to save the changes, hit Save and you get one of the two options explained below.
If you hit the Save button and you were editing a Preset Skin, you cannot overwrite it. This means the Editor prompts you to create a new Skin.



If you hit the Save button and you were editing a normal Skin, you have two options. You can either create a new Skin, or overwrite the Skin you were editing. Note that if you overwrite the previous Skin, any of your Compositions that use it will also be updated.



Note
  • You can reuse a Skin as many times as you want. We recommend you create Skins for different hosts and use them throughout the website, to go well with your brand. For example MySite Red Skin.

2. Content


Use the second module to work with Content. Based on the Main Attribute type, you have access to different Content Sources for the selected widget.


The right side is specific to each Content Source you select. If the Content Source is a service, you will see the option to connect to your account if you are using that service. Otherwise, if the Content Source you select is a Link you will be prompted to add that specific type of link. Depending on the Content Source selected, please follow the instructions that you see on the right.



To disconnect from any of the Content Sources, click the Disconnect icon at the top. You can select files from more Content Sources at the same time. The files will have a red indicator in the bottom right, showing the number of files selected from that specific Content Source. If the Content Source is not currently selected, the indicator number's background will change to grey.

If you select files from multiple folders inside a Content Source, the folders will also get the same indicator, showing how many files are selected within that specific folder. You can navigate to the root folder or through any folders for a specific Content Source by clicking on their name or icon.



You can always reconnect to a Service at a later time.



If you try to select more or less files than allowed in a specific widget you will get a notification (some widgets need a minimum number of files, others have a maximum number of files).



To preview a file before selecting it (AUDIO, VIDEO), toggle the Play/Pause icon in front of the file name. The content will play inline, replacing the file type icon.



To select a file, click on it's file type icon or on the preview if video. 

3. Details


Use the third module to Edit the Details for every content item you added to the Composition. Each widget has specific details associated with it's Main Attribute. These details can be changed by adjusting the values inside the Input Controllers.



  1. Move Icon - Using this icon you can move the entire Main Attribute to a different position in the list, if you have more than one Main Attribute selected.
  2. File Path - The path to the file is displayed below the file name.
  3. Collapse / Expand - Click this icon to expand or collapse a Main Attribute view. It is helpful when you are working with a list of items.
  4. Trash Icon - Click this icon to remove an item from the Composition. This also removes it from the selected list in the Content Sources. If the widget requires a specific number of items, it might prompt you to select another item and return you to the Content module.
  5. Help Indicator - When you hover over an Input Controller, you might see a Help Indicator icon. If you move your mouse over it, it will give you more details about what that specific Input Controller does.
  6. Publish Composition - Once you are satisfied with the Skin, Content and Details of your Composition, hit Publish. You will be then taken to the Composition's page where you will have access to the Embed Code. There, you can continue to Edit the Composition.

Note
  • You can give your Composition a name and a specific size before or after you publish it.





Feedback and Knowledge Base