How To Seamlessly Integrate Your Hub Into Your Website

November 15, 2013 Yoav Schwartz

Uberflip Hub Embed

We hear this from customers quite often, so I’ve decided it’s time to clearly outline how simple it is to get your entire Hub within the context of your website.

You should note however that we’ve recently launched a new widget that embeds selected Hub tiles (i.e. recent Items or a selected Stream) anywhere on any page of your site. If you’re looking for that type of integration, log into the application and go to Add-ons & Widgets > Embed Hub Content on Your Website and feel free to contact our support team if you have any questions.

Otherwise, let’s dive in! Although the integration is not complex, this is still a technical guide that will require your webmaster to implement on your page of choice.

UPDATE: We now have a Website Embed tool available for you to easily grab the necessary code to embed your Hub on your website! Click here to see how it all works.

The Page Setup

Most websites have a top menu, so I'm going to assume that you do as well. For argument’s sake let’s assume the entire top section of your site is 100 pixels tall.

Let’s also assume you’ll be embedding your Hub on a new page called yoursite.com/hub.

In the body of your /hub page, the only content other than your site menu/header should be an iFrame of your hub, like so:

<iframe id="myHub" src="[your hub's URL]" >

using CSS, either inline or an existing CSS file, give this iFrame some styling:

<style type="text/css">
#myHub{
position:absolute;
top: 100px;
 left:0;
width: 100%;
border:0; 
}
</style>

You’ll notice we didn’t give the iFrame a height. That’s because we need to calculate the height with JavaScript to match the full available screen height, minus the height of your top menu (100px).

You’ll also notice we gave the iFrame a top position of 100px so that it sits right beneath your menu (again, change this value to your menu’s actual height).

To change the height with JavaScript we need to do 2 things:

1. When the page loads, set the height
2. When the page is re-sized, reset the height to the new available height minus top menu

Here’s the code, assuming you’ve got Jquery installed – if not, you can achieve this with any other scripting library or plain JavaScript as well.

< script >
$(document).ready(function() {
// Update Height of Hub Now and on Resize
updateHubHeight();
$(window).on('resize', updateHubHeight);
});
function updateHubHeight() {
var menuHeight = 100;   
$('#myHub').css('height', $(window).height() - menuHeight );
}
< /script >

Ok, we’re making good progress here. The next step is to make sure that your page doesn’t have any scrollbars, because your Hub’s iFrame will have scrolling – no one likes double scroll bars!

For this page only, you’ll want this CSS applied to both the HTML and body tags like so:

     html, body{
 	overflow:hidden;
     }

You now have the basics done and your Hub should be well integrated into your site. Of course you can add a menu option linking to this page called “Our Hub” or similar (that’s what we do here at Uberflip!)

If your site has a footer, you can either omit the footer from the HTML, hide it with CSS, or remove it on load with JavaScript. But it will technically not be seen regardless because the iFrame will take up the whole screen except for the menu, and there won’t be any scrollbars. That said, if you can, remove these unused elements.

Customizing your Hub

The very final piece to consider is the fact that your Hub too has a menu at the top. If you don’t like the look of a double menu (i.e. your website menu, followed by your Hub’s menu) you can target your integration using Hub’s custom CSS field (a Pro feature).

When your Hub is loaded in an iFrame, we automatically apply a class “iFrame” to the body tag of the Hub. That allows you to target anything in the Hub only when it’s inside an iFrame.

For example, in your Custom CSS field you could put:

body.iframe h1{color:orange}

And now only when your Hub is loaded in an iFrame, your header text will be orange.

That’s fun, but more useful would be, for example, to hide your Hub’s menu bar to avoid duplicating elements already on your site.

Here’s the code to paste into your “Custom CSS” field from the style/brand section of application screen:

body.iframe .top-nav{display:none}
body.iframe .main{margin-top:30px;}
body.iframe .large-header #header-loading-overlay.hide-splash-state{bottom: 20px;}

Decisions, decisions…

It’s great to have your Hub embedded on your site, but when someone is reading your blog post or watching your video, you may prefer that the content is not loaded in an iFrame, but instead in a full window.

If you open your Hub “options” you’ll see an option to “Open Items in top frame” – this will ensure that when a visitor clicks on a piece of content that it exits the iFrame and loads at the top frame. We do this here to ensure that if our visitors have their own sharing tools, that they can share the piece of content they're consuming more directly.

Mobile

You may be asking – what happens when someone visits my Hub integrated page from a mobile device? Mobile devices like iPhones don’t handle iFrames properly in all cases. When a Hub is loaded in an iFrame on a mobile device, we automatically “break out” of the frame and reload the Hub at the top. So in essence, on mobile devices your integrated Hub loads as if it was linked to it directly.

I hope you’ve enjoyed this technical guide – please feel free to ask me questions about your own integration!

About the Author

Yoav Schwartz

Yoav is the co-founder and CEO at Uberflip and is responsible for driving the mission, vision, and goals of the company. He spends considerable time working with his team to continuously delight and surprise Uberflip's customers.

Follow on Google Plus Follow on Twitter More Content by Yoav Schwartz
Previous Article
Introducing Marketing Streams: A New Way To Show Off Your Content
Introducing Marketing Streams: A New Way To Show Off Your Content

Uberflip's new Custom Streams let you create hyper-targeted content streams for better audience engagement.

Next Article
Email Metrics: What To Track, And Why
Email Metrics: What To Track, And Why

Are you tracking the right metrics for your email sends? Find out!

Check Out Our Upcoming Webinars and Events

Find Out More