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
<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
- 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.
- 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.