Standard UGC players: Configure how to display your images

Streams are displayed using one of the standard UGC players: a carousel or media wall. These players are fully configurable and can be styled to match your requirements. Once you've configured the players, the app will then generate the code to include on your own website.

Configuring the players

Click the ‘Standard Players' icon on the left hand side of the Social app window and select the Stream you want to show. You can configure the way the player displays the stream by clicking either the carousel or mediawall icon.

In the example below, the "newstream" feed is selected and viewed in a carousel. You can enter configuration options for the carousel or mediawall from the panel on the right hand side of the window.

Viewing the player as a carousel
Viewing the player as a carousel

The following configuration options are available for a carousel:

  • Auto Play. Whether or not the carousel will autoplay / loop

  • Rotation speed. From 1 second to 30 seconds in one second increments

  • Number of Slides. How many assets are visible on the carousel at a given time

  • Side spacing. The space between each image

  • DI options. The Dynamic Imaging options applied to the image. For example you could change the width or quality of the image. See the Dynamic Media Playground for more details of the options available to manipulate an image.

In the image below, the player is being viewed as a mediawall.

Viewing the player as a mediawall
Viewing the player as a mediawall

Mediawall configuration options

The following configuration options are available for a mediawall:

  • Wall Layout. How it will appear, as a grid system or with larger block integrated within the grid

  • Column Width. The column width in pixels

  • Slide Padding. The space between each image

  • Transition Duration . The time it takes for the grid to rearrange and show the transition animation when the screen size changes.

  • DI options. The Dynamic Imaging options applied to the image. See the carousel section above for more details.

Options available for both players

There are also a number of options available for both the carousel and mediawall shown in the "Config Modal" section.

  • Modal. This specifies whether or not the player will display a pop-up window when the user clicks on an image, as shown in the example below.
The window shown when the user clicks on an image
The window shown when the user clicks on an image

You might want to enhance this view with related product information from your ECommerce site and include a link to allow the user to purchase an item directly from this screen. For more information see Displaying product information in the viewer.

  • Display text. Whether or not the modal will display the text from the user's post

  • Display username. Whether or not to display the social media poster's username

  • DI options. See the carousel and mediawall sections above.

Generating the code for the player

Once you have chosen the configurations you require, you can generate the code to include on your website by pressing 'Generate code' button. The code will be displayed on the right hand side of the window. Copy the entire code displayed to the <head> and <body> sections of your target page. Note that you can miss out jQuery if you have already included your own version.

The generated code for a player is shown on the right of the window
The generated code for a player is shown on the right of the window

Customizing the generated code

The generated player code includes several placeholders that you can customise with your own values, as explained in the sections below.

Adding a Terms and Conditions URL

Every player has a Terms and Conditions placeholder. To add yours, just find this line in the generated code and replace the placeholder with your URL.

tcsLink:"<yoursite.com/terms>"

This will show in and in the Ts&Cs link when uploading an image. In the example shown on this page we've modified the Ts&Cs link to:

tcsLink:"<http://www.anyafinnstore.com/terms>"

Changing "Shop the look" text

This text is shown when the user hovers over an image in the player and by default is set to "Shop the look". In order to change the text, search for callToActionText in the generated player code.

For example, if you were using some user images to promote a summer collection, you could change the text to "Shop for summer":

callToActionText:"Shop for summer"

When the code is updated and uploaded to your site, hovering over an image would show the new text as shown in the example below.

Updated shop the look text
Updated shop the look text

How to set up Direct Uploads

The players provide an an "Upload your photo" option to allow your users to upload images stored locally, or choose an image from their Instagram account.

The upload window is shown below.

Users can upload their own images using the direct upload dialog
Users can upload their own images using the direct upload dialog

The uploaded images will be ready in the moderation section of the Social app and you can filter them using "Filter by direct".

In order to setup the "via Instagram" direct upload option follow these two steps:

  1. Right click on the instagramUploadConfig link and upload the file to your site. The "instagram.html" file should be uploaded to a folder under the same domain as your UGC player code. This is necessary to comply with the crossdomain rules and enable the Instagram authentication token to be relayed back to the uploader script.

  2. Add the location of the instagram.html to the generated player code in the instagramUploadConfig section.

Currently the callbackUrl in the generated code is a placeholder:

callbackUrl:"https://s1.adis.ws/instagram/router.html?localCallback=<yoursite.com/instagram.html>"

You should change it to point to your instagramUploadConfig location (without the brackets). For example:

callbackUrl: "https://s1.adis.ws/instagram/router.html?localCallback=http://anyafinnstore.com/instagram.html"

Hiding direct uploads

If you want to hide the option for direct uploading from your player, you can add the following to the generated player code:

.viewers-ugc-media-wall .upload-option {
width: 100%;
text-align: center;
visibility: hidden;
}

Customizing CSS styling for the UGC players

You can override the styling of various elements in the players by adding your own values for the following CSS classes.

Changes we support Class name
Border colour .viewers-ugc-carousel
Arrows .viewers-ugc-carousel .caret-left
Upload your photo text .viewers-ugc-carousel .upload-option a
Overlay .viewers-ugc-carousel .hover
Hover text .viewers-ugc-carousel .call-to-action


Pop up/ full view

Changes we support Class name
Look and feel of pop-up box .amp-modal-detail .amp-content
Title text in pop-up box .amp-modal-detail .social-text
User and Source text .amp-modal-detail .social-display-name
Report this image text .amp-modal-detail .amp-insta-report
Close button .amp-modal-detail .amp-close
Product button .amp-product-details button
Social handle .amp-modal-detail .social-handle
Social source .amp-modal-detail .amp-source
Products container .amp-modal-detail .amp-products
Product .amp-modal-detail .amp-product
Product text .amp-product-details p


Upload photo dialog

Changes we support Class name
Style of sheet .amp-modal-detail .amp-content
Thumbnail .amp-choose-image .amp-icon-computer, .amp-choose-image .amp-icon-instagram
Upload title .amp-upload-title
Upload button .amp-button

results matching ""

    No results matching ""