Uberflip FAQs

To use the Uberflip API and create custom app integrations, you'll need your API Key and API Secret (and, for some things, your Hub ID). Here's how to get them.

Before You Begin

To generate or delete an API Key and API Secret, you must beanAccount Administrator on your Uberflip account.

Your API Key and API Secret are account credentials: they give access to your Uberflip account. Make sure to treat them the way you would any other username and password, i.e. keep them secret and share them only with trusted parties.

Your API Key and API Secret are required to use the Uberflip API. For more information, see our API documentation.

Generate a REST API Key & Secret

Log in to your Uberflip account.

In the top right corner, hover the mouse over your name to expand the menu, then click on Account Settings.

In the sidebar menu on the left, click on Integration to expand that section, then click on REST API Credentials.

On the right, click on Generate API Key & Secret.

Your API Key and API Secret will appear, along with a time signature that shows when they were generated.

Note

The API Key and Secret are shared across your Uberflip account. Any Account Administrator in your Uberflip account will also have access to view them once generated, and will be able to delete or re-generate them.

Delete an API Key & Secret

It's a good security practice to rotate your API credentials periodically, which essentially means deleting the existing API Key and Secret and generating new ones. This will help to keep your account secure if your API credentials should become compromised. Of course, you should also do this immediately whenever you suspect that your API credentials have become compromised.

Log in to your account and navigate to Account Settings > Integration > REST API Credentials.

You should see your existing API Key and Secret listed on the right. Below them, click on the Delete API Key & Signature.

In the confirmation prompt that appears, click on OK, and your API credentials will disappear.

The deleted credentials will immediately be deactivated, so you will have to update any integrations you have created using them with new credentials. To do that, generate new API credentials by clicking on Generate API Key & Secret again.

Get an Account ID

In some cases, you may be asked to provide an Account ID. This is a string of numbers that uniquely identifies your Uberflip account, and is required to set up some integrations and Marketplace apps. Each Uberflip account only has one Account ID, which covers all the Hubs under that account.

Log in to your account and navigate to Account Settings.

In the sidebar menu on the left, click on Account > My Profile (if necessary; you should be on this page by default when opening Account Settings).

On the My Profile page shown on the right, look for the line labelled Account ID:

The string of numbers in the grey oval is your Account ID.

Don't confuse this with your User ID, which is shown directly above the Account ID.

Get a Hub ID

Sometimes, in addition to or instead of the Account ID, you may need to enter the Hub ID of the Hub you want to work with. This is a string of numbers that uniquely identifies a particular Hub, so each Hub in your account will have a its own Hub ID.

Log in to your Uberflip account and click on Hubs in the top menu bar to expand the Hubs menu.

Click on the Hub for which you want to get the Hub ID.

By default, this should take you to the Manage Content menu. Now, look at the URL bar in your browser. You will see something like:

https://app.uberflip.com/hubs/content/12345

The string of numbers at the end ("12345" in the example above) is the current Hub's Hub ID.

Beta Feature Advisory

This article is about an Uberflip Marketplace app that is currently in beta. Like all beta software, this app is provided "as-is" and may contain bugs or may otherwise not work as expected.

If you would like to try this app and provide feedback to help us improve it, please contact your Customer Success Manager (or Uberflip Support ) to request an invitation to the beta program.

Before You Begin

To use this app, you must first enable the Bombora integration on your Uberflip account. See this article for instructions.

On any Hub where you want to use this app, you must enable the setting Include Item tags for Custom Code. You can find this setting under Hubs > Hub Options > Advanced > Content Experience. To enable, check the box next to Include Item tags for Custom Code.

About The App

This app personalizes selected Streams using Bombora data. It can:

Dynamically filter a Stream to only show Items that match the current visitor’s Bombora data (using tags)

Automatically populate the visitor’s organization logo on Streams that use the Banner+Logo template

Automatically insert values from the visitor’s Bombora data into variables placed in Hub text: titles, descriptions, body text, CTAs, etc.

Configure App Settings

You configure settings for this app at the Hub level, which means that your settings will apply to the current Hub only. If you have multiple Hubs, you must configure this app separately for each Hub.

To configure settings for this app, go to Hubs > Integrations > Apps tab. On this tab, open the app's settings by hovering your mouse over the app, then clicking on the Edit (pencil) button.

You can configure the following settings for this app:

Stream IDs

Required Use this field to specify the Streams that this app will personalize. To add a Stream, type in its Stream ID. Add multiple Streams by separating Stream IDs with commas.

To find a Stream ID, go to Hubs > Content > Streams tab, click on the Stream, then click on the Metadata tab. The Stream’s Stream ID is listed near the bottom.

Filter Items by Tags

Optional Turn on this setting to filter the specified Stream(s) so that only Items matching a specific tag are displayed. For example, if a visitor’s Predictive Category in Bombora is set to CRM & Marketing Automation, then turning on this option will only return Items that carry the CRM & Marketing Automation tag.

The app will attempt to find matches for any of the tags defined by the Bombora data. If any matches are found, only the Items matching the tag(s) are displayed, down to a minimum of one Item. If no matches can be found, the full Stream is displayed (all Items).

To use this option, you must add tags to your Items in the following format:

bombora.[attribute].[value]

Replace [attribute] with the Bombora attribute, and [value]with the attribute’s desired value. For example, the tag bombora.pc.Accounting would indicate that the tagged Item should be displayed if a visitor’s Bombora Predictive Category (pc) is set to "Accounting" and would therefore be applied to Items relevant to that topic.

Note that values in tag names must match Bombora values exactly: any spaces, parentheses, etc. that exist in the Bombora value must also exist in the tag.

See Available Bombora Attributes below for a list of Bombora attributes and example values.

Note

This app filters not just Items on the main Stream page, but also the additional Items displayed when viewing an Item in that Stream. While viewing an Item, the Next/Previous Item area and the Other Content in This Stream carousel will be filtered in the same way as the main Stream page:

For the carousel, filtered Items will take priority, and any additional free slots in the carousel (after all filtered Items have been displayed) will be filled with non-filtered Items from the same Stream

If no next or previous filtered Item is available, the Next/Previous Item area will be hidden

Swap Logo

Optional Turn on this setting to dynamically set the Prospect Logo on Marketing/Sales Streams that use the Banner+Logo template. When enabled, the current visitor’s company will be extracted from their Bombora data and used to search Clearbit for a matching logo. If a logo is found, it is automatically placed in the banner beside your own logo. If no matching logo is found, both logos are hidden from the banner.

Note

For this feature to work, you must enable theBanner+Logo templateand specify a "default" Prospect Logo under the Appearance tab on any Marketing or Sales Stream where you want to use this app. The default logo will not be displayed, but this feature will not activate if no logo is set. We recommend using a generic logo for this purpose (e.g. a logo that just says "You" or similar).

We also recommend specifying a default Banner Title under the Appearance tab to be displayed in case no logo is found and the logos are hidden from the banner. If you do not specify a Banner Title, only a blank header (or Banner Image, if specified) will be shown.

Search & Replace

OptionalTurn on this setting to dynamically populate placeholders in Hub UI text with values from Bombora data. Placeholders can be placed in virtually all editable UI text across your Hub.

To insert a placeholder, use the format {bombora.[attribute]}, replacing [attribute] with the attribute code (see below). For example, a user with the Functional Area attribute "Information Technology" would see "Information Technology" anywhere you have inserted the placeholder {bombora.fa}.

Three Bombora attributes are supported:

Industry: Use the placeholder {bombora.ind}

Functional Area: Use the placeholder {bombora.fa}

Domain: Use the placeholder {bombora.dm}

When this setting is enabled, you can use the fields below to specify a custom default value to use as a fallback. If you specify a value for an attribute and no value is present in a visitor’s Bombora data, the value you entered will be inserted into the placeholder instead.

If you turn on this option and do not specify a custom default value for a given attribute, its system default value will be used when no value can be extracted from the visitor’s Bombora Data. These are:

Industry: "Your Industry"

Functional Area: "Your Functional Area"

Domain: "Your Domain"

Previous Item Navigation Label

Optional Use this setting to specify a custom label for the Previous Item area while viewing an Item. If you do not specify anything here, the default label ("Previous Item") will be displayed.

Next Item Navigation Label

Optional Use this setting to specify a custom label for the Next Item area while viewing an Item. If you do not specify anything here, the default label ("Next Item") will be displayed.

Available Bombora Attributes

When you create tags for use with Filter Items by Tags, you can use any of the following attributes. Enter the value under the column Attribute Code for the [attribute] portion of the tag.

For each attribute, a sample value (used in the [value] portion of the tag) is also shown. You can find more possible values that are applicable to your Hub in the Visitor Insights Dashboard. For a full list of values, or for more information about Bombora attributes in general, please contact Bombora.

Attribute Name

Attribute Code

Example Values

Topics

tp

“Deep Learning”, “Intrusion Detection”, “Storage Area Networks (SAN)”

Predictive Category

pc

“Accounting”, “Security”, “CRM & Marketing Automation”

Industry

ind

“Media & Internet”

Company Revenue

cr

“Medium-Small ($10MM-$50MM)”

Company Size

cs

“Medium-Small (50-199 Employees)”

Domain

dm

“abc.com”

Functional Area

fa

“Information Technology”

Professional Groups

pg

“IT Professional”, “Business Professional”, “Marketing Professional”

Seniority

sn

“Management”

Decision Maker

dcm

“IT Decision Maker”

Install Data

ins

“Cloud Services > Platform as a Service (Paas)”, “Communications Technologies > Telephony”

Education

edu

“Some College”

Troubleshooting

If you experience problems with this app's functionality, this may be due to corrupted data. To resolve the issue, try clearing your browser's cache (or try using the app in Incognito Mode to see if that resolves the issue).

Beta Feature Advisory

This article is about an Uberflip Marketplace app that is currently in beta. Like all beta software, this app is provided "as-is" and may contain bugs or may otherwise not work as expected.

If you would like to try this app and provide feedback to help us improve it, please contact your Customer Success Manager (or Uberflip Support ) to request an invitation to the beta program.

Before You Begin

To use this app, you must have a Demandbase Engagement license, and must obtain an API key from Demandbase. To obtain a Demandbase API key, contact your Demandbase representative.

On any Hub where you want to use this app, you must enable the setting Include Item tags for Custom Code. You can find this setting under Hubs > Hub Options > Advanced > Content Experience. To enable, check the box next to Include Item tags for Custom Code.

About The App

This app personalizes selected Streams using Demandbase data. It can:

Dynamically filter a Stream to only show Items that match data on the current visitor from Demandbase (using tags)

Automatically populate the visitor’s organization logo on Streams that use the Banner+Logo template

Automatically insert values from the visitor’s Demandbase data into variables placed in Hub text: titles, descriptions, body text, CTAs, etc.

Configure App Settings

You configure settings for this app at the Hub level, which means that your settings will apply to the current Hub only. If you have multiple Hubs, you must configure this app separately for each Hub.

To configure settings for this app, go to Hubs > Integrations > Apps tab. On this tab, open the app's settings by hovering your mouse over the app, then clicking on the Edit (pencil) button.

You can configure the following settings for this app:

IP API Key

Required Enter your Demandbase API key into this field.

Stream IDs

Required Use this field to specify the Streams that this app will personalize. To add a Stream, type in its Stream ID. Add multiple Streams by separating Stream IDs with commas.

To find a Stream ID, go to Hubs > Content > Streams tab, click on the Stream, then click on the Metadata tab. The Stream’s Stream ID is listed near the bottom.

Filter Items by Tags

Optional Turn on this setting to filter the specified Stream(s) so that only Items matching a specific tag are displayed. The tags to be matched are dynamically defined based on the current visitor’s Demandbase data. For example, if a visitor’s industry in Demandbase is set to Software & Technology, then turning on this option will only return Items that carry the Software & Technology tag.

The app will attempt to find matches for any of the tags defined by the Demandbase data. If any matches are found, only the Items matching the tag(s) are displayed, down to a minimum of one Item. If no matches can be found, the full Stream is displayed (all Items).

To use this option, you must add tags to your Items in the following format:

demandbase.[attribute].[value]

Replace [attribute] with the Demandbase attribute, and [value]with the attribute’s desired value. For example, the tag demandbase.audience.SMB would indicate that the tagged Item should be displayed if a visitor’s audience attribute is "SMB", and would therefore be applied to Items relevant to that topic.

Note that values in tag names must match Demandbase values exactly: any spaces, parentheses, etc. that exist in the Demandbase value must also exist in the tag.

See Available Demandbase Attributes below for a list of Demandbase attributes and example values.

Note

This app filters not just Items on the main Stream page, but also the additional Items displayed when viewing an Item in that Stream. While viewing an Item, the Next/Previous Item area and the Other Content in This Stream carousel will be filtered in the same way as the main Stream page:

For the carousel, filtered Items will take priority, and any additional free slots in the carousel (after all filtered Items have been displayed) will be filled with non-filtered Items from the same Stream

If no next or previous filtered Item is available, the Next/Previous Item area will be hidden

Swap Logo

Optional Turn on this setting to dynamically set the Prospect Logo on Marketing/Sales Streams that use the Banner+Logo template. When enabled, the current visitor’s company will be extracted from their Demandbase data and used to search Clearbit for a matching logo. If a logo is found, it is automatically placed in the banner beside your own logo. If no matching logo is found, both logos are hidden from the banner.

Note

For this feature to work, you must enable theBanner+Logo templateand specify a "default" Prospect Logo under the Appearance tab on any Marketing or Sales Stream where you want to use this app. The default logo will not be displayed, but this feature will not activate if no logo is set. We recommend using a generic logo for this purpose (e.g. a logo that just says "You" or similar).

We also recommend specifying a default Banner Title under the Appearance tab to be displayed in case no logo is found and the logos are hidden from the banner. If you do not specify a Banner Title, only a blank header (or Banner Image, if specified) will be shown.

Search & Replace

OptionalTurn on this setting to dynamically populate placeholders in Hub UI text with values from Demandbase data. Placeholders can be placed in virtually all editable UI text across your Hub.

To insert a placeholder, use the format {demandbase.[attribute]}, replacing [attribute] with the attribute code (see below). For example, a user with the city attribute "Chicago" would see "Chicago" anywhere you have inserted the placeholder {demandbase.city}.

These Demandbase attributes are supported:

Company Name: Use the placeholder {demandbase.company_name}

Marketing Alias: Use the placeholder {demandbase.marketing_alias}

Industry: Use the placeholder {demandbase.industry}

City: Use the placeholder {demandbase.city}

Country: Use the placeholder {demandbase.country_name}

Website: Use the placeholder {demandbase.web_site}

Region Name: Use the placeholder {demandbase.region_name}

When this setting is enabled, you can use the fields below to specify a custom default value to use as a fallback. If you specify a value for an attribute and no value is present in a visitor’s Demandbase data, the value you entered will be inserted into the placeholder instead.

If you turn on this option and do not specify a custom default value for a given attribute, its system default value will be used when no value can be extracted from the visitor’s Demandbase data. These are:

Company Name: "Your Company"

Marketing Alias: "Your Company"

Industry: "Your Industry"

City: "Your City"

Country: "Your Country"

Website: "Your Website"

Region Name: "Your Region"

Previous Item Navigation Label

Optional Use this setting to specify a custom label for the Previous Item area while viewing an Item. If you do not specify anything here, the default label ("Previous Item") will be displayed.

Next Item Navigation Label

Optional Use this setting to specify a custom label for the Next Item area while viewing an Item. If you do not specify anything here, the default label ("Next Item") will be displayed.

Available Demandbase Attributes

When you create tags for use with Filter Items by Tags, you can use any of the following attributes. Enter the value under the column Attribute for the [attribute] portion of the tag.

For each attribute, a sample value (used in the [value] portion of the tag) is also shown. For a full list of values, or for more information about Demandbase attributes in general, please see Demandbase's online support documentation.

Attribute

Example Value

annual_sales

30000000

audience

SMB

audience_segment

Software & Technology

b2b

true

b2c

true

city

San Francisco

company_name

ACME Corporation

country

US

country_name

United States

demandbase_sid

12345678

employee_count

150

employee_range

Mid-Market

forbes_2000

false

fortune_1000

false

industry:

Software & Technology

information_level

Detailed

ip

127.0.0.1

isp

false

latitude

37.78

longitude

-122.41

marketing_alias

ACME

phone

415-867-5309

primary_naics

541511

primary_sic

7371

region_name

California

registry_area_code

null

registry_city

San Francisco

registry_company_name

ACME Corp.

registry_country

United States

registry_country_code

US

registry_country_code3

null

registry_dma_code

null

registry_latitude

37.78

registry_longitude

-122.41

registry_state

CA

registry_zip_code

94102

revenue_range

$25M - $50M

state

CA

stock_ticker

null

street_address

442 O’Farrell Street Suite 100

sub_industry

Software Applications

traffic

High

web_site

acmecorp.com

zip

94102

Troubleshooting

If you experience problems with this app's functionality, this may be due to corrupted data. To resolve the issue, try clearing your browser's cache (or try using the app in Incognito Mode to see if that resolves the issue).

Beta Feature Advisory

This article is about an Uberflip Marketplace app that is currently in beta. Like all beta software, this app is provided "as-is" and may contain bugs or may otherwise not work as expected.

If you would like to try this app and provide feedback to help us improve it, please contact your Customer Success Manager (or Uberflip Support ) to request an invitation to the beta program.

Before You Begin

This app uses query strings to personalize Streams, so you must share Stream URLs that contain query strings (and appropriate values) for it to work. The app will still work on Streams accessed without a URL containing query string values, but will only display default values in this case (provided you have defined default values).

On any Hub where you want to use this app, you must enable the setting Include Item tags for Custom Code. You can find this setting under Hubs > Hub Options > Advanced > Content Experience. To enable, check the box next to Include Item tags for Custom Code.

About The App

This app personalizes selected Streams using query string values from the URLs used to share those Streams. It can:

Dynamically filter a Stream to only show Items that match query string values contained in the Stream’s URL (using tags)

Automatically populate a visitor’s organization logo on Streams that use the Banner+Logo template (if the organization is specified in the query string)

Automatically insert query string values from the URL used by the visitor into variables placed in Hub text: titles, descriptions, body text, CTAs, etc.

Configure App Settings

You configure settings for this app at the Hub level, which means that your settings will apply to the current Hub only. If you have multiple Hubs, you must configure this app separately for each Hub.

To configure settings for this app, go to Hubs > Integrations > Apps tab. On this tab, open the app's settings by hovering your mouse over the app, then clicking on the Edit (pencil) button.

You can configure the following settings for this app:

Stream IDs

Required Use this field to specify the Streams that this app will personalize. To add a Stream, type in its Stream ID. Add multiple Streams by separating Stream IDs with commas.

To find a Stream ID, go to Hubs > Content > Streams tab, click on the Stream, then click on the Metadata tab. The Stream’s Stream ID is listed near the bottom.

Filter Items by Tags

Optional Turn on this setting to filter the specified Stream(s) so that only Items matching a specific tag are displayed. The tags to be matched are dynamically defined based on query string values present in the URL used to access the Stream. For example, if the URL contains the query string ?industry=healthcare, then turning on this option will only return Items that carry the Healthcare tag.

The app will attempt to find matches for any of the tags defined by present query strings. If any matches are found, only the Items matching the tag(s) are displayed, down to a minimum of one Item. If no matches can be found, the full Stream is displayed (all Items).

To use this option, you must add tags to your Items in the following format:

querystring.[field].[value]

Replace [field] with the Demandbase attribute, and [value]with the attribute’s desired value. For example, the tag querystring.industry.healthcare would indicate that the tagged Item should be displayed if the URL contains the query string ?industry=healthcare, and would therefore be applied to Items relevant to that topic.

Note that field names and values in tag names must match values in query strings exactly: any spaces, parentheses, etc. that exist in the query string must also exist in the tag.

Note

This app filters not just Items on the main Stream page, but also the additional Items displayed when viewing an Item in that Stream. While viewing an Item, the Next/Previous Item area and the Other Content in This Stream carousel will be filtered in the same way as the main Stream page:

For the carousel, filtered Items will take priority, and any additional free slots in the carousel (after all filtered Items have been displayed) will be filled with non-filtered Items from the same Stream

If no next or previous filtered Item is available, the Next/Previous Item area will be hidden

Previous Item Navigation Label

Optional Use this setting to specify a custom label for the Previous Item area while viewing an Item. If you do not specify anything here, the default label ("Previous Item") will be displayed.

Next Item Navigation Label

Optional Use this setting to specify a custom label for the Next Item area while viewing an Item. If you do not specify anything here, the default label ("Next Item") will be displayed.

Swap Logo

Optional Turn on this setting to dynamically set the Prospect Logo on Marketing/Sales Streams that use the Banner+Logo template. To use this setting, you must also specify the query string field name where the company name can be found with the Domain/URL Field Name setting (see below).

When enabled, the current visitor’s company will be extracted the query string and used to search Clearbit for a matching logo. If a logo is found, it is automatically placed in the banner beside your own logo. If no matching logo is found, both logos are hidden from the banner.

Note

For this feature to work, you must enable theBanner+Logo templateand specify a "default" Prospect Logo under the Appearance tab on any Marketing or Sales Stream where you want to use this app. The default logo will not be displayed, but this feature will not activate if no logo is set. We recommend using a generic logo for this purpose (e.g. a logo that just says "You" or similar).

We also recommend specifying a default Banner Title under the Appearance tab to be displayed in case no logo is found and the logos are hidden from the banner. If you do not specify a Banner Title, only a blank header (or Banner Image, if specified) will be shown.

Domain/URL Field Name

Required (if you have turned on the optional Swap Logo setting). Use this setting to specify the query string field name whose value should be used to search for a company logo. For example, if you set this to domainName, and the URL includes ?domainName=ACME.com, then the app will search Clearbit for “ACME.com”.

Enter only the exact name of the field, without ? or =, e.g domainName instead of ?domainName=.

Search & Replace

OptionalTurn on this setting to dynamically populate placeholders in Hub UI text with values from query strings. Placeholders can be placed in virtually all editable UI text across your Hub.

To insert a placeholder, use the format {querystring.[fieldname]}, replacing [fieldname] with the desired field name you have defined in the Search & Replace Fields and Empty Values section (see below). For example, a user with the query string ?firstName=John would see "John" anywhere you have inserted the placeholder{querystring.firstName}.

Note: Placeholders in URL and Email Fields

The app can also populate placeholders inserted into URL and email fields, such as the Link Action field on Link CTAs. Because most of these fields in Uberflip have validation, you must use a special format for placeholders in these fields to ensure that the placeholder is not rejected by the validator.

For fields that validate email addresses or URLs, donot use the standard placeholder format (as above). Instead, use the following formats:

Email Fields: replace@querystring.[fieldname]

URL Fields: replace.querystring.[fieldname]

As with the standard format, replace [fieldname] with the desired field name you have defined in the app settings. Note that the special formats are only required in fields with URL validation; URLs in normal text fields (unvalidated) can use the standard format.

When this setting is enabled, you must use the Search & Replace Fields and Empty Values settings to specify which query string field names you want to use in placeholders, as well as which default values to use if the field name is not present (or has a blank value).

Search & Replace Field and Empty Values (1st to 10th)

Required (if you have turned on the optional Search & Replace setting, at least the 1st field is required; the remainder are optional). Use these fields to specify the query string field names you want to use as placeholders. If you reference a query string field name in a placeholder, but have not specified it in one of these fields, then the placeholder will not work (will not be replaced with a value from the query string).

To use this setting, use each individual field to specify both the query string field name and a default value to be used in case the field name does not exist in the URL (or lacks a value).

Field names and their default values must be formatted as JSON objects, i.e. as a key-value pair. Use this format:

fieldName:'Default Value'

Define only one field name/value pair per setting text field, for example:

The example setting shown above would allow you to use the field names firstName, companyName, industry,usecase and repName as placeholders, and would insert the appropriate value (e.g.You, Your Company, etc.) anywhere that the corresponding placeholder appears if there is no value present in the URL.

Short Form: Use 'qs' instead of 'querystring'

Optional When the Filter Items by Tags and/or Search & Replace settings are enabled, turn on this setting to enable an alternative (shorter) format for tags and placeholders. When enabled, you can use qs instead of querystring in tags and placeholders, e.g. qs.[field].[value] rather than querystring.[field].[value].

Enable this setting if you are running into character limits in fields where you are entering tags and placeholders for this app.

Troubleshooting

If you experience problems with this app's functionality, this may be due to corrupted data. To resolve the issue, try clearing your browser's cache (or try using the app in Incognito Mode to see if that resolves the issue).

Objective

Resend an invitation email to add a new user to your Uberflip account (e.g. if the user never received or lost the original email).

Send an New Invitation Email

Log out of your Uberflip account (if you are currently logged in):

https://app.uberflip.com/users/forgot_password

Visit the following link:.

In the Email field, enter the email address of the user to whom you want to resend the email invitation.

Click the Request Password Reset button.

The specified user will be sent an email with a link to reset their password. When they click on this link, they will be able to create a password for the account associated with their email address, then log in with these credentials.

Additional Notes

In order for this to be successful, the user must have already been created (with the same email address you entered) in your Uberflip account.

The password reset email can take a few minutes to be delivered to the user after you request it. As with all automated emails, it may be misidentified as spam, so the user should check their spam folder as well.

With the upcoming release of Uberflip Analytics, we will start setting additional cookies on all Hubs to capture more granular analytics data. Here's what you need to know.

What's changing?

Uberflip sets a number of browser cookies to support various functions of our platform. These cookies are set in a visitor's browser whenever they visit a page on which Uberflip platform content is shown. Uberflip cookies are set when visiting:

Any page in your Hub(s)

Any Flipbook

Any domain on which you are using Site Engager

In addition to the cookies we already set, we will be making the following changes to support our upcoming Uberflip Analytics feature:

We're adding two additional cookies

We will also begin creating one or more entries in sessionStorage

Both the cookies and the sessionStorage entries will be set for any visitor to an Uberflip Hub, Flipbook, or domain with Site Engager enabled. These changes will take effect starting on May 30th, 2019.

Why is Uberflip making these changes?

Uberflip Analytics will offer significantly improved metrics for your Uberflip account, and the purpose of these changes is to capture more granular information about visitors, sessions, and browser windows/tabs. While we're making these changes now, Uberflip Analytics will not be released until approximately two months later. We are doing this so that multiple months worth of data will be available in Uberflip Analytics on release.

Do I need to do anything to prepare for these changes?

There are two things you should do to get ready for these changes:

Check for conflicts

While it's unlikely, cookies you set may have the same name, or sessionStorage entries you create may follow the same pattern, as the new cookies/entries Uberflip is setting. If you find a conflict, please adjust your cookie name(s) and/or sessionStorage entry patterns accordingly. If you do not resolve any conflicts, Uberflip Analytics will be unable to properly record metrics for your Uberflip account.

Update your privacy/cookie policies

If you have a privacy policy and/or cookie policy anywhere on your Hub, or on a website where Site Engager is enabled, and it separately lists each cookie on the relevant web property, you should update the policy to include these new cookies.

For the details about the cookies and sessionStorage entries you'll need to complete these steps, please refer to the Technical Information section below.

Note

If you are already participating in a beta related to Uberflip Analytics, you may already be setting the new cookies/creating the new sessionStorage entries. If this is the case, this is not a conflict. You only need to look for conflicts with cookies/entries that have not been created by Uberflip.

How do these changes affect me in terms of GDPR or my privacy policy?

Here are the facts about the new cookies and sessionStorage entries that are relevant to GDPR, other privacy regulations, or your privacy policy:

The new cookies and sessionStorage entriesstore random identifiers only. Therefore, they do not contain any of the following:

Confidential or personally identifiable information (PII)

Information sourced from Form CTAS, connected Marketing Automation Platforms, or other connected systems

The new cookies are best characterized as "performance and functionality" cookies for the purposes of the GDPR. They are used to enhance the performance and functionality of your Hub, Flipbook, or website, but are not essential to its use. Without these cookies, certain functionality like content recommendations or dynamic content will not function.

I use the Uberflip privacy features on my Hub. How do these changes affect those features?

If you have Uberflip privacy features enabled on your Hub, the new cookies will fall under the "Uberflip" functionality, and will be associated with the Privacy Group that you have assigned the Uberflip functionality to. This means that the new cookies (as well as the existing ones) will be set only if and when a visitor opts into this Privacy Group.

Technical Information

Below are the technical details about the new cookies and sessionStorage entries. You can use this information to check for conflicts and update your privacy/cookie policies.

Cookies

Name

Expiration

Secured

Size

_ufav

365 days

Yes (on domains with HTTPS only)

32 bytes

_ufas

60 minutes

Yes (on domains with HTTPS only)

32 bytes

Both cookies will be set on any domain hosting a Hub, Flipbooks, or websites with Site Engager enabled.

On domains using HTTPS (SSL/TLS), the cookie will be set securely and only sent on encrypted requests.

On domains using HTTP, the cookie will be set insecurely and sent on unencrypted requests.

HTML5 Web Storage

HTML5 Web Storage allows web applications to store data in a user's browser, similar to cookies. There are two objects in which data can be stored, window.localStorage and window.sessionStorage. You can learn more about HTML5 Web Storage here.

Uberflip will create one or more entries in window.sessionStorage only. Entries created in this object expire (and are deleted) when the relevant browser tab (or window) is closed.

The entries will be in the following format: _ufaw_<unique identifier>_<unique identifier>

Example: _ufaw_fc5b7adcb5c14c7ba967488c6d8a51fb_8e1b85fe1d774de49b6092ae03089cc7

Info: Cookies vs. HTML5 Web Storage

Here are the main differences between cookies and HTML5 web storage:

Cookies

HTML5 Web Storage

Behavior

Included automatically on any request sent to the Hub, Flipbook, or website domain. Increases the size of requests.

Not included automatically on requests. Does not affect the size of requests.

Scope

All browser windows and tabs have the same value.

Each browser window and tab has a different value.

Expiration

Have explicit expiration times.

localStorage has no expiration.

sessionStorage expires when the relevant browser window/tab is closed.

You can also learn more about sessionStorage specifically here.

Use this Custom Code snippet to remove the logo (or company name) from the navigation bar at the top of the Hub.

Warning

Hub Hacks are NOT official Uberflip features. They may not work on all Hubs, or may cause unexpected behavior. Before implementing a Hub Hack on a production Hub, we strongly recommending testing it in a safe environment (such as a staging Hub) if possible.

Uberflip Support is not able to help troubleshoot issues with Hub Hacks: if a Hub Hack is not working correctly in your Hub, Uberflip Support can only help you to disable it.

Details

Type: CSS & Javascript

Placement: Body Bottom

Code

<style>

.single-page .uf-disabled {

background: #ddd !important;

color: #fff !important;

pointer-events: none;

}

</style>

<script>

var fixGatedCtas = function fixGatedCtas() {

if ($('.cta[data-init-delay]').length !== 0) {

$('.download-pdf').addClass('uf-disabled');

var ctaDelay = parseInt($('.cta[data-init-delay]').attr('data-init-delay')) * 1000;

setTimeout(function () {

$('.download-pdf').removeClass('uf-disabled');

}, ctaDelay + 2000);

}

};

fixGatedCtas();

</script>

Get more useful data from Uberflip Analytics by excluding traffic from your own internal IP addresses (or any IP addresses of your choice).

Beta Feature Advisory

This article describes a feature which is currently in closed beta, and isnot yet widely available. If you are interested in participating in this beta program, please contact your Customer Success Manager or Uberflip Support.

Before You Begin

To work with Uberflip Analytics, you need to be an Account Administrator, or have the Uberflip Analytics > View permission.

To do this, you'll need to know your organization's IP address(es). You can usually obtain this information from your IT department.

Any IP addresses you specify will be excluded not only from Uberflip Analytics, but also from legacy Metrics / Sales Activity Dashboard.

About IP Address Exclusion

In most organizations, it's common for internal users to spend a lot of time browsing their own Hubs: aside from Marketing reviewing the content they create, Sales and Success teams will also routinely browse for content to share.

The problem is, all of this internal traffic throws off your metrics: your internal users tend to have different browsing habits from your external visitors, which can skew the data and make your metrics unreliable. To avoid this, you should set up Uberflip Analytics to filter out your organization's own IP addresses, which will exclude any data generated by internal visitors.

Note

In this article, we discuss excluding IP addresses in the context of excluding your own internal IPs, since that's the most common use case. Of course, you can also use this feature to exclude any IP address you like from your metrics not just your own.

Exclude Specific IP Addresses from Uberflip Analytics

You can specify any individual IP address or range of IP addresses to be excluded. The specified IP addresses must be IPv4 (IPv6 addresses are not supported), and can be added as single IP addresses, IP ranges, or CIDRs.

Any exclusions you specify will apply to both Uberflip Analytics and legacy Metrics. The exclusion rules work differently for each system:

In Uberflip Analytics: IP address filters are applied both retroactively (to previously collected data) and to future data. Filters are non-destructive (filtered data is hidden, not deleted).

In legacy Metrics: IP address filters are applied only to future data, i.e. after an exclusion is added. Any previously collected data relating to an excluded IP address will not be removed from your existing metrics. Filters are destructive (filtered data is deleted, and not recoverable).

To exclude IP addresses from Uberflip Analytics (and legacy Metrics):

Log in to Uberflip and click on Analytics in the top menu.

In the sidebar menu on the left, click on Analytics Settings, then click on Exclude IP Addresses:

The Exclude IP Addresses menu will appear on the right. Use the IP Addresses text box to type in any IP address(es) that you want to exclude from Uberflip Analytics data.

See the help text above the text box for accepted formats.

When you are finished, click on Save. Your settings will take effect immediately.

If you later want to remove an IP address exclusion (i.e. to stop filtering out traffic for a certain IP address/range), simply remove it from the list, then click on Save again.

For Uberflip Analytics: Data for previously filtered IP addresses will be visible again, including for the period when the exclusion was in effect.

For legacy Metrics: Data for previously filtered IP addresses will only be visible for the period after the exclusion was removed (and before the exclusion was added). Data for the period when the exclusion was in effect was not collected, and is not available.

Excluded Visitors Dashboard

Because Uberflip Analytics filters out data for excluded IP addresses without destroying it, this data is still collected and remains available. The Excluded Visitors dashboard, which is located below the Exclude IP Addresses menu, displays metrics for only the IP addresses specified in your exclusion list:

This dashboard essentially shows the effects of the exclusion rules you have set up. As a result, it's useful for testing if the exclusions you have configured are having the intended effect.

Get more useful data from Hub Metrics by ignoring traffic from your own internal IP addresses.

Before You Begin

To use this feature, you need to be an Account Admin, Content Manager, or Analyst.

To do this, you'll need to know your organization's IP address(es). You can usually obtain this information from your IT department.

Any IP addresses you specify will be excluded not only from legacy Metrics, but also from Uberflip Analytics and the Sales Activity Dashboard.

About Excluding IP Addresses

In most organizations, it's common for internal users to spend a lot of time browsing their own Hubs: aside from Marketing reviewing the content they create, Sales and Success teams will also routinely browse for content to share.

The problem is, all of this internal traffic throws off your metrics: your internal users tend to have different browsing habits from your external visitors, which can skew the data and make your metrics unreliable. To avoid this, you should set your Hub Metrics filter out your organization's own IP addresses, which will exclude any data generated by internal visitors.

Note

In this article, we discuss excluding IP addresses in the context of excluding your own internal IPs, since that's the most common use case. Of course, you can also use this feature to exclude any IP address you like from your metrics not just your own.

Set Hub Metrics to Exclude IP Addresses

You can exclude any individual IP address or range of IP addresses (the specified addresses must be IPv4). Excluding an IP address does not work retroactively, i.e. any previously collected data relating to an excluded IP address will not be removed from your existing metrics.

Log in to Uberflip.

After logging in, click on Metrics in the top menu.

On the Metrics Dashboard, find the Metrics Options box on the right. Here, click on Exclude IP Addresses.

The Metrics Excluded IPs window will appear. Use the IP Addresses text box to type in your internal IP addresses that you want to exclude from metrics collection.

See the help text in the window for accepted formats.

You can separate a list of multiple individual IPs with a comma, e.g.:

127.0.0.1,127.0.1.1,127.1.1.1

When you are finished, click on Save. Your settings will take effect immediately.

Learn how to set up your Flipbooks to optimize the way they rank in search results.

Search Engine Optimization for Flipbooks

SEO for Flipbooks can be a little tricky. Although Flipbooks have their own SEO settings, using these settings usually won't give you the best results.In this article we'll explain why, and show you the key best practices we've learned for optimizing Flipbooks content for search.

Best Practice 1: Serve Flipbooks as Hub Items

We created Flipbooks before Uberflip Hubs came along, so they were designed to serve your PDF content directly. This meant that, if a Flipbook showed up on Google, clicking on it would simply open that content in the Flipbook viewer right away.

That was fine at the time, but now there is a better way: serve Flipbooks through your Hub, by automatically embedding them in Hub Items. Doing this will allow you to better leverage the often high-value content that your Flipbooks represent.

Why?

There are a few benefits to embedding Flipbooks in Hub Items, rather than making them directly accessible. You can:

Gate Flipbooks with Form CTAs : When you embed a Flipbook in an Item, you can place a Form CTA on the Flipbook that visitors must interact with before they can access the content. This allows you to leverage your high-value Flipbook content to help generate leads.

Recommend related content: When you make Flipbook content part of your Hub, you can use Content Recommendations to recommend other content that visitors might be interested in. This keeps visitors interacting with your content for longer, raising their engagement.

Improve SEO: There are far more SEO options available to you through your Hub than with Flipbooks alone, so Flipbooks embedded in Hub Items can potentially rank much better.

Do This:

Add Flipbook Streams to your Hub, one for each Flipbook Folder you have. Each Flipbook Stream you add will automatically create individual Items for every Flipbook in the specified Folder.

Once these Items have been created, you can flesh them out with blog content for SEO ( see below ) and add Form CTA gates, enable Content Recommendations, and so on. When a Flipbook Item is ready, you can publish it like any other Item in your Hub, and add it to your Marketing and Sales Streams.

Best Practice 2: Block Flipbook Indexing

After you've set up your Flipbooks to be served as Hub Items, you have to make sure this is the only way to access them. To do that, you need to change your Flipbook SEO settings to block indexing of the direct Flipbook URL.

Why?

Flipbooks have their own SEO settings, separate from those in your Hub. One of these settings is Block search engines from indexing my content, which is turned off by default. As a result, search engines can index the direct URL for Flipbooks, and the direct version of a Flipbook can appear in search results alongside the Hub Item version. This means that, if the Hub Item version is gated with a CTA, visitors could simply bypass the CTA by going to the direct version instead. For this reason, you should make sure to turn on this setting so that the direct version is not indexed.

Another reason to block indexing of Flipbooks is that it's unreliable: Flipbooks have a separate URL for every page in the Flipbook, and Google can choose to index the URL for whichever page it deems most relevant. When this happens, clicking on the Flipbook in search results will take visitors to somewhere in the middle of the Flipbook, not the first page (cover) not an ideal content experience.

Do This:

Open your Flipbook SEO settings by going to Flipbooks > select a Folder > Edit > Basics > Search Engine Optimization. Make sure that the setting Block search engines from indexing my content is checked(remember to click the Save button to apply the change):

Uberflip Resource Hub: Your No-Fear Guide to Scaling Personalized Content for ABM [Ebook]

This a Folder-specific setting, so you will need to change it separately for every Flipbooks Folder you have. Also, making this change will override any other SEO settings you might have previously configured here (e.g. keywords), so you don't need to worry about changing them.

Best Practice 3: Write search-optimized content for your Flipbook Hub Items

Now that you are serving up your Flipbooks through Hub Items, you need to work on the Item content to optimize it for search engines. That means writing engaging content for the Item itself, as well as applying SEO best practices.

Why?

When you create a Flipbook Stream, every Item in that Stream is basically a blank blog post with an embedded Flipbook. Search engines can't see the contents of the Flipbook, so unless you add some content in the blog post itself, the Item will just look like an empty page from Google's perspective. If you want the Hub Items containing your Flipbooks to rank well, you'll need to add some search-optimized content.

Do This:

Treat your Flipbook Items like you would any other blog post: create quality content for them that can stand on its own.

Google needs to consider the content of these Items good enough to rank all by itself, as if the Flipbook wasn't there. At minimum, it needs to be long enoughso that it's clearly real content (rather than just a bunch of keywords). As a general rule, we recommend aiming for no less than five paragraphs. Use the opportunity to write content that gets the reader excited about reading your Flipbook and therefore more likely to submit your Form CTA, if the Flipbook is gated.

You should also ensure that this content is optimized for search engines. Remember to apply the usual SEO best practices: identify the keywords you want to target and include them in your body text and headings; add meta descriptions, etc. Don't forget to leverage Uberflip's built-in SEO functionality.

Example: An Uberflip Ebook

To illustrate the benefits of using these best practices, here is an example of how we've applied them to one of our own Flipbooks, an ebook called Your No-Fear Guide to Scaling Personalized Content for ABM.

First, here's the Hub Item we created for this Flipbook:

When we published this Flipbook, we knew we wanted to target the following keywords:

scale/scaling

content

ABM

With that in mind, our Marketing team wrote content for the Flipbook Item which uses these keywords liberally (but not to an unnatural-sounding extent):

Importantly, the content is long enough for Google to consider it worthwhile. At the same time, it serves to explain the value of the ebook to visitors (i.e. why they should consider filling out the Form CTA to access it).

The result: if you search for scaling content abm on Google, the Flipbook Item appears as the two highest-ranked search results for those terms.

As you can see, these best practices can be very effective when implemented well, so we highly recommend taking the same approach with your Flipbooks.

Use this Custom Code snippet to force Tiles to open in a new browser window when clicked.

Warning

Hub Hacks are NOT official Uberflip features. They may not work on all Hubs, or may cause unexpected behavior. Before implementing a Hub Hack on a production Hub, we strongly recommending testing it in a safe environment (such as a staging Hub) if possible.

Uberflip Support is not able to help troubleshoot issues with Hub Hacks: if a Hub Hack is not working correctly in your Hub, Uberflip Support can only help you to disable it.

Details

Type: JavaScript

Placement: Body Bottom

Notes: If you're using the Auto Redirect to Item's Canonical URL option on a Stream, this will open the link in a new browser window when any Tile in the Stream is clicked.

Code

<script>

Hubs.onLoad = Hubs.onPageChange = Hubs.onItemsLoaded = function(){

$("a.item-link[data-internal=false]").attr("target", "_blank");

};

</script>

Your Hub has a variety of settings that can impact SEO. Here's a rundown of what they are, what they do, how to use them, and where to find them.

Overview

As with all your web properties, setting up your Hub so it's optimized for search engines is essential for ensuring that your content is seen. Your Hub contains numerous features and settings that impact SEO, from the Hub level all the way down to the Item level. In this article, we'll take a look at what each of these settings do, where you can find them, and the best practices for setting them for the most effective SEO.

SEO Title and SEO Description

Applies to: Hub | Stream | Item

What These Settings Do

These two related settings control the meta title tag and meta description tag, which are found in the HTML of the Hub homepage, the top level page of each Stream, and each Item. These tags define the title and description that appear in search results: the title tag is the clickable headline, and the description is the short descriptive text that appears underneath. In addition, the title tag also appears on the browser tab when someone is viewing a Hub, Stream or Item page, and when the page is shared on most social networks.

Title tags and description tags are metadata: they tell visitors what they can expect on your page, so it's important to create interesting titles and descriptions to draw them in. Search engine algorithms also scan these tags for keywords, so they should contain the keywords you're targeting.

Hub:

Alt image text

Stream:

Item:

Best Practices for Use

Title tags should:

Be unique across your Hub (no duplicates) to avoid being downranked for duplicate content in search results

Be under 60 characters in length (including spaces), as Google only displays the first 50-60 characters of a title tag

Contain your keywords, but don't keyword-stuff as you risk the title being rewritten by Google

Ideally use this optimized format: Primary Keyword - Secondary Keyword | Brand Name

Description tags should:

Be unique across your Hub (no duplicates) to avoid identical descriptions on multiple search results

Be under 160 characters in length (including spaces), as Google only displays the first 155-160 characters of a description tag

Both include the keywords you're targeting and provide a descriptive, compelling overview of the content on the page

Not include double quotation marks, as Google cuts off the description where they appear

How to Configure

Hub

To set the Hub SEO Title and SEO Description:

Click on Appearance

Click on Branding

Scroll down and type into the SEO TitleandSEO Description fields

Stream

To set a Stream's SEO Title and SEO Description:

Click on Content

Click on the Streams tab

Click on the Stream

Click on the Metadata tab

Type into the SEO Title and SEO Description fields

Item

To set an Item's SEO Title and SEO Description:

Click on Content

Click on the Items tag

Click on the Item

Click on the SEO tab

Type into the SEO Title and SEO Description fields

H1 Headings

Applies to: Hub | Stream | Item

What This Setting Does

H1 tags are HTML section tags that define the highest-level section heading on a page. In Uberflip, they're used for the title text on your Hub homepage, on the top level page of each Stream, and on Items. H1 tags are less important from a search engine algorithm perspective than title tags, but they are very important for user experience as they give the visitor an idea of the content they are about to consume.

Hub:

Stream:

Item:

Best Practices for Use

H1 headings should:

Be descriptive and readable (the H1 is mainly intended for humans, not search engine robots)

Use different wording than the title tag

Contain your keyword phrase once (don't keyword-stuff)

How to Configure

Hub

To set the Hub H1 heading:

Click on Appearance

Click on Custom Labels

Scroll down and find the line for the Latest Content field

Type into the Custom Label box

Stream

To set a Stream's H1 heading:

Click on Content

Click on the Streams tab

Click on the Stream

Find the Stream name at the top of the page

Click on the pencil icon next to the Stream name

Type into the textbox that appears

Click the checkmark icon to save

Item

To set an Item's H1 heading:

Click on Content

Click on the Items tag

Click on the Item

Type into the Item title field near the top of the page

H2-H5 Headings

Applies to: Item

What This Setting Does

Like H1 headings, you use H2 to H5 headings to define sections in your content copy. Headings below H1 can be expected to have minimal impact on ranking, but Google has stated that they do use heading tags to understand the structure of a page when crawling it. More importantly, headings are prominently displayed on your content: this means that visitors tend to notice them, so they're a great way to grab attention.

Best Practices for Use

Reserve H1 headings exclusively for your title in your content, the highest-level sections should be H2

Structure headings in ascending numerical order, i.e. higher number headings should be nested within lower number headings, i.e. H4 should be under H3, which should be under H2

Use keywords in your headings, but don't keyword-stuff

How to Configure

To change any string of text in an Item to a heading:

Click on Content

Click on the Items tab

Click on the Item

Click on the Editor tab

Highlight the text that you want to make into a heading

Use the Paragraph Format dropdown in the editor tools to choose the heading style:

Robots Meta Tag

Applies to: Hub | Stream

What This Setting Does

Robots (also known as crawlers or spiders) are the programs used by search engines to automatically browse websites so they can be included in search results. The robots meta tag is an HTML tag that can be used to tell these robots how to crawl your website.

In Uberflip, the robots meta tag is controlled by a simple on-off switch: if disabled, the tag will simply not appear in your Hub's HTML; if enabled, it will appear with the parameters noindex and follow.

You can enable the robots meta tag at both the Hub and Stream level. When enabled, it tells robots to not index the Hub or Stream (noindex), so that it is not included in search results, but that they can still use links within the Hub or Stream to discover additional content and influence search ranking for pages that can be indexed (follow).

Best Practices for Use

The robots meta tag is enabled by default on all new Hubs, so one of the first things you should do when you're ready to go live is make sure it's turned off

You should enable the robots meta tag on any Hub or Stream that you don't want to show up on search engine results (examples of this include a sandbox Hub or an internal resource centre)

How to Configure

Hub

To set the robots meta tag for a Hub:

Click on Hub Options

Click on Advanced

Scroll down to the SEO section

Check the box next to No Robots Meta Tag to enable the tag (block indexing) or uncheck to disable it (allow indexing)

Stream

To set the robots meta tag for a Stream:

Click on Content

Click on the Streams tab

Click on the Stream

Click on the Options tab

Scroll down to the setting No Robots Meta Tag

Click the toggle switch on the right to enable the tag (block indexing; green setting) or disable the tag (allow indexing; grey setting)

Note

The Stream-level setting will have no effect if the Hub-level setting is enabled, as the Hub-level setting will take precedence.

Canonical Meta Tag, Canonical URL & Force Self-Canonical URL

Applies to: Stream (Canonical Meta Tag/Force Self-Canonical URL) | Item (Canonical URL)

What These Settings Do

These related settings work together to handle duplicate content. Duplicate content is a particular concern in a Hub, where the same piece of content will often appear in multiple places: for example, an Item might simultaneously exist in an external blog, in the Source Stream that imported content from that blog, and in any Marketing Stream to which you added the Item. Duplicate content can cause SEO authority to be diluted, so it's important to mitigate this through canonicalization.

Canonicalization means adding a canonical meta tag to a page's HTML. This tag indicates the canonical or "master" URL for that content, and is added by turning on the Enable Canonical Meta Tag option for a Stream. With a canonical meta tag, you're essentially telling a search engine, "these pages with different URLs look like duplicates of one another, so here's the URL of the only copy I want you to care about". This allows you to specify which of the URLs for the duplicate pages will be crawled by the search engine, while the others are ignored.

The Enable Canonical Meta Tag option is turned on by default on Source Blog Streams (importing from an RSS feed) and Marketing Streams, and is turned off by default on "from scratch" Blog Streams and all other types of Streams.

The URL that the canonical meta tag points to as the "master" is the canonical URL, which is set at the Item level. The canonical URL is set automatically on Items imported from an external source (except for Items in Video and Social Streams) as the URL of the Item's original location. For Items created within Uberflip, no canonical URL is set by default. In both cases, you can modify the canonical URL or add one on an Item-by-Item basis.

If you have imported content from an external source (like a blog) and prefer for the corresponding Items in your Hub to be regarded as the "master" copies by search engines, you can use the force self-canonical URL option. When enabled, this setting overrides the default canonical URL set at the Item level (e.g. the URL of the Item in its original source context, like the blog), and instead sets the canonical URL for every Item in the Stream to be the the URL of the Item within the Stream.

Best Practices for Use

In general, we recommend that you turn on Enable Canonical Meta Tag on all Streams, as designating a canonical is better for SEO than not having one.

If a canonical URL has been set on an Item (e.g. on imported blog Items, or if you have specified it yourself), then the canonical meta tag will use it as the canonical URL.

If no canonical URL has been explicitly set on an Item (the canonical URL field is blank), then the canonical meta tag will use the Item's own URL.

The exception to this rule is on Marketing Streams: if the Items in the Stream don't have explicit canonical URLs (the canonical URL field is blank), then you should turn off the Enable Canonical Meta Tag option on that Stream. Otherwise you will create duplicate content, because any Items with no explicit canonical URL that appear in both a Source Stream and a Marketing Stream will each use their own URLs in the context of each separate Stream as the canonical.

If possible, the best practice for Marketing Streams that have Enable Canonical Meta Tag turned on is to add canonical URLs to all Items within that Stream.

The force self-canonical URL option is intended as an override if an explicit canonical URL is present. It's useful if you have imported content into Uberflip from an external blog, and now want the Uberflip Item to be the "master" that appears in search results (i.e. it overrides the external blog URL that's set as the canonical with the Item's Hub URL). If you prefer for the original blog page to remain the "master", leave this option turned off.

If you do choose to use the force self-canonical URL option, you should also create 301 redirects on the original blog that point to the corresponding Items in your Hub, so that SEO authority can be passed over.

Note

Keep in mind that all three of these options require the robots meta tag to be turned off to have any effect. If the robots meta tag is turned on, the canonical meta tag is ignored by search engine robots.

How to Configure

Canonical Meta Tag

To set the canonical meta tag for a Stream:

Click on Content

Click on the Streams tab

Click on the Stream

Click on the Options tab

Scroll down to the setting Enable Canonical Meta Tag

Click the toggle switch on the right to enable the tag (set a canonical URL for all Items in the Stream; green setting) or disable the tag (no canonical URL; grey setting)

Canonical URL

To add a canonical URL to an Item, or to change a default canonical URL:

Click on Content

Click on the Items tag

Click on the Item

Click on the SEO tab

Find the Canonical URL field and enter the desired URL

Force Self-Canonical

To override the default (external) canonical URLs for all Items in a Stream:

Click on Content

Click on the Streams tab

Click on the Stream

Click on the Options tab

Scroll down to the setting Force Self-Canonical URL

Click the toggle switch on the right to enable the setting (override the default canonical URLs for all Items in the Stream; green setting) or disable the setting (use default canonical URLs; grey setting)

URL Path

Applies to: Stream | Item

What This Setting Does

The URL path is the part of the URL for Streams and Items that appears after your Hub domain. For example, if your Hub domain is resources.mycompany.com/, the URL path is everything that comes after the slash, e.g. resources.mycompany.com/an-example-streamfor a Stream, or resources.mycompany.com/an-example-stream/an-example-itemfor an Item in that Stream.

Uberflip will automatically generate URL paths for your Streams and Items from their titles, but this can sometimes result in truncated or otherwise non-optimal URL paths. To fix this, you have the option of setting the URL path yourself.

The URL path has a minor impact on SEO from a ranking standpoint, but it is very important for user experience. Much like H1 headings, the URL path helps users to understand at a glance what a page is about. This is helpful not just in the context of search engine results, but also anytime you share a link to your content.

Stream

Item

Best Practices for Use

Your URL paths should:

Be as human-readable as possible to give visitors a good idea of what to expect

Contain your keywords (but don't keyword-stuff), separated by hyphens (-)

Be 100 characters or less in length for readability (aim to be concise but descriptive)

Be in all lowercase

Not contain punctuation, underscores or spaces

Not contain stop words (extremely common words like the, for, if, a, an, etc.), because Google ignores these but don't eliminate stop words at the expense of readability

Match the title of the page as closely as possible

How to Configure

Stream

To set the URL path for a Stream:

Click on Content

Click on the Streams tab

Click on the Stream

Click on the Metadata tab

Find the URL Path field and enter the desired URL path

Item

To set the URL path for an Item:

Click on Content

Click on the Items tab

Click on the Item

Click on the Metadata tab

Find the URL Path field and enter the desired URL path

Alt Image Text

Applies to: Item

What This Setting Does

, also called "alt text" or "alt attributes", is used in a page's HTML to describe the contents and function of images. In terms of SEO, it helps search engine robots to index images and understand what they contain. Just as importantly, alt image text is crucial for making your content accessible for visually impaired users with screen readers: instead of just hearing that there is an image on the page, they'll be able to hear a description of that image.

Best Practices for Use

You should have alt image text for all your images

Alt image text should primarily be descriptive: you want someone who can't see the image to be able to imagine it

Include keywords (but as always, don't keyword-stuff) for the benefit of search engine robots

Make sure your image filenamesare also SEO-friendly, to help with ranking in image search:

Descriptive and human-readable

Avoid non-alphabetical characters (like \%, $, &, etc.)

Use dashes (-) to separate words, not underscores (_)

How to Configure

To add or modify alt image text:

Click on Content

Click on the Items tab

Click on the Item

Click on the Editor tab

Right-click on the image to which you want to add alt text

Click on Image Properties

In the Image Properties pop-up, find the Alternative Text field and enter the alt text you want to use with this image

Click on OK

To get the best results when you convert your PDFs to Flipbooks, follow these requirements and formatting guidelines.

Basic Requirements

All pages must be merged into one file (we recommend using an Optimized PDF )

However, we do not recommend binding multiple PDF files into a PDF Package

Single-page cropped layout (no double-page spreads), with any crop marks removed

All pages in the same orientation: either all-portrait or all-landscape, not mixed

Pages in the correct order (can't be re-ordered after upload)

Secured PDFs can be used, but security settings will be removed during conversion

Sizes and Dimensions

Maximum page number is 1200 pages per file (but may be lower based on your specific subscription type)

Maximum file size is 500 MB

Maximum single-page surface area is 430 square inches

No minimum size requirement for page area, but we recommend PDFs be at least 5 inches on all sides (wide/tall) for acceptable quality on larger displays

Text and Fonts

Text should be "real" text (not images of text) to ensure it looks sharp when zoomed and can be parsed by search engines

Embed all fonts used in the PDF

Avoid CID and Embedded Open Type (EOT) fonts

Layout

Use RGB Color Space for most accurate color conversion

No minimum resolution for images, but we recommend at least 200 DPI for acceptable quality

All layers merged

All transparencies flattened

Avoid overprint elements

Delete clipping paths where possible to avoid white "ghost lines" which may appear after conversion

Links and bookmarks, including to Named Destinations, will be maintained during conversion

Embedded scripts, media (audio/video) and buttons will be removed during conversion, but can be added back post-conversion with the Page Editor

PDF Comments will be removed during conversion

Learn how to divide a Marketing Stream into distinct sections with their own headings with this Hub Hack.

Warning

Hub Hacks are NOT official Uberflip features. They may not work on all Hubs, or may cause unexpected behavior. Before implementing a Hub Hack on a production Hub, we strongly recommending testing it in a safe environment (such as a staging Hub) if possible.

Uberflip Support is not able to help troubleshoot issues with Hub Hacks: if a Hub Hack is not working correctly in your Hub, Uberflip Support can only help you to disable it.

Before You Begin

To follow the instructions in this article, you will need to use the Custom Code feature. To use this feature, you need to be an Account Admin or Content Manager.

You should also be comfortable with using the Custom Code feature and working with custom code in your Hub. While not required, a basic familiarity with HTML, CSS and JavaScript is helpful for following this guide.

This Hub Hack can only create sections in Marketing Streams. It does not work with Sales Streams or any type of Source Stream.

For the purposes of this guide, we will assume that the Marketing Stream you want to add sections to already exists. If not, please create the Stream and add content to it before proceeding.

About Stream Sections

What This Hub Hack Does

In certain Streams, it can sometimes make sense to divide the content into sections to make it easier for visitors to navigate.

For example, in the Uberflip Academy, we have a number of training videos that cover various aspects of setting up your Uberflip Hub. The videos are all within a single Stream so that they're easy to browse, but they're also logically organized around the stages of the Content Experience Framework : some videos relate to centralizing content, others to personalizing experiences, and so on.

We wanted to make it clear which videos related to each stage, so we split the Stream into sections that correspond to these stages, as you can see here :

Step 4

If you have a similar use case in your Hub, you can use the Hub Hack described in this article to create your own sectioned Streams.

How It Works

As with all Hub Hacks, Stream sections are primarily driven by custom code snippets that you'll add to your Hub. But because Uberflip doesn't have a built-in way to create "dividers" between content Items, you'll also need to do some additional setup work to achieve this effect. Specifically, you'll need to create:

Link CTAs for every section heading you need

A special placeholder Item in a dedicated Stream

Here's how it works:

To create the section headings in the Stream, you will use specially-formatted Link CTAs. Each section heading will be represented by a single Link CTA, and the Tagline/Copy text that you set on the CTA will be used as the section heading text that is displayed within the Stream. For example, this Link CTA:

Will look like this when used as a section heading in a Stream:

Once created, you can simply put these Link CTAs anywhere within the Stream that you want to place a section heading.

Important

Because this Hub Hack uses Link CTAs to create section headings, it's subject to a Link CTA-related limitation: all Link CTAs must be placed within the first 20 Items in a Stream.

This means that, although you can use this Hub Hack on Streams with any number of Items, your last section heading must appear before the 20th Item in the Stream (or earlier). In other words, you will not be able to place any section headings after the 20th Item.

You will also need to create a placeholder Item in a dedicated Stream. This placeholder Item is needed as a workaround for a placement problem: the Link CTA that represents the first section heading needs to be placedbefore the first content Item, but a CTA can't be in first position in a Stream. To get around this, you use the placeholder Item to occupy first position in the Stream, with the first section heading CTA in second position, like this:

Because the placeholder Item will be hidden with custom code, the CTA in second position will effectively be in first position when the Stream is viewed putting the first section heading at the top of the page, with no Items above it.

The placeholder Item also serves a second purpose by functioning as the "on switch" for this Hub Hack. When you add the placeholder Item to any Marketing Stream, the custom code will look for the specially-formatted Link CTAs within that Stream, and will display them as section headings if they're present. This makes it easy to create additional sectioned Streams later.

When you're ready to get started, follow the steps below.

Step 1: Create a Placeholder Item in a Dedicated Stream

To get started, create a new Blog Stream, then create the placeholder Item inside this Stream. The placeholder Item will be hidden by custom code, and you will use it to enable sections on any Marketing Stream of your choice by simply adding it to the Stream. For details on why this placeholder Item is needed, see above.

For this guide, we will assume you are familiar with Blog Streams and Items, and will not provide step-by-step guidance on how to create a Stream or Item. For detailed instructions, see this article.

Important

You must create a new Stream, and this Stream should contain ONLY the placeholder Item. There are a few reasons for this:

It's cleaner: having the placeholder Item in a dedicated Stream makes it easier for others to understand and modify this setup later

The Stream itself must be hidden and must not be indexable, so it can't be used for anything else

The custom code snippet that powers this Hub Hack hides all content from this Stream, so any other Items you add to it will be invisible everywhere

Log in to your Uberflip account and navigate to the Hub with the Stream to which you want to add sections.

To begin, create a new Blog Stream.

Make sure you choose the "Start from scratch" option when creating the Stream.

We recommend calling this Stream something that clearly indicates its purpose, such as "Stream Sections Placeholder Stream", and briefly describing this purpose in the Stream description.

Once the new Stream has been created, open it. Configure it as follows:

Hide the Stream (three-dot "meatball" menu in top right > Hide).

Turn on No Robots Meta Tag (Options tab > No Robots Meta Tag).

Go to the Stream's Items tab and create a new Item.

Again, we recommend using an article title that clearly describes its purpose, such a "Hidden Placeholder Item for Stream Sections".

We recommend pasting the following text snippet into the body of the article:

Do NOT delete this article or remove it from this Stream!

If you are viewing this article in a Marketing Stream, do NOT change its position in the Stream.

This article is used to create sections in Streams. For more information, see here:

https://help.uberflip.com/hc/en-us/articles/360037349611

Do NOT use the "Hide" setting (Metadata tab > Status) for this article (ensure it is set to "Show"), as the article will be hidden using custom code in the next step.

While still viewing the new article in the article editor, look at the address bar in your browser. The URL should end with three groups of digits separated by forward slashes (/), like this:

Make a note of this article's Item ID, which is the middle group of digits (without the slashes):

Also make a note of this Stream's Stream ID, which is the last group of digits (without slashes):

Finally, publish the new article.

Even though it will never be shown anywhere, the article must be published for this Hub Hack to work.

After publishing the new article, move on to the next step.

Step 2: Add Custom Code

The next step is to add the custom code blocks that power this hack to your Hub. You will create two separate code blocks: one for CSS, and one for JavaScript. To complete this step, you will need the Stream ID and the Item ID you noted down in the previous step.

For this guide, we will assume you are familiar with custom code blocks, and will not provide step-by-step guidance on how to create and enable them. For detailed instructions, see this article.

CSS Custom Code Block

Configuration

Name: Stream Sections (CSS) (or any name you prefer)

Description:CSS to enable Stream Sections, as documented here: https://help.uberflip.com/hc/en-us/articles/360037349611 (or any description you prefer)

Privacy Group: None

Placement: Head

Code

CSS Code Snippet

<style>

/*Make items from the sectioning placeholder streams invisible everywhere*/

[data-source-stream-id = "INSERT STREAM ID"] {

display: none;

}

/*Enable sections using CTAs in Streams containing the specified Item*/

#collection-items {

opacity: 0;

transition: opacity 0.3s ease;

}

body.custom-cta-segmentation .description-block {

margin-bottom: 0;

}

body.custom-cta-segmentation .tile[data-id="INSERT ITEM ID"] {

display: none !important;

}

body.single-page .tile[data-id="INSERT ITEM ID"] {

display: none!important;

}

body.custom-cta-segmentation .uf-section-title {

font-weight: 300;

font-size: 25px;

line-height: 29px;

margin-bottom: 20px;

display: block;

clear: both;

background: transparent;

}

body.custom-cta-segmentation .uf-section-title a {

display: block;

position: relative;

top: -120px;

visibility: hidden;

}

@media screen and (max-width: 860px) {

body.custom-cta-segmentation .uf-section-title a {

top: -90px;

}

}

body.custom-cta-segmentation .uf-section-title p {

padding-top: 30px;

padding-bottom: 10px;

margin-bottom: 32px;

position: relative;

display: block;

}

body.custom-cta-segmentation .uf-section-title p:after {

content: "";

position: absolute;

bottom: 0;

left: 0;

height: 1px;

width: calc(100\% - 20px);

background-color: #ddd;

}

@media screen and (max-width: 560px) {

body.custom-cta-segmentation .uf-section-title p:after {

width: 100\%;

}

}

body.custom-cta-segmentation .uf-section-title:first-child p {

padding-top: 0;

}

</style>

Paste the code snippet provided above into the code box. Make the following changes:

Search for [data-source-stream-id = "INSERT STREAM ID"] and replace INSERT STREAM ID with the Stream IDyou made a note of in the previous step (make sure to keep the quotes).

Search for [data-id = "INSERT ITEM ID"] and replace INSERT ITEM ID with the Item IDyou made a note of in the previous step (make sure to keep the quotes).

After pasting in the code snippet, save, then enable the code block.

JavaScript Custom Code Block

Configuration

Name: Stream Sections (JS) (or any name you prefer)

Description: JavaScript to enable Stream Sections, as documented here: https://help.uberflip.com/hc/en-us/articles/360037349611 (or any description you prefer)

Privacy Group: None

Placement: Body Bottom

Code

JavaScript Code Snippet

<script>

window.ctaSegmentationLoaded = false;

$('.single-page .item-prev a[data-item-id="INSERT ITEM ID"]').parent().hide();

var ctaSegmentation = function() {

var spacerTile = $('.tile[data-tags="spacer-tile"]');

if (spacerTile.length > 0) {

// spacerTile.remove();

spacerTile.hide();

}

if (!$("body").hasClass("single-page")) {

$("a.cta-button").each(function(index, el) {

var currentButton = $(el);

if (currentButton.text() === "section") {

$("body").addClass("custom-cta-segmentation");

var sectionTitle = currentButton.siblings("p").text();

var link = currentButton.attr('href').replace(/(^\w+:|^)\/\//, '');

link = link.split('.')[0];

currentButton

.parent()

.removeClass()

.addClass("uf-section-title")

.removeAttr("style")

.html(

'<a id=' + link + '>' + '</a>' + '<p>' + sectionTitle + '</p>'

);

}

});

$("#collection-items").css('opacity', '1');

} else {

var itemPrev = $(".item-prev");

if (itemPrev.find("span.title").text() === "spacer") {

itemPrev.html("");

}

}

};

Hubs.Events.on('load', function(){

if(!window.ctaSegmentationLoaded){

ctaSegmentation();

window.ctaSegmentationLoaded = true;

}

});

if(!window.ctaSegmentationLoaded){

Hubs.Events.trigger('load');

}

</script>

Paste the code snippet provided above into the code box. Make the following change:

Search for [data-item-id = "INSERT ITEM ID"] and replace INSERT ITEM ID with the Item IDyou made a note of in the previous step (make sure to keep the quotes).

After pasting in the code snippet, save, then enable the code block.

After creating and enabling both custom code blocks, move on to the next step.

Step 3: Create Section Heading Link CTAs

Next, create the Link CTAs that will serve as the section headings in your Stream. You'll need to create one Link CTA for every section heading you want to use.

For this guide, we will assume you are familiar with Link CTAs and will not provide step-by-step guidance on how to create them. For detailed instructions, see this article.

Configure each Link CTA as follows:

For the CTA name, choose any name you want (it will not be displayed in the Stream, only in the CTA Manager). We suggest indicating the Stream that this CTA will be used in in the name field.

Layout tab > Tagline/Copy: Type the heading text you want to use.

This is the text that will actually be displayed as a heading when the CTA is placed in the Stream.

Layout tab > Button label: Type in section.

This must beonly the word "section", in lowercase, and nothing else. This text is what identifies the Link CTA as a section heading to the custom code, and is not displayed.

Layout tab > Link Action: Type in any website URL you want.

This URL is not displayed anywhere, but you must enter something. We suggest entering your corporate website URL.

Design/Placements/Variations tabs: You do not have to configure anything on these tabs, and can leave them on their default settings. The design of the CTAs is unimportant (as they will not be displayed as CTA tiles), and you will take care of placement in the next step.

After creating all the necessary section heading Link CTAs, proceed to the next step.

Step 4: Add Placeholder Item and Link CTAs to Stream

The last step is to add the placeholder Item and the section heading Link CTAs to the Marketing Stream that you want to divide into sections.

Open the Marketing Stream that you want to divide into sections.

First, add the placeholder Item to the Stream and drag-and-drop it into first position in the Stream:

Now, click on the CTA button in the menu bar to add the first section heading CTA to the Stream:

In the menu that appears, find the Link CTA that represents the first section heading the topmost section heading that should appear on the page.

In the lower half of the menu, check the box next to Appears After Item, and make sure the number in the field is set to 1. Also, make sure the box next to Repeat After Everyisnotchecked.

Close this menu and refresh the page (using your browser's Refresh button). The Link CTA should now appear in the Stream view in the second position (after the placeholder Item):

Click on the Openbuttonin the menu bar to preview the Stream. If everything is working correctly, you should see the section heading appear above all content Items in the Stream:

Not working? See the Troubleshooting section below.

Now, return to the Stream Editor, and repeat steps 3-5 above to add the remaining section heading Link CTAs. Make sure to adjust the number beside Appears After Item to place the section heading in the right place in the Stream.

Once you've added all section headings in the right places, you're done!

Tip

Before placing the additional section heading Link CTAs (after the first one), count the number of Items that should appear before each section heading, so that you know what to enter into the Appears After Item fields. When counting, remember to count the placeholder Item, but not the first section heading Link CTA.

Troubleshooting

In case it's not working as expected, here are a few things to check:

Is the placeholder Item published? It must not be in draft status.

Is the placeholder Item set to "Show"? It must not be set to "Hide" under Metadata tab > Status.

Is the placeholder Item in first position in the Stream? It must be in first position to ensure everything is placed correctly, and the first section heading appears at the top of the page.

Are both custom code blocks enabled? Both blocks must be enabled for the code within to be active.

Have you chosen the correct placements for the custom code blocks? The CSS block must be set to Head and the JS block must be set to Body Bottom.

Did you specify the correct Item ID and Stream ID in the CSS custom code block, and the Item ID in the JS custom code block? The Item ID and Stream ID specified must be the correct ones for the placeholder Item in the dedicated Stream.

Are the Item ID and Stream ID in the right places? Make sure they aren't switched the Item ID is a longer string of digits.

Do all the section heading Link CTAs have only section set as the Button label? The text you type in here must only be section, lowercase, and nothing else.

What's Next

Now that you've done all the setup work and created your first sectioned Stream, it's easy to create additional sectioned Streams at any time. All you need to do is:

Add the placeholder Item to any Marketing Stream to enable sections

Create Link CTAs for each section heading you need

Add the Link CTAs to the Stream to place the section headings

In other words, from now on, you only need to complete Step 3 and in this guide anytime you want to create sections in any new or existing Marketing Stream.

Question

When I look at the same (or similar) metrics in Uberflip Analytics and legacy Metrics or the Hub dashboards, the numbers are different. Why?

Answer

The short answer is that these metrics are being collected not just differently, but in a way that is a lot more accurate.

Metrics are based on recording when and how events happen, for example page views. This done by an event collection system, which is responsible for recording and measuring these events, and generating data from them, i.e. metrics.

For Uberflip Analytics, we completely rebuilt our event collection system from the ground up. As a result, we're now able to test and audit all metrics, which means we can be confident that the numbers shown in Uberflip Analytics are accurate to a much greater degree than what was presented in legacy Metrics.

On top of this, there are also specific cases where the numbers are different by design. These include:

Changes to how certain metrics are calculated: For example, legacy Metrics counted Embedded CTAs, while Uberflip Analytics does not.

Changes to how date ranges work: When you select a date range in legacy Metrics, the period includes the end date, but in Uberflip Analytics it does not. For example, a date range of January 15 to February 15 would not include February 15 itself in Uberflip Analytics, but this date would be included in legacy Metrics.

Availability of data: Some metrics in Uberflip Analytics only started to be collected after a certain date, so data from earlier than that date is not available. See this article for information about when data collection started for different metrics.

A reference guide to the dates on which data collection began for various data points in Uberflip Analytics.

Before You Begin

This article outlines the dates when we started collecting data for major metrics in Uberflip Analytics. To learn more about Uberflip Analytics and how to use it, see this article.

About Data Collection Start Dates

Uberflip Analytics is powered by a proprietary event collection system. As visitors browse Uberflip Hubs, this system records a variety of events related to their behavior. The collected data is then fed into Uberflip Analytics, where it is used to calculate the metrics that are displayed.

When it was originally launched, the event collection system was able to collect a limitednumber of data points, and we have since implemented the collection of additional data points on an ongoing basis. As a result, the various data points collected by the system have distinct start dates on which Uberflip Analytics began to collect the relevant data. In practice, this means that different metrics in Uberflip Analytics have varying amounts of historical data available, so you can view data further back in time on some metrics than on others.

Uberflip Analytics Data Collection Start Dates

The table below displays the start dates on which Uberflip Analytics first began to collect data for each category of metrics that it records:

TheStart Date column indicates thefirst full month in which data was collected. In some cases, data for part of the previous month may also be available, but would represent an incomplete view of that month.

Where applicable, the Notes column lists any exceptions to the start date indicated, or any other related issues.

Category

Start Date

Notes

Core Data

July 2019

Includes: Visitors, Page Views, Item Views, Stream Views, Bounce Rate, Sessions, UTM Parameters, Geography

Link CTA Impressions

October 2019

Not collected for embedded CTAs

Link CTA Clicks

October 2019

Not collected for repeated Link CTAs until Dec. 4 2019

Not collected for embedded CTAs

Form CTA Impressions

October 2019

Not collected for gated Form CTAs with an initial delay until Dec. 18 2019

Not collected for embedded CTAs

Form CTA Activations

October 2019

Not collected for Custom Form CTAs until Dec. 9 2019

Not collected for gated Form CTAs with an initial delay until Dec. 18 2019

Not collected for Form CTAs connected to Mailchimp

Not collected for embedded CTAs

Form CTA Submissions

October 2019

Not collected for mobile devices until Nov. 29 2019

Not collected for gated Form CTAs with an initial delay until Dec. 18 2019

Not collected for embedded CTAs

Time on Page

December 2019

Learn how to get the most out of Uberflip Analytics, including how to filter dashboards, view reports, and download and schedule data exports.

Beta Feature Advisory

This article describes a feature which is currently in closed beta, and isnot yet widely available. If you are interested in participating in this beta program, please contact your Customer Success Manager or Uberflip Support.

Before You Begin

To work with Uberflip Analytics, you need to be an Account Administrator, or have the Uberflip Analytics > View permission.

Uberflip Analytics Overview

To enter Uberflip Analytics, simply log in to your account and click on the Analytics button in the top menu bar:

Looker: Scheduling Data Deliveries

From here, you'll be able to navigate the Uberflip Analytics interface, including:

Dashboards

Reports

Filters

Widget & Stream/Item Drill-In

Data Exports

Dashboards

Dashboards are the focal point of the Uberflip Analytics interface. These are collections of data visualizations ("widgets") that focus on particular areas of interest, such as how visitors are reaching your Hubs, or how your Form CTAs are performing.

The default dashboard is the Home dashboard. It acts as the entry point for Uberflip Analytics, and displays a high-level overview of data from all the areas of your Uberflip account.

Use the the sidebar menu on the left navigate to more granular and specialized dashboards. A variety of dashboards are available, grouped into categories that represent major themes like Traffic and Content. In the sidebar menu, click on any category to expand it and view the dashboards inside:

Within each dashboard you can customize the data displayed using Filters, or export the data in various ways. We'll look at the various options available in more detail below.

Reports

Below the dashboard categories in the sidebar menu is the Reports category. Expand this category to see a list of available reports:

Where dashboards visualize data to make it more easily digestible, reports allow you to view raw data in table form. Reports are more comprehensive than dashboards, allowing you to dive into the data in much greater detail. Note that, unlike dashboards, reports do not have filters. As a result, reports are intended primarily to provide data for consumption in tools outside of Uberflip Analytics.

Note

Because they can contain a large amount of data, it's normal for reports to take a little longer to load than dashboards.

Data Refresh

Uberflip Analytics automatically requests and displays the most up-to-date data available. Here's how it works:

When you open a dashboard, the most recent available data will be displayed. In most cases this will initially be cached data from the last time a refresh occurred. You can see how recent the cached data is in the top right corner:

As part of loading a dashboard, Uberflip Analytics also checks if more recent data is available. If there is more recent data, this is compared to the cached data. If this comparison finds a difference, Uberflip Analytics will automatically start loading the latest data into the dashboard widget. This is indicated by a loading spinnerthat appears in the top right corner of each widget:

Once the latest data is being displayed across all widgets, the timestamp in the top right corner of the page will display "just now" to reflect this:

In addition to the automatic check that happens when loading a dashboard, you can also force a check for more recent data at any time. To do so, simply apply a filter (this includes pressing the Run button without changing the filter settings).

Note that if there is no difference between the cached data and the more recently collected data, the dashboard will not update (even after applying a filter/clicking the Run button), and the timestamp in the top right corner will continue to reflect the last time the data was updated (i.e. the last time there was a change).

Unlike dashboards, reports will always pull in the latest data when they are loaded, and never display cached data.

Note

Currently, Uberflip Analytics takes approx. 1 hour to process and make collected data available, so the latest data is always a minimum of 1 hour old.

Metrics Definitions & Widget Tooltips

To learn more about how a data point is defined, or how a widget metric is calculated, use the built-in tooltip functionality. Throughout Uberflip Analytics, you can find tooltips in two places:

Widgets: Dashboard widgets where a tooltip is available have a small icon beside their title. Hover your mouse over this icon to view a tooltip that explains what the widget shows:

Tables: Anywhere you see a table (such as in some dashboard widgets and all reports), hover your mouse over a table header to see a definition of that data point:

Filter Data

Every dashboard in Uberflip Analytics has a set of built-in filters. Use these filters to narrow down the data displayed in the visualizations in various ways, for example by timeframe, Hub, tags, etc.

Filters are available on all dashboards, and are shown in a panel at the top of the dashboard:

Most filters are universal and appear on all dashboards (such as View Date). Some of the filters are contextual, and are determined by the data that the dashboard displays.

Set a Filter

When you open a dashboard, all available filters will initially be set to default values. To change these values and specify your own filters:

First, click anywhere in the filters panelto expand it:

Each line represents a different data type that you can filter by, and consists of the filter name, the condition dropdown, and the value field(s) (from left to right).

To begin, choose the line that represents the data type you want to filter by, then click on the condition dropdownto select a condition:

Note: When you select certain conditions for some filter types, additional condition dropdowns or value fields may appear e.g.:

Now, click on the value field to set a value that defines the filter. When you click on the value field, an autosuggest menu containing available values will appear:

You can also begin typing in the field to filter autosuggested values based on your input:

Click on any value you want to use to add it to the field:

Configure any other filters as needed. When you're ready, click on the Run button to apply your filters:

The dashboard widgets will refresh to display data with your filters applied.

Important

Filters are not persistent: when you navigate away from a dashboard, your filter settings will be lost.

Tip

Because filters are not persistent, you can easily reset all filters on a dashboardto their default values by simply navigating to a different dashboard, then coming back again.

Filters With Multiple Values

When you click on an autosuggested value to add it to the value field, the autosuggest menu will remain open. If needed, you can continue adding values to a field to set multiple values:

When you do this, the multiple values are treated as separate conditions with an OR operator, i.e. the filter will match on any of the specified values, not all.

To remove any value from the value field, simply click on the x button next to its entry.

Filters With Multiple Conditions

Click on the + button at the right of a filter line to add further conditions to that filter type:

This creates an additional filter line on which you can set a separate condition and value(s):

Note that all additional filter lines use OR operators (AND operators are not supported at this time).

You can add any number of filter lines by continuing to click the + button. To remove any added filter line, click on the x button to its right.

Drill-In

Drill Into Widgets

You van view the underlying data for any visualization-type dashboard widget, such as large number or chart widgets. To do so, hover your mouse over the widget and look for clickable areas, indicated by the hand cursor. For example:

Some widgets may also have multiple clickable areas, as in this case:

To drill into the data, simply click on the clickable area that represents the data you want to drill into. ADetails window will open where you can view a preview of the underlying data used to build the visualization:

Download Widget Data

In many cases, there will be more data available than can be shown in the drill-in preview. In these cases, you can view all available data by downloading it. You can download the data in a number of different formats, such as CSV, HTML, TXT, etc.

Info

Below you will find basic instructions on how to configure a data download. The download interface, including the various options availble, is described in more detail in this article from Looker (the BI software platform that powers Uberflip Analytics):

Looker: Downloading Data

To download data from a widget:

Drill into the widget you want to download to open the Details preview window.

In the top right corner, click on the Download Results button:

The Download menu will appear, where you can choose options for your download:

For help configuring these download options, see this article from Looker.

Under the section Limit, make sure to select the Custom... option and specify the number of rows you want (e.g. 99999 to get as many rows as possible):

To begin the download, click on either the Download or Open in Browser buttons, depending on your preference.

Drill Into Streams and Items

Some dashboards feature table-type widgets that list individual Streams or Items. In these cases, a small button with three dots inside a grey oval will appear beside the name of each Stream or Item, like this:

You can click on this button to view drill-in options for the Stream or Item:

There are two options:

Single Stream/Item Performance Dashboard: Opens a dashboard that displays in-depth performance metrics focused on the selected Stream/Item. Both the Stream and Item drill-in dashboards work the same way as the regular high-level dashboards, including filter functionality.

View/Edit Stream/Item in Uberflip: Directly opens the Stream or Item page in the Uberflip application backend for viewing or editing.

Tip

In widgets where the drill-in button appears, you can also just click directly on the name of the Stream or Item to go directly to its Single Stream/Item Performance dashboard.

Download, Send & Schedule Dashboards

Uberflip Analytics is powered by the Looker BI platform, which has a number of powerful features for packaging and sending dashboards so that you and others can view or use the dashboard data outside of the Uberflip Analytics interface. You can:

Download full dashboards in PDF or CSV format

Send dashboard data to various destinations on demand or on a schedule

To access the download options for any dashboard, click on the gear button in the top right corner:

This will open the download options menu, from which you can choose what kind of download you want.

Download Full Dashboard as PDF

You can download snapshots of full dashboards in PDF format. To do so:

Click on Download as PDF... in the download options menu:

The Download menu will appear, where you can choose options for your PDF download:

The options are:

Filename: Enter the filename you want to save the PDF file as.

Advanced options: Click to expand and see further options:

Single column format: Arranges dashboard widgets in a stacked column in the PDF, rather than as they are arranged in Uberflip Analytics.

Expand tables: Ensures all rows in any table widgets are visible in the PDF.

Paper size: Choose a paper format size that the PDF file will be sized to.

When you have configured the download, click on either Open in Browser or Download to start your download.

Download Full Dashboard as CSVs

You can download the data shown in each widget on a dashboard as separate CSV files (one per widget). The download is delivered as a compressed (ZIP) file containing all of the individual CSV files.

To do this, click on Download as CSVs in the download options menu:

The download will begin immediately.

Send Dashboard Data Immediately or on a Schedule

Looker can send a dashboard's data to a variety of destinations (including email, Amazon S3, SFTP servers, etc.) either on demand, or automatically on a predefined schedule.

To access these options, click on Send or Schedule in the download options menu:

Send will set up a one-time data delivery, while Schedule will allow you to configure an automated data delivery that repeats at intervals of your choice.

Both of these options have numerous available options, and Looker provides comprehensive documentation on how to configure them:

To learn how to configure a one-time (on demand) data delivery, see this article from Looker:

Looker: Sending a Look or Dashboard

To learn how to configure a scheduled (automated) data delivery, see this article from Looker:

Question

How is Uberflip Analytics different from Google Analytics?

Answer

Uberflip Analytics and Google Analytics seem like similar tools, but they differ fundamentally in terms of focus and purpose:

Google Analytics is rooted in web page engagement, and is built for the broadest possible audience. It views websites in terms of web pages, not the content they contain, so it can't draw links between pages that contain the same content. For example, if you have a blog post that appears in three different places, Google Analytics simply sees this as three separate pages.

By contrast, Uberflip Analytics was built with a content-first approach, so it knows that the blog post is the same piece of content in three different places. This helps you to understand how a piece of content is performing across all your web experiences, and ultimately to prove the value of content. Google Analytics could do this with custom filters and events, but that requires development work. With Uberflip Analytics, this capability is available out-of-the-box.

They two systems are also different in terms of the numbers they display. Although both share certain metrics, you can expect the numbers to be different, because the way each system measures is not the same.

For some concrete examples of how Uberflip Analytics and Google Analytics compare, see the tables below. These focus on two metrics areas that both systems have in common (Tags and Time on Page) and show how they are different:

Tags

Tag Collection

Add tags at any time

Tags must be on-page at time of pageview for data to be collected

Tag Filtering

Built-in filters with advanced logic

Creating and applying filters is complex

Tag Reporting

Built-in reports and flexibility to easily author your own

Difficult to create roll-up tag reports and get tags in data exports

Time on Page

Time on Page Collection

Can track tab in focus, resumed viewing, and single page

Time on Page requires a page transition, so can't track single page or last page

Time on Page Reporting

Aggregates across Items, Streams and Tags, and can drill to a single visitor/page view

Only shows Time on Page for a single URL

Question

To be able to track ROI, I'd like to be able break down data by account or visitor. Can I do this in Uberflip Analytics?

Answer

This capability is not currently available in Uberflip Analytics. In the next phase of product development, our focus will be on answering the "who" behind the data, to allow you to directly tie the impact of content experience to opportunities and revenue. We'll share details about a beta program for this functionality later in 2020 for more details, please contact your Customer Success Manager.

Question

The reports in Uberflip Analytics all contain large amounts of data. Can I filter this data so it's easier to work with?

Answer

It is not possible to filter reports in Uberflip Analytics. This is by design, because reports aren't intended for manipulating data directly. Instead, they represent comprehensive "data dumps" which are meant to be sent to external BI tools for further analysis.

If you none of the prebuilt reports meet your needs, you also have the option of building a custom report that includes only the data that is relevant to you. For more details, please speak with your Customer Success Manager.

Question

If I have a suggestion, comment, or request concerning Uberflip Analytics, or if I've discovered a problem, who do I contact?

Answer

Your feedback is extremely important to the continuous development of Uberflip Analytics. Working closely with our customers helps us to make Uberflip Analytics better, and much of what you see in the product today has been directly shaped by user feedback.

If you have any feedback to share with us about Uberflip Analytics, please let your Customer Success Manager know.

Question

The default Content Types shown in some dashboard widgets (e.g. Blogpost, Flipbook, YouTube, etc.) don't work for the way content is structured in my Hub. Can I create my own Content Types?

Answer

It's not possible to change the default Content Types that are used in the dashboard widgets. However, there is another method you can use to achieve the same result.

In the Uberflip platform, tags are a powerful tool for effectively organizing your content for both buyers and internal needs. You can apply tags to Items in your Hub to define custom content types that are most relevant to your business. Uberflip Analytics can report on tags, so once you have implemented a tagging strategy, you can filter, aggregate and visualize data based on your tags. For information about creating custom reports, please speak with your Customer Success Manager.

Question

I'd like to do long-term comparisons of my data, but Uberflip Analytics only goes back as far as July 2019. Can I compare the data shown in Uberflip Analytics with the data from prior years that's available in legacy Metrics?

Answer

We don't recommend comparing data between Uberflip Analytics and legacy Metrics. To ensure the highest possible data quality and integrity, we built a brand-new data collection system for Uberflip Analytics. This system started to collect data in July 2019, so data in Uberflip Analytics is not available for dates earlier than this. While longer-term data is available in legacy Metrics, the way that this data was collected is very different from Uberflip Analytics, and this unfortunately means that the two are not generally comparable.

Although comparing data between these two systems is not recommended, it's still possible to compare data internally within each system. As a result, you can use legacy Metrics to make longer-term comparisons, and legacy Metrics will continue to remain available for this purpose for the foreseeable future.

Question

What will happen to legacy Metrics now that Uberflip Analytics is available?

Answer

Over time, all the functionality available in legacy Metrics will be recreated in Uberflip Analytics (the only exception to this is Flipbook Metrics, which will not be transitioned over). Keep in mind that Uberflip Analytics uses a brand-new data collection system, so while the functionality of legacy Metrics will be transitioned to Uberflip Analytics, the data itself will not be migrated. However, if you need to view metrics data from before the launch of Uberflip Analytics, legacy Metrics will continue to be available for the foreseeable future.

Question

I want to compare data in Uberflip Analytics year-over-year or quarter-over-quarter. Is this possible?

Answer

It's not possible to do this yet. There are two reason for this:

The data collection system for Uberflip Analytics was activated in July 2019, so it has only been able to collect data since this date. Because our old system for gathering data works very differently, the data collected for legacy Metrics isn't compatible with Uberflip Analytics, and can't be used to backfill data for dates earlier than July 2019. As a result, Uberflip Analytics will never contain metrics data for dates prior to July 2019. Yearly comparisons of data will therefore be possible once at least one year has passed, i.e. from July 2020 onward.

The functionality for quarterly comparisons has not yet been implemented. We expect basic quarter-over-quarter comparisons (using date ranges to select individual quarters for export) to be available by Spring 2020. Our Product team is investigating how we can improve this going forward, and eventually we plan to support built-in quarter-over-quarter functionality.

Question

I want to filter a dashboard in Uberflip Analytics by a certain parameter, but I can't find a suitable built-in filter. How can I request a new filter be added?

Answer

We're always looking to make improvements to Uberflip Analytics, and will be rolling out more filters in upcoming releases based on customer feedback. If you would like to request a particular filter, we'd love to hear from you please contact your Customer Success Manager to share any feedback, suggestions or request you have.

A reference guide to the various Uberflip-specific HTML events that you can use with Custom Code.

Before You Begin

This article describes Uberflip Hub events that you can hook into when writing JavaScript Custom Code, along with the correct method to use them. To learn more about Custom Code and how to use it on your Hub, see this article.

Hub Events Method and Usage

You can use Uberflip-specific HTML events, called Hub Events, as triggers for your JavaScript Custom Code. To create event handlers for Hub Events, use the following method:

Hubs.Events.on('eventName', myFunction)

For eventName, substitute the Hub Event to be used ( see table below ).

For myFunction, substitute your JS function. This must be a function declaration, not a function call. For example:

Acceptable (declaration):

function myFunction() {/*Do action*/}

Not acceptable (call):

myFunction()

Available Hub Events

This table lists the Hub Events that you can use:

eventName lists the eventName to be used in the event handler

Parameters lists any parameters for which arguments will be passed to the handler function

eventName

Description

Parameters

Notes

load

When major Hub elements are loaded

None

resize

When browser window finishes changing size

None

Debounced version of native browser event, i.e. won't fire as soon as or during a size change, only after

scroll

When a user finishes a scroll movement

None

Debounced version of native browser event, i.e. won't fire as soon as or while a user scrolls, only after

ctaActivate

When a user clicks on a Form CTA, and the CTA enters the "Focus" state

ctaId

Any changes aimed at Form CTAs must be on this event

ctaFormSubmitSuccess

When a user submits a Form CTA, and the CTA enters the "Success" state

ctaId

ctaData

ctaName

itemsLoaded

When more Items in a Stream load, either when a user reaches the bottom of the page and more Items load automatically, or when the user clicks the "Load More" button

itemIds

selector

Fires when the additional Items have finished loading, not as soon as they begin to load

itemIds provides an array of the Items that were loaded

selector can be used to get all the elements, e.g with jQuery:

"$("+selector+")"

recoItemsLoaded

When Items served by the Content Recommendations feature finish loading

None

Depending on setup and user screen size, target Items may load in any of the recommendation panel, More Content carousel, or Next Item flyout

Notes

Hub Events can be chained like other jQuery functions, e.g.

Hubs.Events

.on('eventName', myFunction)

.on('eventName', myFunction)

...

Event listeners can be turned off, e.g.

Hubs.Events.off('scroll')

Question

I imported posts from a blog into a Blog Stream using RSS. If I make a change to a post in the original blog, will the corresponding Item in Uberflip be updated as well?

Answer

In general, yes: if you import a blog post into Uberflip and then subsequently edit that post in the source blog, the post in Uberflip will also be updated automatically. For this to happen, the following conditions must be met:

The blog Item must not be edited in Uberflip: as soon as any changes are made to an imported blog Item in Uberflip, it is considered distinct from the original blog post, and the link between them is severed permanently

The original blog post must still be available in the RSS feed: once the original blog post drops off the RSS feed, we are no longer able to query it for updates

The original blog post must be within the most recent 200 items in the RSS feed: Even if the original blog post is still in the RSS feed, Uberflip will only check the most recent 200 items for updates

Note also that this applies only to modifying the original post. If you delete (rather than change) the original blog post, the imported Item will not be deleted, and will remain in Uberflip.

What about other types of Items?

The same principle applies to Items in all other types of Source Streams as well, e.g. Video, Social, and Docs (except Flipbooks): in general, modifying the source content will modify the imported Item in Uberflip, unless it has been modified in Uberflip first.

Additional

If you're interested in the technical details, here's how it works:

When you import a blog post via RSS, Uberflip takes the unique identifier of the post (the GUID) and saves it to the External ID field of the corresponding Blog Item. This shared identifier is what links the original post with the Uberflip Blog Item.

In ca. 20-minute intervals,Uberflip runs an automatic job that inspects the RSS feed and compares the original posts with the Blog Items. If the Date Modified value on an original blog post is more recent than on the Blog Item with the same identifier, we assume that the original post has been modified. In such cases, Uberflip will update the Item's content, Tile thumbnail and Date Modified value by re-importing from the RSS feed.

Issue

A "Form ID Not Found" error is displayed when choosing some Eloqua Forms while setting up a Form CTA.

Eloqua Form can't be found

Can't select Eloqua Form

Unable to choose Eloqua Form

Conditions

Where: Form CTA Editor (first page)

Who: Users setting up a Form CTA connected to Eloqua

When: While trying to select an Eloqua Form to connect to a Form CTA

Selected Eloqua Form does not use the standard Contact Fields > Email Address form field to collect email addresses

Any browser

Any operating system

Cause

This issue occurs when the selected Eloqua Form uses a field created under the Custom Fieldssection to collect email addresses, rather than the default "Email Address" field (in the Contact Fields section). Eloqua Forms can only be connected to Form CTAs when the default "Email Address" field is used.

Steps to Fix

Edit the desired Eloqua Form to use the "Email Address" field in the Contact Fields section.

Do not change the name/label of this field from the default "Email Address" in Eloqua

Delete the previous email address field from the Custom Fields section.

Return to the Form CTA Editor and try to select the Eloqua Form again: you should now be able to select it without the error appearing.

Use this Custom Code snippet to remove the logo (or company name) from the navigation bar at the top of the Hub.

Warning

Hub Hacks are NOT official Uberflip features. They may not work on all Hubs, or may cause unexpected behavior. Before implementing a Hub Hack on a production Hub, we strongly recommending testing it in a safe environment (such as a staging Hub) if possible.

Uberflip Support is not able to help troubleshoot issues with Hub Hacks: if a Hub Hack is not working correctly in your Hub, Uberflip Support can only help you to disable it.

Details

Type: CSS

Placement: Head

Code

<style>

/*-- De-branded Top Nav --*/

.top-nav .secondary-logo {

display: none;

}

.top-nav .left-nav {

margin: 0!important;

left: 0!important

}

</style>

Use this Custom Code snippet to create an effect when a user hovers their mouse over an image in an Item.

Warning

Hub Hacks are NOT official Uberflip features. They may not work on all Hubs, or may cause unexpected behavior. Before implementing a Hub Hack on a production Hub, we strongly recommending testing it in a safe environment (such as a staging Hub) if possible.

Uberflip Support is not able to help troubleshoot issues with Hub Hacks: if a Hub Hack is not working correctly in your Hub, Uberflip Support can only help you to disable it.

Details

Type: CSS

Placement: Head

Notes: The hover effect is often used as a subtle way of indicating to users that clicking on an image does something, like linking to another article or site. You'll need at least a basic understanding of CSS to do this.

Setup

In addition to adding some Custom Code to your Hub, you'll also have to do the following for each Item on which you want the hover effect to work:

Log in to Uberflip and navigate to an Item on your Hub on which you want to enable the hover effect. This should be an item that contains an image with a link, or to which you want to add an image with a link.

Click on Edit Item.

In the Edit Article view, go to theEditor tab and click on the <>Source button in the menu bar.

This will open the HTML view of the post. Locate the image, and wrap it within <a> tags to link it (e.g. <a href=[link url] >[image]</a>).

Then, wrap the linked image in a <div> or <figure> element.

Lastly, put a class on that <div> or <figure> element and name it "rollover" (e.g. <figure class="rollover">[linked image]</figure>)

Here's an example of what this might look like:

Repeat the above steps for each linked image/Item on which you want to enable the hover effect.

Add the code snippet below to your Hub's Custom Code.

Code

<style>

.rollover {

-webkit-transition: all .25s ease-out;

transition: all .25s ease-out;

}

.rollover:hover {

background: #343434;

}

.rollover:hover img {

opacity: 0.7;

}

a:hover {

color: #313131;

text-decoration: none;

}

.rollover img {

-webkit-transition: all .25s linear;

transition: all .25s linear;

-webkit-transform: translateZ(0);

transform: translateZ(0);

}

</style>

Use this Custom Code snippet to remove the star badge from Featured Items.

Warning

Hub Hacks are NOT official Uberflip features. They may not work on all Hubs, or may cause unexpected behavior. Before implementing a Hub Hack on a production Hub, we strongly recommending testing it in a safe environment (such as a staging Hub) if possible.

Uberflip Support is not able to help troubleshoot issues with Hub Hacks: if a Hub Hack is not working correctly in your Hub, Uberflip Support can only help you to disable it.

Details

Type: CSS

Placement: Head

Code

<style>

.tile.single .icon{

display:none;

}

</style>

Use this Custom Code snippet to remove the logo from the top of a Hub (when the Hub is embedded in your website).

Warning

Hub Hacks are NOT official Uberflip features. They may not work on all Hubs, or may cause unexpected behavior. Before implementing a Hub Hack on a production Hub, we strongly recommending testing it in a safe environment (such as a staging Hub) if possible.

Uberflip Support is not able to help troubleshoot issues with Hub Hacks: if a Hub Hack is not working correctly in your Hub, Uberflip Support can only help you to disable it.

Details

Type: CSS

Placement: Head

Code

<style>

.top-nav h1 a {display: none}

.top-nav .left-nav.desktop {left: inherit}

.left-nav {margin-left: 0}

</style>

Use this Custom Code snippet as a fix if your Hub's images are getting stretched when viewed on mobile devices.

Warning

Hub Hacks are NOT official Uberflip features. They may not work on all Hubs, or may cause unexpected behavior. Before implementing a Hub Hack on a production Hub, we strongly recommending testing it in a safe environment (such as a staging Hub) if possible.

Uberflip Support is not able to help troubleshoot issues with Hub Hacks: if a Hub Hack is not working correctly in your Hub, Uberflip Support can only help you to disable it.

Details

Type: CSS

Placement: Head

Notes: Can be placed in the Custom Code on individual Items if needed.

Code

<style>

.img {height: auto}

</style>

Use this Custom Code snippet to change how transparent the background of the search results screen appears.

Warning

Hub Hacks are NOT official Uberflip features. They may not work on all Hubs, or may cause unexpected behavior. Before implementing a Hub Hack on a production Hub, we strongly recommending testing it in a safe environment (such as a staging Hub) if possible.

Uberflip Support is not able to help troubleshoot issues with Hub Hacks: if a Hub Hack is not working correctly in your Hub, Uberflip Support can only help you to disable it.

Details

Type: CSS

Placement: Head

Notes: By default, the background color on the search results screen is grey, with an opacity of 0.9 (slightly transparent). If you prefer no transparency, set the value to 1 (as in the snippet below). For more transparency, reduce the value towards 0 (the lower the value, the more transparent).

Code

<style>

.search-results-backdrop {

opacity: 1 !important;

}

</style>

Use this Custom Code snippet to take a row of Item Tiles from a Featured Stream and place it on the Latest Content Stream.

Warning

Hub Hacks are NOT official Uberflip features. They may not work on all Hubs, or may cause unexpected behavior. Before implementing a Hub Hack on a production Hub, we strongly recommending testing it in a safe environment (such as a staging Hub) if possible.

Uberflip Support is not able to help troubleshoot issues with Hub Hacks: if a Hub Hack is not working correctly in your Hub, Uberflip Support can only help you to disable it.

Details

Type: JavaScript & CSS

Placement: Body Bottom (JavaScript) / Head (CSS)

Notes: Will not pull over CTAs, only Item Tiles.

Code

JavaScript

<script>

/*-- Featured Stream --*/

/*-- Replace collectionID with stream ID! --*/

if (!$('#featured-stream').length){

$.get('/hubsFront/ajax_loadAdditionalItems/?collectionId=XXXXXtPage=-1&limit=6&featuredItemCount=10&embedded=0').success(function (data) {

$('body').prepend(' Featured Content ' + data + '').append(function () {

$('#featured-stream .tile .img').css('opacity', 1);

});

});

}

</script>

CSS

<style>

/*-- Featured Stream --*/#featured-stream .tile {

display: none;

}

#featured-stream .tile:hover .share-single {

opacity: 1;

}

@media only screen and (min-width:0) and (max-width: 560px) {

#featured-stream .tile:nth-child(-n+1) {

display: block;

}

}

@media only screen and (min-width:561px) and (max-width: 860px) {

#featured-stream .tile:nth-child(-n+2) {

display: block;

}

}

@media only screen and (min-width:861px) and (max-width: 1336px) {

#featured-stream .tile:nth-child(-n+3) {

display: block;

}

}

@media only screen and (min-width:1337px) and (max-width: 1606px) {

#featured-stream .tile:nth-child(-n+4) {

display: block;

}

}

@media only screen and (min-width:1607px) and (max-width: 1876px) {

#featured-stream .tile:nth-child(-n+5) {

display: block;

}

}

@media only screen and (min-width:1876px) {

#featured-stream .tile:nth-child(-n+6) {

display: block;

}

}

</style>

Use this Custom Code snippet to add a different style of "Back to Top" button to your Hub.

Warning

Hub Hacks are NOT official Uberflip features. They may not work on all Hubs, or may cause unexpected behavior. Before implementing a Hub Hack on a production Hub, we strongly recommending testing it in a safe environment (such as a staging Hub) if possible.

Uberflip Support is not able to help troubleshoot issues with Hub Hacks: if a Hub Hack is not working correctly in your Hub, Uberflip Support can only help you to disable it.

Details

Type: CSS

Placement: Head

Code

<style>

#moveToTop {

right: auto;

bottom: 2rem;

left: 1rem!important;

top: auto;

margin: 0!Important;

z-index: 2000;

}

#moveToTop:after {

content: 'top';

display: block;

font-size: 11px;

white-space: nowrap;

color: #f47920;

text-transform: uppercase;

letter-spacing: 1px;

text-align: center;

}

#moveToTop a {

background: #f47920!important;

opacity: 1;

}

#moveToTop a:after {

content: '';

width: 0;

height: 0;

border-left: 5px solid transparent;

border-right: 5px solid transparent;

border-bottom: 10px solid white;

top: -17px;

right: -6px;

position: relative;

}

</style>

Use this Custom Code snippet to center-align images within blog Items.

Warning

Hub Hacks are NOT official Uberflip features. They may not work on all Hubs, or may cause unexpected behavior. Before implementing a Hub Hack on a production Hub, we strongly recommending testing it in a safe environment (such as a staging Hub) if possible.

Uberflip Support is not able to help troubleshoot issues with Hub Hacks: if a Hub Hack is not working correctly in your Hub, Uberflip Support can only help you to disable it.

Details

Type: CSS

Placement: Head

Code

<style>

.entry img {

margin: 0 auto;

}

</style>

Use this Custom Code snippet to make the descriptions on Item Tiles expand (slide up) when the mouse is hovered over them.

Warning

Hub Hacks are NOT official Uberflip features. They may not work on all Hubs, or may cause unexpected behavior. Before implementing a Hub Hack on a production Hub, we strongly recommending testing it in a safe environment (such as a staging Hub) if possible.

Uberflip Support is not able to help troubleshoot issues with Hub Hacks: if a Hub Hack is not working correctly in your Hub, Uberflip Support can only help you to disable it.

Details

Type: CSS

Placement: Head

Screenshot

Code

<style>

/*-- Tile Description Pop-up Hover --*/

#collection-items .tile .description {

-webkit-transition: all 0.4s ease-out;

transition: all 0.4s ease-out;

}

#collection-items .tile:hover .description {

height: 100\%;

-webkit-transition: all 0.3s ease-out;

transition: all 0.3s ease-out;

}

#collection-items .tile .share-single {

display: none;

}

</style>

Use this Custom Code snippet to force the descriptions on Flipbook Items to be a uniform height, regardless of the Flipbook's layout.

Warning

Hub Hacks are NOT official Uberflip features. They may not work on all Hubs, or may cause unexpected behavior. Before implementing a Hub Hack on a production Hub, we strongly recommending testing it in a safe environment (such as a staging Hub) if possible.

Uberflip Support is not able to help troubleshoot issues with Hub Hacks: if a Hub Hack is not working correctly in your Hub, Uberflip Support can only help you to disable it.

Details

Type: CSS

Placement: Head

Code

<style>

/*--Same Height Descriptions--*/

.tile.single.uberflip.portrait:not(.list) .description {

height: 58.90052356\%;

background-color: #fff;

}

.tile.single.uberflip.portrait:not(.list) .description h3 {

overflow: visible;

white-space: normal;

font-size: 19px;

}

</style>

Use this Custom Code snippet to force Link CTAs to open in the same window, rather than a new window.

Warning

Hub Hacks are NOT official Uberflip features. They may not work on all Hubs, or may cause unexpected behavior. Before implementing a Hub Hack on a production Hub, we strongly recommending testing it in a safe environment (such as a staging Hub) if possible.

Uberflip Support is not able to help troubleshoot issues with Hub Hacks: if a Hub Hack is not working correctly in your Hub, Uberflip Support can only help you to disable it.

Details

Type: JavaScript

Placement: Body Bottom

Code

<script>

Hubs.onLoad = Hubs.onPageChange = Hubs.onItemsLoaded = function removeOpenInNewWindow() {

$('.cta-button').each(function() {

$(this).attr('target', '_parent');

});

}

</script>

Use this Custom Code snippet to change the background color of links on Item Tiles.

Warning

Hub Hacks are NOT official Uberflip features. They may not work on all Hubs, or may cause unexpected behavior. Before implementing a Hub Hack on a production Hub, we strongly recommending testing it in a safe environment (such as a staging Hub) if possible.

Uberflip Support is not able to help troubleshoot issues with Hub Hacks: if a Hub Hack is not working correctly in your Hub, Uberflip Support can only help you to disable it.

Details

Type: CSS

Placement: Head

Code

<style>

.stream-173614 a.item-link.view.hooked {

background-color:blue !important;

}

.stream-YOUR STREAM ID HERE a.item-link.view.hooked {

background-color:green !important;

}

</style>

Use this Custom Code snippet to allow users to enlarge small images on blog posts with a lightbox effect.

Warning

Hub Hacks are NOT official Uberflip features. They may not work on all Hubs, or may cause unexpected behavior. Before implementing a Hub Hack on a production Hub, we strongly recommending testing it in a safe environment (such as a staging Hub) if possible.

Uberflip Support is not able to help troubleshoot issues with Hub Hacks: if a Hub Hack is not working correctly in your Hub, Uberflip Support can only help you to disable it.

Details

Type: CSS, JavaScript

Placement: Head (CSS), Body Bottom (JavaScript)

Notes: Must be placed at the Item level - not in the Hub's Custom Code section.

Setup

You'll also have to do the following for each Item on which you want the hover effect to work:

Log in to Uberflip and navigate to an Item on your Hub on which you want to enable the lightbox effect. This should be an item that contains an image.

First, open the Item and grab the URL for the image that you want to enable the effect on.

Now, return to the Stream view and click on Edit Item.

In the Edit Article view, go to theEditor tab and click on the <>Source button in the menu bar.

This will open the HTML view of the post. Locate the image, and wrap it within <a> tags.

Put a class of lightbox_trigger on the <a> tag.

Lastly, put the URL for your image on the href in your <a> tag.

Here's an example of what this might look like:

<a class="lightbox_trigger" href="YOUR IMAGE SRC GOES HERE">

<img alt="" class="image_edit" src="YOUR IMAGE SRC GOES HERE" />

</a>

Now, click on the Custom Code tab.

This has to be the Custom Code tab on the Item - not Custom Code for your Hub!

Add the code snippets below to your Item's Custom Code.

Code

CSS

<style>

#lightbox {

position:absolute;

top:0;

left:0;

width:100\%;

height:100\%;

background: rgba(0, 0, 0, 0.75);

text-align:center;

z-index: 70000;

padding: 8em 0;

}

.little_lightbox {

display:inline-block;

background: black;

color: white;

text-transform: uppercase;

padding: 1em;

position: absolute;

right: 0;

}

#lightbox img {

box-shadow:0 0 25px #111;

-webkit-box-shadow:0 0 25px #111;

-moz-box-shadow:0 0 25px #111;

max-width:940px;

}

</style>

JavaScript

<script>

jQuery(document).ready(function($) {

$('.lightbox_trigger').click(function(e) {

e.preventDefault();

var image_href = $(this).attr("href");

var lightbox =

'<div id="lightbox">' +

'<p class="little_lightbox">Click box to close</p>' +

'<div id="content">' +

'<img src="' + image_href +'" />' +

'</div>' +

'</div>';

//insert lightbox HTML into page

$('body').append(lightbox);

});

$('body').on('click', '#lightbox', function() {

$('#lightbox').detach();

});

$(document).on("click", ".dialog", function(e) {

e.stopPropagation();

return false;

});

});,

</script>

Use this Custom Code snippet to force the descriptions on Item Tiles to be displayed, even if they are longer than the normal truncation limit of 27 characters.

Warning

Hub Hacks are NOT official Uberflip features. They may not work on all Hubs, or may cause unexpected behavior. Before implementing a Hub Hack on a production Hub, we strongly recommending testing it in a safe environment (such as a staging Hub) if possible.

Uberflip Support is not able to help troubleshoot issues with Hub Hacks: if a Hub Hack is not working correctly in your Hub, Uberflip Support can only help you to disable it.

Details

Type: CSS

Placement: Head

Code

<style>

.tile.single.with-img .description h4.long-h3 {

display: block;

}

</style>

Use these Custom Code snippets to style the Stream Authentication login page however you want.

Warning

Hub Hacks are NOT official Uberflip features. They may not work on all Hubs, or may cause unexpected behavior. Before implementing a Hub Hack on a production Hub, we strongly recommending testing it in a safe environment (such as a staging Hub) if possible.

Uberflip Support is not able to help troubleshoot issues with Hub Hacks: if a Hub Hack is not working correctly in your Hub, Uberflip Support can only help you to disable it.

Details

Type: CSS

Placement: Body Top

Notes: These code snippets can be used to target the Stream Authentication login page, allowing you to change its appearance. Choose between two options: target the login pages for all Streams, or just the login page for a specific Stream. Both snippets are intended as a starting point for your own modifications if you do not change anything, these will simply turn the background color for the login page blue.

Code

Option 1: All Streams

This will modify the appearance of the login page for all Streams in the Hub.

<style>

body.stream-login {

background-color: blue;

}

</style>

Option 2: Specific Stream Only

This will allow you to modify the appearance of the login page for a specified Stream only. Replace XXXXX in the code with the Stream ID.

<style>

body.stream-login.stream-XXXXX {

background-color: blue;

}

</style>

Use this Custom Code snippet to force long Flipbook titles to be displayed in full on Item Tiles, rather than being truncated.

Warning

Hub Hacks are NOT official Uberflip features. They may not work on all Hubs, or may cause unexpected behavior. Before implementing a Hub Hack on a production Hub, we strongly recommending testing it in a safe environment (such as a staging Hub) if possible.

Uberflip Support is not able to help troubleshoot issues with Hub Hacks: if a Hub Hack is not working correctly in your Hub, Uberflip Support can only help you to disable it.

Details

Type: CSS

Placement: Head

Code

<style>

/* START Always Show Full Title on Flipbook Tiles */

.tile.single.uberflip.portrait:not(.list) .description h3.h3like {

text-overflow: initial;

white-space: normal;

}

/* END Always Show Full Title on Flipbook Tiles */

</style>

Use this Custom Code snippet to add a custom screen-width image (banner) to a stream. Can be useful for non-Marketing/Sales streams.

Warning

Hub Hacks are NOT official Uberflip features. They may not work on all Hubs, or may cause unexpected behavior. Before implementing a Hub Hack on a production Hub, we strongly recommending testing it in a safe environment (such as a staging Hub) if possible.

Uberflip Support is not able to help troubleshoot issues with Hub Hacks: if a Hub Hack is not working correctly in your Hub, Uberflip Support can only help you to disable it.

Details

Type: CSS

Placement: Head

Code

<style>

/*-- Custom Banner For Specific Streams Replace the XXXX with the stream number --*/

.stream-XXXXX > header:after{

content:'';

background-size:cover;

display:block;

width:100vw;

min-height:280px;

background-image:url('https://unsplash.it/1200/768/?random'); /*Change this to your image's URL*/

height:33vh; /*Set the height of your banner, you can use PX, VH, or \% */

}

</style>

Use this Custom Code snippet to replace the standard'Read Article', 'Read Flipbook' and 'View Presentation' links on each Item Tile in a Stream with a blue button.

Warning

Hub Hacks are NOT official Uberflip features. They may not work on all Hubs, or may cause unexpected behavior. Before implementing a Hub Hack on a production Hub, we strongly recommending testing it in a safe environment (such as a staging Hub) if possible.

Uberflip Support is not able to help troubleshoot issues with Hub Hacks: if a Hub Hack is not working correctly in your Hub, Uberflip Support can only help you to disable it.

Details

Type: CSS

Placement: Head

Note: Also includes a white gradient background behind the button. Both the button and the gradient can be changed to any color you prefer.

Screenshot

Code

<style>

/*-- Tile Buttons --*/

div.tile.single>a.view,

li.tile.single>a.view {

background-image: none;

margin: 0 20px;

padding: 11px 10px;

font-size: 13px;

font-weight: bold;

width: auto;

border-radius: 0;

height: auto;

line-height: 1;

bottom: 20px;

white-space: nowrap;

color: #fff;

border-color: #0093D0;

background: #0093D0!Important;

border-width: 1px;

border-style: solid;

box-shadow: none;

-webkit-transition: 0.2s all;

transition: 0.2s all;

-webkit-font-smoothing: antialiased;

-webkit-transform: translateZ(0);

transform: translateZ(0);

}

.tile.single:hover>a.view {

background: #fff!Important;

color: #0093D0!important;

text-decoration: none;

}

.tile.single>a.view:before {

display: none;

}

.tile.single>a.view:after {

display: inline;

content: '';

position: relative;

top: -1px;

left: 3px;

right: auto;

bottom: auto;

background: none;

}

.tile .description {

border-top: 1px solid #ddd;

}

/*--Description Gradient--*/

.tile.single>.description:after {

content: '';

margin-left: -20px;

background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0\%, white 25\%);

background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0\%, white 25\%);

height: 8rem;

bottom: 0;

display: block;

position: absolute;

left: 0;

right: 0;

}

</style>

Use this Custom Code snippet to change the text and background colors of the Hubs Lab Sticky Footer.

Warning

Hub Hacks are NOT official Uberflip features. They may not work on all Hubs, or may cause unexpected behavior. Before implementing a Hub Hack on a production Hub, we strongly recommending testing it in a safe environment (such as a staging Hub) if possible.

Uberflip Support is not able to help troubleshoot issues with Hub Hacks: if a Hub Hack is not working correctly in your Hub, Uberflip Support can only help you to disable it.

Details

Type: CSS

Placement: Head

Code

Remove [background] and[text] (including the square brackets) and replace with the hex codes of the colors you want to use instead.

<style>

/* Custom Sticky Footer Background Color */

body.lab_sticky_footer>footer {

background: #[background];

color: #[text];

}

</style>

Use this Custom Code snippet to remove the social sharing buttons from only a specific Stream (and the items inside).

Warning

Hub Hacks are NOT official Uberflip features. They may not work on all Hubs, or may cause unexpected behavior. Before implementing a Hub Hack on a production Hub, we strongly recommending testing it in a safe environment (such as a staging Hub) if possible.

Uberflip Support is not able to help troubleshoot issues with Hub Hacks: if a Hub Hack is not working correctly in your Hub, Uberflip Support can only help you to disable it.

Details

Type: CSS

Placement: Head

Notes:For each instance of.stream-######, replace the #s with the Stream ID.

Code

<style>

.stream-###### .right-side-btns,

.stream-###### .share-single,

.stream-######.single-page .right-side-btns,

.stream-######.single-page .addthis_internal_container {

display: none;

}

</style>