The Activate tab consists of two main features, the Widget Design, and the Widget Management tab.
The Widget Design tab allows you to access the markup for your widgets and to make edits to the content and its style.
From the Widget Management tab you will create an instance of that widget style, select your sorting preferences, photo source, and advanced settings, and grab the widget code.
Widget Design
The Widget Design tab houses all of the editable code that powers your widgets. Within this tab you will be able to create new widgets, configure their settings, clone the styles and edit the code for existing widgets (gallery, carousel, etc.) and global components (lightbox and uploader). On the left side of the screen you will see the tabs for the widget styles as well as the global components. On the right side is the markup editor that allows you to edit the code.
Widget Styles
To get started, select the Widget Styles tab. This will display all of the different widget styles. If you have not created a widget style yet you can click on the “+Add Widget” button to do so.
Select the type of widget you would like to create and then give your new widget style a name. The four types of standard widgets as follows:
Slide - Horizontal or vertical carousel of photos.
Wall - Gallery of photos set up with multiple rows and columns.
One View - Single photo block. The user may navigate via arrows to view different images.
Button - A single uploader button that allows a user to upload one of their photos.
You will also be given the chance to select certain settings for your widget, you can always go back and change these later. Click Save and then close out the Create new Widget Style window.
You will then see that newly created widget style appear right under the +Add Widget button. To access the HTML, CSS and JS callbacks, click on your widget style and it will drop down displaying the different templates.
Note: Social Native uses handlebars to reference these templates so not all of the markup will be in one template.
The three icons to the right of the widget style name are the settings button, the clone widget button and the deploy button. Clicking on the settings cog will allow you to edit any of the configurable settings that were initially set when the widget was created. The clone button will allow you to duplicate a widget style so that you can create a new widget by copying an existing widget style. Finally, the deploy button will push your changes to production.
Global Components
Select the Global Components tab to view the editable templates for the Media Lightbox and the Uploader. Unlike the widget styles, the Media Lightbox and the Uploader are global so there is only one style per account. The templates are set up similarly to how they are in the widgets. To edit any of the code simply click into the appropriate template.
Saving and Caching
When and how you will see your changes made in the Widget Design tab depends on whether you are viewing assets from the sandbox, or the production environment.
Widget Styles & Global Components: When you save a global component or widget style's template, the change will immediately be visible in our sandbox environment. It will then remain in our sandbox environment until it is deployed. To deploy the changes, press the deploy button next to the component's name and your changes will be available in our production environment after 30 minutes. All assets in our sandbox environment can be viewed by enabling development mode. More on development mode here. No changes will be visible in production until they are deployed.
Widget Settings: When you update the settings of a widget, the changes to those settings will be available after about 30 minutes. These changes will not be immediately visible even if development mode is enabled. This also applies to any changes made to settings in the Widget Management tab.