Embed a Stream Into Your Website

Follow

You can incorporate content from your Hub into your other web properties by embedding whole Streams into external webpages. Here's how.


 

Before You Begin

  • To use Embed Stream Tiles, you need to be an Account Admin, Content Manager, or Developer/Designer.
  • You will also need access to the HTML of the web property where you want to embed the Stream.
  • Streams embedded with this feature will not include any CTAs that are placed on the Stream. You can, however, embed individual CTAs in a similar way. For instructions, see this article.
  • This feature will embed whole or partial Streams, i.e. multiple Item Tiles. If you want to embed just a single Item Tile, see this article for instructions.
  • You cannot use this feature to embed Tiles from the Latest Content Stream on the Hub homepage. However, if you have replaced the Latest Content Stream with a Marketing Stream, you can embed that Stream.
  • If your Hub uses custom Tile styling (i.e. OnBrand customizations), this styling will not be brought over to wherever you embed the Stream (as the stylesheet that defines the Tile styling only exists on the Hub). Instead, the embedded Tiles will be displayed with their default styling (non-customized). To replicate custom Tile styling from your Hub when you embed Streams in an external web property, please contact your Customer Success Manager or Uberflip Support for help.

 

Embed a Stream

The Embed Stream Tiles feature allows you to embed an entire Stream (or part of a Stream) on another website. No coding knowledge is needed: you just configure a few display options, then generate the embed code that you can copy and paste anywhere you want the Stream to appear.

  1. Log in to Uberflip and navigate to the Hub that contains the Stream you want to embed.
  2. In the sidebar menu on the left, click on the section Website Tools to expand it, then click on Embed Stream Tiles.
    Hubs___Appearance_-_Embeds_-_Uberflip_-__Private_Browsing_.png
  3. On the left, you'll see two sections: Configure, which allows you to set up the embedded Stream; and Preview, which shows you how your configuration will look.
    Hubs___Appearance_-_Embeds_-_Uberflip_-__Private_Browsing_.png
  4. Under the Configure section, begin by using the Select a Stream dropdown to choose the Stream you want to embed.
  5. Under Item tile size, select how big you want the Tiles in the embedded Stream to be. Check the Preview section on the right to see what each setting looks like.
  6. Under Other Options:
    • Use the dropdown next to Max Items Per Row to choose how many Item Tiles will be displayed in a single row. Note that this is a maximum, and how many Tiles are displayed on a row in practice is determined primarily by browser window size.
    • Use the field next to Max Items total to enter the maximum number of Items you want to be displayed in the embedded Stream. If set to blank or 0 (zero), unlimited Items will be displayed (i.e. all Items in the Stream).
    • Use the dropdown next to On Item Click, Open In to determine whether clicking an Item Tile in the embedded Stream will open that Item in the current browser tab/window, or in a new tab/window.
  7. When you have finished configuring the embedded Stream, click on the Get Code button:
    Hubs___Appearance_-_Embeds_-_Uberflip_-__Private_Browsing_.png
  8. The embed code will slide in over the Configure section (replacing it with the Copy Code section). Simply copy the embed code, and paste it into the HTML of the website where you want to embed the Stream:
    Hubs___Appearance_-_Embeds_-_Uberflip_-__Private_Browsing_.png
  9. That's it! Your selected Stream will now appear on the web property where you embedded it.
0 out of 0 found this helpful

Comments

2 comments
  • Does it take a while for that content to actually update? I added new items to the stream that I embedded and it doesn't seem to update.

    Edit: Just checked 10-15 min later and it finally updated. Odd that it takes so long.

    1
    Comment actions Permalink
  • Hi Jake, thanks for your question! I've checked with our Product team, and can confirm that it can take a little while for embedded Streams to update when you add new Items to them. The reason for this is that we cache embeds on our servers for efficiency.

    The first time an embedded Stream is requested (i.e. the first time someone views the page where the Stream is embedded), the server retrieves the Stream's contents from the database and caches it for 60 minutes. Anyone else who views the page within that 60 minutes will see the same version of the Stream that was cached — even if new Items have since been added. After 60 minutes, the server flushes the cached Stream and fetches the most recent version, which is then cached for 60 minutes, and so on.

    Hope that answers your question!

    0
    Comment actions Permalink

Please sign in to leave a comment.