You can retrieve the public fundraising page data as JSON via a given url. Thus you are able to render the fundraising pages very flexible at your own. For example you can read the JSON data by using JavaScript and create HTML according to the retrieved JSON data.

JSON url

You can find the JSON url at the fundraising page add on configuration at „Settings“. Please select a fundraising page tool first. The JSON url of the choosen fundraising page tool is shown at „JSON address“. Here you can define some filters and sortings to finally get the JSON url at the end of the page.

The url looks like this:
https://secure.fundraisingbox.com/pages_list/abc.json?count=12&show_expired=0

These are the available search parameter to filter the list of fundraising pages:

Search parameter	Description	Details
received_percentage_min	Minimum percentage of reached goal	A number greater than 0.
status	Status of a page	preferred: only show preferred pages
show_expired	Show expired pages	Default: Do not show expired pages 1: also show expired pages
count	Number of results	A number greater than 0
sort	Sorting	Default: randomized order received_percentage: Show pages with the highest received percentage first received: Show pages with the highest received amount first manually: Show pages according to the domains-parameter.
domains	A comma separated list of domains	Only in combination with sort=manually
has_image	Show pages with images only	Default: Show all pages 1: show only pages with an image
title	Page title	Case insensitivity search
description	Page description	Case insensitivity search
fundraiser_name	Public name of the fundraiser	Case insensitivity search
search	Performs a search in title, description and fundraiser_name	Case insensitivity search

JSON data

[
	{
  	"domain": "xyz",
    "title": "Running for world peace",
    "fundraiser_name": "John Doo",
    "description": "Dear friends, I will run for world peace.",
    "donation_message": "Thank you for your support",
    "has_image": true,
    "image_url": "https://secure.fundraisingbox.com/pages/getImage/type/page/domain/xyz/123.jpg",
    "link": "https://www.example.com/my-fundraising-pages?cfd=xyz",
    "json_link": "https://secure.fundraisingbox.com/pages_render/abc/xyz.json",
    "payment_link": "https://www.example.com/my-fundraising-pages?cfs=p&cfd=xyz#cff",
    "expires_at": "2016-06-25",
    "days_left": 36,
    "project_name": "",
    "category": "creative",
    "status": "preferred",
    "goal": 1000,
    "received": 230,
    "received_percentage": 23,
    "donation_count": 2,
    "donations": [ 
      {
        "date": "2016-04-04 10:33:43",
        "amount": 30,
        "public_name": "Tim",
        "public_message": "Good job, dude!"
      },
      {
        "date": "2016-05-01 20:11:42",
        "amount": 200,
        "public_name": "Your mum",
        "public_message": "Go for it, Johnny!"
      }
    ]
  },
  {
    ...
  }
]

In the list of fundraising pages every single page has it's own json_link. With this link you can retrieve the data from this page only.

HTML + JavaScript Example

<!DOCTYPE html>
<html>
	<head>
		<title>JSON Search Example</title>
		<script type="text/javascript" src="/jquery.min.js"></script>
	</head>
	<body>
		<form id="searchForm">
			<label for="search">Search</label>
			<input type="text" id="search" />
		</form>
		<button id="searchButton">Start search</button>
		
		<div id="results"></div>
		
		<script type="text/javascript">
			$("#searchButton").unbind("click").on("click", function() {
				$("#results").html("Searching...");
				$.getJSON(
					"https://secure.fundraisingbox.com/pages_list/xxx-Hash-xxx.json",
					{
						count: 12,
						search: $("#search").val()
					}
				).done(function(data) {
					var results = "";
					if(data.length > 0)
					{
						$.each(data, function(index, page) {
							results += "<a href='"+page.link+"'>"+page.title+"</a><br />";
						});
					}
					else
					{
						results = "<i>No matches</i>";
					}
					$("#results").html(results);
				});
			});
		</script>	
	</body>
</html>