Social Pro: Create an Experience

[CommunityJedi22]

Before you can create an Experience, you must first review, manage, and classify your Instagram user-generated content (UGC) within the Social Pro tool. To learn more about reviewing, managing, and classifying your UGC, click here. To learn more about all steps in the Social Pro Experience Creation Process, click here.

Filters

Experiences can be created based on saved filters. To pull the appropriate content into a gallery you want to create, you can use tags and taxonomies to create saved filters within the Content Management tab.

Create a Saved Filter

Saved filters allow you to customize which content is displayed within the Content tab of your dashboard and can then be used from within the Carousel and Gallery components.

1. Navigate to the Content tab of your dashboard
2. Define your filter settings within the Search Bar on the Sort & Filter panel

3. Click Save New Filter and give your new filter a name. Filter names must be unique; otherwise, an error will occur upon saving.

Edit a Saved Filter

There are two ways to edit a saved filter:

1. Edit the name and the description of your filter by clicking on the filter's options and selecting Edit Details
2. Update the criteria for a saved filter by simply making your desired changes and clicking Update Filter

Note: Filters generated as a result of the creation of an experience cannot be edited.

Delete a Saved Filter

To delete a saved filter:

1. Click on the filter's options
2. Select Delete
3. Confirm that you are deleting the filter

Deleting a filter causes the filter to become inaccessible. Any users who have used this filter will no longer be able to access content.

Create an Experience

Once you have your saved filter, you are ready to begin creating an Experience.

1. Navigate to the Experiences tab > Create

2. Click Design Your Own or Get Started to begin

3. Give your Experience a name and click Save

4. You will be brought to the Experience Studio, where you can begin creating your Experience. The Experience Studio Configuration Panel enables you to quickly and easily create and manage engaging digital Experiences with the platform. Using the Experience Studio Configuration Panel, you can:

• Build customized Experiences with images, text, and form fields without needing to use CSS (although CSS is still an option)
• Build customized Experiences that are fully responsive for desktop, tablet, and/or mobile.
• Choose from a library of Experience templates that match your primary goal/use case.e
• View live previews (for desktop, tablet, and/or mobile) of the Experience as you build it (customizations and edits render immediately for accurate viewing)

5. To create a gallery, select the Flex Grid component and drag it into the Experience Studio.

The Flex Grid component makes it easy to display collections of user-generated content UGC in tiled displays as a gallery or a carousel. A skeleton grid will appear to add content from a saved filter (the way we define collections of content), based on the type of Experience you want to create. Click the pencil icon to edit.

6. Under the Content tab, select your saved filter.

Content

This section allows you to define settings for the content collected for the experience. Settings include: display content with Permission to Use, set Tile Resolution, set Display Order, and enable Content Caching.

Ensure the Permission to Use setting is enabled so that only content that you have obtained rights for is displayed on your site.

Note: For content caching, the cache timeout is 1 hour regardless of new content. The cache can be broken by disabling this option and republishing.

On the Content tab, you are able to prioritize favorite content in which you clicked the star icon when adding a Tag (click here for more details). To enable, click the setting Show favorite content first within the Content tab for the favorite content to display first in the gallery/carousel.

Styles

The Styles panel controls all aspects of design, including display, layout, number of rows and columns, responsive mode, width, tile spacing and outlines, and overall padding.

Types

Flex Grid allows you to choose to display UGC as a Gallery, Carousel, Spotlight, or Feed. While Gallery requires users to scroll vertically to view the content, Carousel and Spotlight support horizontal scrolling.

Gallery/Carousel/Spotlight/Feed

For developers, the Flex Grid component offers much more control and customization via the Wyng JavaScript SDK. In addition to supporting existing SDK features like dynamic filtering, new SDK functions allow full customization of content information displays, both on tiles and in the content details view when a tile is clicked.

• Carousel - This display type makes it easy to create beautiful UGC displays with horizontal scrolling. Carousels can have a single row of content or have multiple rows of content that users can page through horizontally by tapping arrow controls or swiping left or right. A progress bar at the bottom shows how many pages of content are available, and users can click on the bar to jump ahead or back. Similar to the Gallery type, tiles can be arranged in a uniform Grid layout with any number of rows and columns, or a Showcase layout can be used to highlight some tiles and add interest. Design details like tile spacing, outlines, colors, and display of scrolling controls can be customized without CSS.
• Spotlight - This display type is designed for visual stories, lookbooks, and other displays that showcase a list of content but highlight one element at a time. Spotlight has much in common with the Gallery and Carousel display types, including content hosting on a high-performance CDN, flexible saved filters for selecting what to display, prioritizing your favorite content first, displaying translated captions where available for global audiences, and design customization without CSS.
• Feed - This display type looks and works like a social feed. This format is familiar and engaging to consumers, and a great way to highlight UGC. This format supports conversion units, contextual shopping, sharing, and reactions. For the sharpest results, set “Tile resolution” to high.
• You also have the option to display other post information on tiles, such as the social handle of the author. Developers can fully customize what is displayed using the SDK. For more information on Wyng SDK, click here.

Layouts

Flex Grid supports multiple Layouts, or arrangements of tiles. You can customize the number of rows and columns, responsive mode, max width, tile spacing/gutter width, and padding.

When displaying content in Grid or Showcase layout, Flex Grid allows setting the number of rows to be added when paging through content using the Number of rows to add when paging setting. The default is 4 rows added each time the user clicks to load more content, or each time infinite scroll is triggered. This setting is customizable for desktop, mobile, or tablet devices.

Designers can also choose to apply common design settings across multiple device types (ie, desktop and tablet), while tailoring settings for other device types (ie, mobile).

For more control over grid styling, the color and thickness of tile outlines can be customized without using any CSS using the Tile outline setting. Outline styling can also be controlled separately for mobile, desktop, and tablet devices.

Independent control of all styling for desktop, tablet, and mobile devices lets you tailor the Experience for different views. Switch the toggle on in the screenshot below to customize the design for tablet and mobile views.

You can choose a different layout for desktop and mobile to suit your display preference, for example: a Showcase layout for desktop and a Grid layout for mobile.

Behavior

The Behavior tab allows you to configure when to load more content, click outcome, and enable Conversion Units.

Sharing

The Sharing tab allows you to customize the message users see when sharing a piece of content in the gallery, for each supported social media platform.

Advanced

The Advanced tab allows you to enable voting on content and flexible text features.

• Customize or translate text - When enabled, you will see a two-column table where you can edit the default phrasing. In the first (left) column, we include a phrase that appears somewhere in the experience. In the second (right) column, we include a blank form. Add your input here to customize each specific phrase on each successive row, then Save.
• Display usernames as "@username" - When enabled, usernames are displayed so the @ symbol is only used with social media usernames, but not for names on directly uploaded content.
• Custom "Caption-Only" tag - When enabled, allows you to only display the caption of specific photo or video content items in the gallery, for cases where you prefer to reuse or display just the caption and not the photo or video media asset. To do this, you just need to use a special tag, display-caption-only.

When using Flex Grid to display content in international markets, the most relevant translations can now be used by enabling Display translated captions where available.

Each translation is associated with a locale, typically a language and a country, like English-US or English-UK. You can define the preferred locale(s) for translations that are relevant in that market by clicking the Add Preferred Locale button.

Design

To offer more design control, we provide an option to replace the default source icons that denote the source of each content item (ie, Instagram, Twitter, or direct upload). Any PNG asset may be used. The new setting is in the Design tab and applies across all device types.

Experience Studio Configuration Panel

To further create your Experience, you have options to include Text, HTML, Image, Divider, Button, and Section on the left-hand side of the Experience Studio under the Layout tab.

You can add CSS on the Design tab if there is something you are not able to achieve directly via the tool.

You can add personalization and/or Custom JavaScript on the Settings tab.

Custom JavaScript can be used if any of the SDK functions from the Experiences SDK are needed for customizing behavior. For example:

• The layout and content of Flex Grid can be customized using Custom Renderers
• Content in galleries can be dynamically filtered or sorted using the Flex Grid
• The functionality in Flex Grid tiles can be customized by using Custom Renderers
• The content of galleries can be dynamically updated by dispatching custom actions like filterContentByQuery or setDisplayOrder
• Navigation or page loading of galleries can be controlled programmatically (this could be used to implement a 'Show More Photos' link, for example, with a few lines of JavaScript code)

The SDK documentation covers all of these use cases and includes examples.

Note: If there are specific styling changes needed that cannot be made using the configuration panel for Flex Grid, we may be able to suggest custom CSS and/or assess the effort to update the styling out-of-the-box.

On the Notes tab, admin users can add internal notes related to the Experience.

Preview Experience for Different Devices

To preview Experiences for a tablet or mobile device, click Preview Mode, where you will be presented with the options to view your Experience and make adjustments as needed for your gallery in the gallery editor.

Replicate and Edit Experiences

If you create a style or design you like, you can replicate it for another Experience. On the Experience > Manage tab, click the three dots within the Experience you want to replicate, then click Copy.

To edit your Experience at any time, click Edit.

Styling Experiences

You can control most of the attributes without needing to override with CSS. If we do not have a UI setting, then using CSS may be applicable. For further customization help, see Experience Options & Publication.

Once you've created an Experience, you can then publish it. To learn more about publishing an Experience, click here.