How to display total of all instances of a contact field

Marketing & Content Hub Blog, Website & Page Publishing
, , , ,
1

Suppose I am building a crowdfunding site in CMS. I’ve added a custom contact field for the amount of money a user would contribute to the investment offering when it is launched. I then want to display the total number of unique users supporting the project and the total dollar amount pledged on a CMS web page. What is the best way to accomplish this? Workflow or JavaScript which calls the Contacts API?

2

Hi @studeomedia and welcome, we are so glad to have you here!
Also, I’d like to wish you a very Happy New Year! :tada:
Thank you for asking the HubSpot Community!
I’d love to put you in touch with some of our Top Experts: Hi @miljkovicmisa, @Syeda_Fatima, @stefen and @alyssamwilie do you have suggestions to help @studeomedia, please?
Have a fantastic day and thanks so much! :heart:
Best,
Bérangère

3

Raising this to the top again. Any suggestions would be appreciated.

4

Hi @studeomedia and thanks for raising this up!
Hey @Jnix284, @danmoyle and @sylvain_tirreau, I know that you have lots of great experiences using HubSpot so I was wondering if you have suggestions to help @studeomedia report on the total number of unique users supporting the project and the total dollar amount pledged on a CMS web page, please?
Have a lovely weekend and thanks so much in advance for sharing your amazing expertise with the Community! :heart:
Best,
Bérangère

5

Hey there @studeomedia and welcome to the Community. I think this is something you could maybe do using javascript to call the Contacts API - seems it would be more flexible and work in a more real-time situation. I found this example code - but please know I’m not a developer, just a long-time HubSpot user.

const hubspot = require('@hubspot/api-client');
const hubspotClient = new hubspot.Client({ accessToken: 'YOUR_ACCESS_TOKEN' });

async function getCrowdfundingStats() {
 try {
 let after = undefined;
 let totalUsers = 0;
 let totalPledged = 0;

 do {
 const apiResponse = await hubspotClient.crm.contacts.basicApi.getPage(
 100,
 after,
 ['pledge_amount'],
 undefined,
 undefined,
 false
 );

 totalUsers += apiResponse.results.length;
 totalPledged += apiResponse.results.reduce((sum, contact) => 
 sum + (parseFloat(contact.properties.pledge_amount) || 0), 0);

 after = apiResponse.paging?.next?.after;
 } while (after);

 return { totalUsers, totalPledged };
 } catch (e) {
 console.error('Error fetching crowdfunding stats:', e);
 }
}

// Call this function and update your HubSpot page with the results
getCrowdfundingStats().then(stats => {
 document.getElementById('totalUsers').textContent = stats.totalUsers;
 document.getElementById('totalPledged').textContent = stats.totalPledged.toFixed(2);
});

You should be able to create a custom module in HubSpot CMS and add the JavaScript code to the module, ensuring you replace ‘YOUR_ACCESS_TOKEN’ with your actual HubSpot API access token.

Next, create HTML elements in your module to display the results (e.g., with IDs ‘totalUsers’ and ‘totalPledged’). Finally, you would add the custom module to your crowdfunding project page.

You probably also want to make sure you handle API rate limits and implement error handling for a production-ready solution, and consider caching the results for a short period to improve performance for high-traffic pages. Hopefully this helps!