Embed using an HTML iframe

Each campaign has an Embed link under the campaign video which has an iframe Campaign Badge Embed Code you can include on any HTML page online. This is the easiest way of embedding a single badge:

<iframe frameborder="0" scrolling="no" height="436" width="231" src="http://demo-site.crowdfundhq.com/campaigns/campaign-link.embed"></iframe>

You can also embed entire categories from your discover page. This will insert the first 4 badges.

<iframe frameborder="0" scrolling="yes" style="width: 100vw; height: 100vh; max-width: 961px" src="http://demo-site.crowdfundhq.com/discover/category-link.embed?per_page=4"></iframe>

You can adjust the per_page parameter to display as many badges as you want.

Embed using Javascript and JSON-P

You can add the extension .json to any campaign or category to access the campaign data as JSON instead of HTML.

# Show campaign as JSON data
http://demo-site.crowdfundhq.com/campaigns/campaign-link.json

# Show category as JSON data
http://demo-site.crowdfundhq.com/discover/category.json

To embed badges using Javascript, go to Manage Site > Design > Scripts and add this:

<script src="/js/campaign_badge.js"></script>

Go to Manage Site > Design > Pages and copy this to the page where you want the badge to be visible, typically the home page:

// Wait until hq.js is loaded
document.addEventListener('DOMContentLoaded', function(){

  // Replace this link with your own campaign link
  var link = 'http://demo-site.crowdfundhq.com/campaigns/campaign-link.json';

  // Fetch the data
  hq.getJSON(link + '?callback=?',
    function(data){
      // Create the badge as HTML
      var badge = hq.campaignBadge(data);

      // Specify the HTML element to contain the badge
      var el = document.getElementById('container');

      // Insert the badge
      el.innerHTML += badge;
    }
  );
});

If you need something special, just send us an email, and we'll help you out.