Read-Only API

Displaying Campaigns


In the example below we are pulling all active campaigns from REACH and creating a widget to display in the campaigns element.

<html>
  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <style>
      .img-responsive {
        margin: 0 auto;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h2>Support a Campaign</h2>
      <div id="campaigns"></div>
    </div>

    <script>
      jQuery(document).ready(function($){
        $.getJSON('https://demo.reachapp.co/campaigns.json',function(data) {
          var items = [];
          $.each(data, function(key, val) {
            var end   = new Date(val.goal_end_date),
            start = new Date(),
            diff  = new Date(end - start),
            days  = Math.ceil(diff/1000/60/60/24),
            goal = parseFloat(val.goal_amount).toFixed(0);
            var raised = parseFloat(val.total).toFixed(0);
            var percent = (raised / goal) * 100;

            if (!val.images) {
              var image = 'https://demo.reachapp.co/assets/logo_small.png';
            } else {
              var image = val.images['small'];
            }
           
            items.push('<div class="campaign_spot col-md-3 col-sm-4"><div class="thumbnail"><div class="details"><a href="'+val.full_url+'"><img src="'+image+'" class="img-responsive"></a><div class="caption"><a href="'+val.full_url+'"><h3>'+val.title+'</h3></a><p>'+val.short_description+'</p></div></div><div class="progress"><div class="progress-bar" role="progressbar" aria-valuenow="'+percent+'" aria-valuemin="0" aria-valuemax="100" style="width: '+percent+'%;"></div></div><div class="pull-right"><strong>RAISED $'+raised+'</strong></div><div><strong>GOAL $'+goal+'</strong></div></div></div>')
          
          });
 
          $('#campaigns').html(items.join(''));

        });
      });
    </script>
  </body>
</html>

Displaying Sponsorships


In the example below we are pulling sponsorships from REACH and creating a widget to display in the sponsorships element.

<html>
  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <style>
      .img-responsive {
        margin: 0 auto;
      }
      .sponsorship_progress {
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h2>Sponsor A Child</h2>
      <div id="sponsorships"></div>
    </div>

    <script>
      jQuery(document).ready(function($){
        $.getJSON('https://demo.reachapp.co/sponsorships.json',function(data) {
          var items = [];
          $.each(data, function(key, val) {

            if (!val.images) {
              var image = 'https://demo.reachapp.co/assets/logo_small.png';
            } else {
              var image = val.images['small'];
            }
           
            if (val.shares_available == 0) {
              items.push('<div class="sponsorship_spot col-md-3 col-sm-4"><div class="thumbnail"><div class="details"><a href="'+val.full_url+'"><img src="'+image+'" class="img-responsive"></a><div class="caption"><a href="'+val.full_url+'"><h3>'+val.title+'</h3></a><p>'+val.description+'</p><div class="sponsorship_progress col-m2-12"><strong>Sponsored</strong></div></div></div></div></div>')
            } else {
              items.push('<div class="sponsorship_spot col-md-3 col-sm-4"><div class="thumbnail"><div class="details"><a href="'+val.full_url+'"><img src="'+image+'" class="img-responsive"></a><div class="caption"><a href="'+val.full_url+'"><h3>'+val.title+'</h3></a><p>'+val.description+'</p><div class="sponsorship_progress col-m2-12"><strong>'+val.current_shares+' of '+val.total_shares+' Sponsored</strong></div></div></div></div></div>')
            }
            
          
          });
 
          $('#sponsorships').html(items.join(''));

        });
      });
    </script>
  </body>
</html>

Feedback and Knowledge Base