Skyscraper Blog

How we integrated the LaunchRock widget

With very little effort, it’s super easy to tweak the LaunchRock subscription widget to fit seamlessly into your new startup’s pre-launch landing page. Here’s how I did it on Skyscrpr:

Settings things up in the LaunchRock Admin

Landing Page

Under Page Theme, my goal was to choose a barebones theme to minimize the amount of overriding I’d have to do later. I chose the last option, with black text and a transparent bounding box.

Hide all of the elements you don’t want via the LaunchRock admin’s Visibility Settings toggles. (No, you can’t remove the “powered by launchrock” badge.) I removed the Announcement Bar, Tagline, Description and Instructions.

Use the Save & Continue button in the upper-right to move on.

(Protip: Navigating to a different step in the process via the 1–6 tabs will not save the changes made on your current tab.)

Sharing Page

The visibility settings for the page are a bit less powerful than I’d prefer. You can’t remove the text above the buttons via a toggle (I remove them later with CSS), nor can you remove the links underneath the Share Link (again, a bit of CSS to the rescue).

Domain Settings

Using your favorite text editor, create a blank file and save it to the public webspace of your choice. (I named mine the creative lr-override.css.)

Choose Widget, toggle Show Background Image & Announcement Bar and Show Logo / Site Name off, and enter the public URL of the CSS file you just uploaded in the field for URL of Custom Stylesheet.

Click Update Preview & Generate Code, then copy out the freshly generated code from the first textarea and paste it into the HTML of your landing page.

(I recommend copying the Facebook Open Graph code as well, although you’ll probably want to customize it a bit. That’s outside the scope of what I’m covering here.)

Creating an override CSS file

First thing I did was to modify the bounding box to remove all shadows, borders and background colors. I believe the Page Theme set above is what is giving my particular div the .light-c class, so double-check what yours is if this code doesn’t have an effect.

.light-c .site {
    background: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    border: 0;
}

Hiding things the LR Admin had no toggle for

There’s a couple of elements you’ll need to hide via CSS. Use your favorite browser’s inspector to target them all or use mine as a starting point:

.lrdiscoverwidget .site-tagline,
.lrdiscoverwidget .site-desc,
.lrdiscoverwidget .inviteform label,
#launchrock .invite-label,
.lrdiscoverwidget .share-via-email,
.lrdiscoverwidget .social-links,
.lrdiscoverwidget .live-stats {
    display: none !important;
}

Style & Positioning

Lastly I made some style and positioning tweaks to the text field, submit button, sharing buttons, and LaunchRock logo:

.lrcontent .twitter {
    margin-left: -7px;
}

.lrdiscoverwidget .share-link {
    margin: 0 0 4px;
}

.lrdiscoverwidget .like {
    text-align: left;
    height: 30px;
}

.lrdiscoverwidget .site {
    padding: 0;
    border-radius: 0;
    width: 100%;
    margin: 0;
    padding: 0;
}

.lrdiscoverwidget .inviteform {
    margin-bottom: 3px
}

.lrdiscoverwidget .site-powered-by {
    text-align: left;
}

.lrdiscoverwidget .inviteform .field {
    margin: 0 4px 0 0;
    border: 2px solid #333;
}

.lrdiscoverwidget .inviteform .submit {
    padding: 0;
    height: 33px;
    line-height: 32px;
    position: relative;
    top: 2px;
    background: -moz-linear-gradient(top, #AED7D5 0%, #63C9C3 3%, #40C4BC 49%, #34B3AC 100%);
    background: -webkit-linear-gradient(top, #AED7D5 0%, #63C9C3 3%, #40C4BC 49%, #34B3AC 100%);
    background: -o-linear-gradient(top, #AED7D5 0%, #63C9C3 3%, #40C4BC 49%, #34B3AC 100%);
    background: linear-gradient(top, #AED7D5 0%, #63C9C3 3%, #40C4BC 49%, #34B3AC 100%);
    }

.lrdiscoverwidget .inviteform .submit:hover {
    background: -moz-linear-gradient(top, #C6D4EB 0%, #6094EB 3%, #4884EB 49%, #3B7CEB 100%);
    background: -webkit-linear-gradient(top, #C6D4EB 0%, #6094EB 3%, #4884EB 49%, #3B7CEB 100%);
    background: -o-linear-gradient(top, #C6D4EB 0%, #6094EB 3%, #4884EB 49%, #3B7CEB 100%);
    background: linear-gradient(top, #C6D4EB 0%, #6094EB 3%, #4884EB 49%, #3B7CEB 100%);
}

.lrdiscoverwidget .site-powered-by {
    padding: 0;
}

Animating the introduction of the widget

Because the widget won’t allow me to hide specific elements via the admin, they get rendered to the page until my CSS has a chance to remove them. This can cause an ugly flash of unwanted content. I went with the (slightly hacky, but very fast to implement) option of hiding the widget for two seconds then animating it onto the page, giving the styling a chance to happen “behind the scenes” before presenting it to the viewer.

The end result is a bit of dramatic flair, drawing attention to the subscribe field; it imbues a “most important part of the page” vibe.

Dan Eden’s animate.css was instrumental in quickly adding a CSS-only effect that looks great across all devices. (Especially since CSS animations are natively hardware-accelerated.)

I assigned my bounding div for the LaunchRock section .animated .fadeInUp classes, then in the main CSS file for the page gave the div -vendor-animation-delay: 2s;, to delay the fadeInUp animation two seconds.

There you have it—a LaunchRock widget you can integrate and animate into any design. Leave us a comment when you’ve got your LaunchRock page up, we want to check out what you’re working on! (Don’t forget to sign up for access to Skyscrpr—if your site runs advertising, you’ll want to pick up what we’re putting down.)

This post also appeared on the LaunchRock blog.