Anatomy Of A Neighborhood Kit

Last week we introduced you to the new Hoodline Neighborhood Kit, an embed of custom neighborhood stories that you can add to your own website. This week we're pulling back the curtain to share details of how the Kit works.

The Kit is based on HTML's iframe tag, which allows you to embed an entire mini-website hosted by Hoodline inside one of your own webpages. When a viewer clicks into the Kit they can browse our content without ever leaving your page. <iframe> is the standard unit of embeddable content on the web and is used for social sharing by Facebook, Instagram and Twitter and for video embedding by YouTube and Vimeo.

If you look at the above-linked documentation for iframe, you'll notice a ton of attributes that can be added to the tag to influence its display or behavior. The sheer number of options can be overwhelming. Take heart, for we've hidden this complexity from you. Instead of forcing you to hand-code an iframe, we provide a tiny JavaScript library that does it for you. All you have to do is drop a <div> tag into your page wherever you want the Kit to show up and a <script> tag referencing our library somewhere in the page. Here's an example:

<div class="hoodkit-neighborhood-embed" data-kit="upper-haight" data-theme="carbon"></div>

<script src="http://[your-api-key].kit.hoodline.com/api.js"></script>  

You can customize your Kit using HTML data attributes added to the <div> tag:

  1. The kit code indicates which Neighborhood Kit you want to place on your page. We provide a full list of codes for the 30+ Kits we offer.
  2. The theme indicates which color scheme you'd like to use for the Kit. You can select from three different options: light, dark or Hoodline red.

(We also require you to provide the API key we assign when you purchase the product.)

The theme option lets you visually integrate the Kit into your site no matter what your color scheme may be. But the Kit also has to work well on whatever device a viewer might use to look at your website. The Kit design is fully responsive, so it looks great and functions perfectly whether it's viewed on a desktop, laptop, tablet or phone.

Neighborhood Kit on an iPhone

The Neighborhood Kit is just the first of many ways we plan to make our best content available to your website. For those of you who would prefer a deeper integration, we'll be offering a JavaScript API so that you can sprinkle our content into your site in any way you choose. Let us know if you have any other ideas about how you would like to use our content!