Skip to main content

Social Pro: Experience Options & Publication

  • Updated

Within the Experience Studios, there are several options for creating custom experiences that best align with your brand style. Should you need to make additional changes, you may do so directly within the Experience Studio Configuration Panel. 

This article contains the following sections:

 

How to Publish an Experience

You'll need to ensure you've completed the following steps before publishing an Experience:

Once you have created the Experience you want to use on your website, you have the option to Preview it. The Experience itself is a snippet of JavaScript that you can deploy on any area of your website; it will render wherever you put it.

Note: Experiences are auto-saved as you create them so nothing will get lost as you make changes during the creation/preview process.

When you click Preview Mode, it will open up Preview Settings where you can view your Experience.
When you are ready to Publish, click the Publish Settings button.

Social_Pro_-_Publish_Settings.png


1. Under the Format tab, select Inline Embed
2. When publishing an Experience as Inline Embed, add the domain of your website under Website domain and press Enter. Only the high-level domain needs to be listed in the domain field (ie., https://www.wyng.com). The Enter key must be pressed in order for the domain to be added.

  • If your website offers both http and https versions, add both versions to the domains list.
  • For the Experience to display correctly, all domains must be added.
  • If you plan to test your Experience on a staging site, add that domain as well.

3. Click Save & Publish
4. The Copy link allows you to copy the code to implement the Experience anywhere on your website in the desired location.

Note: JavaScript embeds are currently incompatible with the CAPTCHA.

Social_Pro_-_Embed_an_Experience.png



JavaScript Embed

You will have the same Javascript embed for every Experience but within the div class "wyng experience," the data-wyng-id and data-wyng-token will be different. For example:

<div class="wyng-experience" data-wyng-id="123456" data-wyng-token="987654321"></div>
<script async src="https://dnsl4xr6unrmf.cloudfront.net/js/campaign.js"></script>

For each gallery/stream you want, you will have a different variation of the same code to embed wherever you want the gallery/stream to live.

 

 

Flex Grid Component: Style Type Options

Many design details like tile spacing, outlines, colors, and display of scrolling controls can be customized without CSS.

More information regarding the style type customization options are linked below:

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.

 

 

Drag-and-Drop Builder 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 studio under the Layout tab.

Social_Pro_-_Config_Panel_1.png

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

Social_Pro_-_Config_Panel_2.png

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

Social_Pro_-_Config_Panel_3.png

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 effort to update the styling out-of-the-box.

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 more advanced customization, there are some very flexible features for front-end developers in the Overriding Components section of the Experiences SDK docs, here.

 

 

Common Use Cases

PDP Filtering

Display your social content on PDPs and keep separate from the PowerReviews native image gallery.

This JavaScript SDK call can be used filter an experience to only show UGC that matches a certain SKU that is displaying on your PDP. You will create a PDP specific gallery and add the following Custom JavaScript to the Settings tab of your experience that will allow for the filtering to occur:

function getSku() {
// code to get SKU from DOM, Data Layer, or page URL
   ...
   return sku;
}
window.wyng['_WYNG_ID_'].dispatchCampaignAction({
    componentId: 'flex_grid_9042213494586',
    actionType: 'filterContentByQuery',
    query: 'external_id:'.concat(getSku())
})

Note: The "SKU" in getSku fuction should be the identifier defined as your PowerReviews Page ID from the DOM, Data Layer or page URL.

The getSku() function would need to be written by the client to get the SKU from a reliable place on the PDP or other page(s) where the gallery is embedded. See this Wyng Developer Doc example.

The Wyng ID will be pulled in dynamically. The componentId needs to be replaced with the actual ID of the Flex Grid component in the experience. You can find that ID when you are editing the experience (see the red box in the image below). Double-click on it to select, and you can then copy and paste.

Social_Pro_-_PDP_Filtering.png

You can publish this code snippet directly in the Experience editor, under Settings > Custom JavaScript; the embed code on your website does not need to be changed. Ensure the JavaScript embed is applied across all of your PDPs.

Depending on how you are going to get the SKU, you can test in the same fashion. For example, if the SKU is going to be passed in via a URL parameter, the preview Experience URL can have a test SKU added as a parameter.

If the SKU will be passed in from DOM or Data Layer, the staging site can include an element or some data value with a test SKU defined. Once the Experience is embedded on that page, the gallery should work in the same way.

 

Experiences Shared Across Locales

If you create an Experience that is connected to one of your accounts, you may replicate the same experience on another locale and still use the shoppable product links.

A locale-specific JavaScript SDK call can be used to convert PDP links on conversion units from one site to another (ie., en_US to en_CA locale if they should share the same gallery). 

window.wyng['_WYNG_ID_'].setCustomRenderer({
section: `ConversionUnitGallery`,
componentId: 'flex_grid_9042213494586',
middleware: (params) => {
const newUnits = params.conversionUnits.map(u => ({
...u,
click_through_url: u.click_through_url.replace('abcexample.com', 'ca.abcexample.com'),
}));
return { conversionUnits: newUnits }
}
})

See this Wyng Develop Doc example.

The componentId needs to be replaced with the actual ID of the Flex Grid component in the experience. You can find that ID when you are editing the experience (see the red box in the screenshot below). Double-click on it to select, and you can then copy and paste.

Social_Pro_-_PDP_Filtering.png

You can publish this code snippet directly in the Experience editor, under Settings > Custom JavaScript; the embed code on your website does not need to be changed.

 

 

Testing the JavaScript

To test that the JavaScript is executing, click the Preview button in the upper right-hand corner.

 

Load an Embed Experience Dynamically

Chances are you need to embed an experience on your homepage, where loading time is not only a KPI but also measured by milliseconds. All of the Wyng experience content and assets are highly optimized for speed, but you can avoid impacting homepage loading speed measurement entirely.

Use the following example to defer loading experience assets until the experience is in view for a user. This is useful for reducing the amount of things that a browser needs to handle on initial load if the experience is placed somewhere below the fold.

 

The out-of-box JS embed code should look like below:

<div id="wyng-experience" data-wyng-id="EXPERIENCE_ID" 
data-wyng-token="EXPERIENCE_ACCESS_TOKEN"></div>
<script async src="https://dnsl4xr6unrmf.cloudfront.net/js/campaign.js"></script>;

Replace them with the following lines:

<div id="wyng-experience" data-wyng-id="EXPERIENCE_ID" 
data-wyng-token="EXPERIENCE_ACCESS_TOKEN"></div>
<script type="text/javascript" 
src="https://unpkg.com/in-view@0.6.1/dist/in-view.min.js"></script>;
<script type="text/javascript">

window.onload=function(){inView("#wyng-experience").once("enter",function(){
    var e,n,t=document;n=t.getElementsByTagName("script")[0],(e=t.createElement("script")).src=
     "https://dnsl4xr6unrmf.cloudfront.net/js/campaign.js",
     e.async="async",n.parentNode.insertBefore(e,n)})};
</script>
Was this article helpful?
0 out of 0 found this helpful
Return to top