How to use Single Tile Embeds
Dan Macarie avatar
Written by Dan Macarie
Updated over a week ago

With UGC's Single Tile Embed functionality, it is now easier than ever to include individual pieces of UGC across the web! No more jumping around between social networks, searching for embedded codes, and being left with various post designs and an overall inconsistency.

Why use UGC's Single Tile Embed versus the relevant Network’s Social Embeds?

  • Reporting:
    Single Tile Embed feeds into both Trackla and Google Analytics.

  • No Javascript:
    Faster load times, fewer JS libraries being loaded, and an easier implementation.

  • Consistent Design:
    Consistent look and feel and design regardless of the Social Network.

  • Social Commerce:
    Drive calls to action off a single piece of UGC.

  • Consistent Workflow:
    The same process to generate a Tile embed for all Networks.

  • Responsive:
    Single Tile Embeds are responsive so can work on your Mobile and Desktop versions of the site.

Note: Singe Tile Embeds do not support Stackla's tile interactions (likes/dislikes, comments, sharing, etc.), nor do they support our widget's common Expanded Tiles behavior.

How to generate a single-tile embed

Step 1

Choosing your content is simple, as Single Tile Embed supports all tiles within Stackla. However, tiles must be set to Published before they can be embedded.

  1. Within your Stack, navigate to Curate>Content.

    • Optionally, filter your moderation view to Published tiles only.

  2. From the tile's overflow menu, select the Embed Tile option from the list.

Screen_Shot_2019-05-20_at_2.43.56_PM.png

Step 2

Configure your tile embed from the following popup, with options to include/exclude the post's caption, as well as enable Google Analytics tracking.

  1. Select the desired options for the caption and Google Analytics.

  2. Then click Generate Embed Code

Screen_Shot_2019-05-20_at_2.44.42_PM.png

Step 3

Tile embeds can be used across the web- drop them into any website, add them to your blog posts, or include them in your support articles- virtually anywhere that accepts HTML/iframes.

  1. Copy/paste embed code as needed!

  2. To adjust the tile embed's settings after it's been created, a new embed code will need to be generated (thus deleting the existing code). Note: be sure to update the embed code anywhere that it has been included on the web.

Screen_Shot_2019-05-20_at_2.45.03_PM.png

Ensuring Tile Embeds are Responsive

To Ensure your Single Tile Embed is responsive and will render correctly on Desktop, Tablet, and Mobile Devices you need to ensure that:

  • The Width of the Widget is set to 100%

  • The Page rendering the Single Tile Embed has a defined Viewport

By default all new Single Tile Embeds will automatically have the Width of the iFrame set to 100% versus 500px, however for older Embeds, you can either manually change this value or hit Generate new Embed Code on the Tile Embed modal.

To define the Viewport for the page upon which you have added the Single Tile Embed, simply add the following code:

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 


For any further questions or queries, please send an email to support@nosto.com and our support team will get back to you.

Did this answer your question?