Uberflip Marketplace

This app provides a new viewer experience for embedded Uberflip content designed to encourage content bingeing using content recommendations — powered by Site Engager rules and templates.

Features:

• Embed Uberflip tiles on your website pages easily with a single Javascript entry
• Create dedicated Site Engager rules and templates for the widget or leverage existing ones 
• Choose from a number of display options to customize the embed and viewer experience (example: number of items to display, item age, and brand colour)

Check out the app in action 

The Reco Embed Widget

What is it?This is an independent script that will embed Uberflip tiles on your site in a completely different way. Those tiles, when clicked, will launch a unique viewer experience that will keep visitors on your site much like Site Engager but with different bells and whistles.

Check out the Live Demo 

How does it work?

By leveraging the same powerful data that Site Engager uses to recommend content for particular website pages, tiles are generated using the same look and feel as Uberflip’s “Embed Stream Tiles”, but rather than having to grab embed codes for every stream, a single javascript will load those tiles wherever you specify on a page. Meaning there’s no need for multiple embed codes.

The viewer experience is completely unique and requires some configuration, but otherwise leverages Site Engager rules and templates that you configure inside Uberflip.

How do I install this?

First, install the Reco Embed Widget app. Once installed, you’ll see a new option in Uberflip under Hubs > Website Tools.

Next, configure your script. 

Note: You’ll have to locate your Hub’s ID and enter it manually. 

Here is a breakdown of all the different configuration options:

• Hub ID: Your Hub ID that you want to display content from
• Embed ID: the Unique ID for the element where you want tiles to populate
• Max Tiles per Row: how many tiles will display on a single row
• Open In: you can set this to either Viewer, Self or New“Viewer” → will open item in the in-line viewer (except on mobile device)“Self” → will open item in the current window/tab (default behaviour on mobile)“New” → will open item in a new window/tab

If you choose Viewer above, the following options are then available

• Logo URL: this is a URL for your company logo
• CTA Label: the label for the button that will display under your logo
• CTA URL: where the button will lead to
• Debug: if set to “on”, will spit out console messages for developers to debug on your site

Once configured, you can preview by clicking the “Preview” tab and grab your code on the “Embed Script” tab. 

Simply copy and paste the script generated either to a specific page of your site or use a tag manager to have it populate on every page.

Note: The script assumes you have jQuery already available on your website. If you don’t,  you’ll need to add it before.

Next, on every page you’d like tiles embedded, make sure to include a div with the ID you specified as “Embed ID” in the configuration (“uberflip-tiles” is the default value).

<div id="uberflip-tiles"></div>

What part of Site Engager will be used?

Site Engager has both rules and templates. You can either rely on existing Rules and Templates or set new ones just for this embed widget - it’s up to you.

For rules, these determine which pages to trigger and what content to display - so this fully applies here.

For templates, some settings are used and others are non-applicable. You can assume if a template setting is not listed below, it’s simply non-applicable and it doesn’t matter what you set it to for this embed widget.

Here’s what does matter:

Display Options:

• Max. Items to Display: will be used to determine how many tiles display both as embedded tiles and in the list when the viewer is open
• Max. Item Age:Will still be used to determine if a tile shows or not based on its age
• Enable Exit Intent Popup:Will respect your setting here. If enabled, on exit intent the viewer will display with the next sequential item that the visitor hasn’t viewed yet (a good reason not to use this widget in combo with the native Site Engager - they’ll likely combat each other ;)
• Brand Color:Will be used to determine the CTA button’s background color as well as other UI accents
• Timers > Show Exit Again:Will be used if Exit Intent is enabled to not trigger the exit intent again after closing the viewer, before the specified time has elapsed. 
• Labels:
  • Next: Will be used to populate the label on the “next” flyout on the right-hand side when the viewer is open.

Do I need Site Engager Installed on my site as well?

No! That’s the beauty - you can use this embed instead, and get the benefit of both tiles and a viewer. That said, you could use both - at your own risk :) The only obvious issue is if you enable exit intent, they’ll both fire at the same time.

Is this a supported feature by Uberflip?

No. This is an independent widget that makes use of supported elements of Uberflip, but its features and functionality are not tested and officially supported by Uberflip.

Advanced: How can my developers leverage this further?

Good question :) There is an event and a couple functions that can be used to further leverage the data being returned and customize your website further. Developers can edit the embed code generated and insert additional functionality.

For complete documentation with examples click here.