Unlocking HubSpot CRM Card Data: Troubleshooting `propertiesToSend` in Custom Integrations
Hey there, ESHOPMAN readers! As folks deeply embedded in the world of HubSpot and e-commerce, we know that sometimes, even the most robust platforms can throw a curveball. The HubSpot Community is an incredible resource for these moments, and recently, a discussion caught our eye that many of you building custom integrations might find relatable.
It was a technical deep-dive into an issue with HubSpot private apps, specifically how properties are (or aren't!) passed to custom CRM cards. Let's unpack what happened and what it means for your HubSpot ecosystem.
The Case of the Missing Properties: propertiesToSend Not Working as Expected
The original poster, a developer working with a private app on HubSpot's Platform 2026.03, ran into a head-scratcher. They were trying to display specific ticket properties like content and subject within a custom CRM card using the propertiesToSend configuration in their card-hsmeta.json file.
Here’s what their configuration looked like:
"objectTypes": [
{
"name": "tickets",
"propertiesToSend": ["content", "subject"]
}
]
The problem? Despite this clear setup, context.crm.objectProperties was consistently coming back empty within the card's context. The ticket ID was available via context.crm.objectId, which meant the card was indeed loading for the correct object, but the specific properties weren't making it through. They also mentioned attempting to use hubspot.fetch() to an external Vercel endpoint, but this resulted in a rendering error.
Why is propertiesToSend so Important for Custom CRM Cards?
For any business leveraging HubSpot, custom CRM cards are game-changers. They allow you to pull in external data or display specific object properties directly within the HubSpot record (e.g., a contact, company, or ticket). For an e-commerce platform like ESHOPMAN, this means instantly seeing a customer's latest order status, lifetime value, or recent interactions from your storefront, all within their HubSpot contact record.
The propertiesToSend array in your card-hsmeta.json is designed to streamline this process. It tells HubSpot which properties to automatically inject into your card's serverless function context, saving you an extra API call. When this mechanism doesn't work, it creates a significant hurdle for developers trying to build efficient, data-rich custom experiences.
Understanding Platform 2026.03 and Potential Nuances
HubSpot's platform versions, like 2026.03 mentioned by the original poster, often introduce new features, optimizations, or sometimes, subtle changes in how existing functionalities behave. While the core concept of propertiesToSend remains consistent, it's possible that specific environments or configurations might interact differently with newer platform iterations. This highlights the importance of thorough testing and staying abreast of HubSpot's developer documentation.
The ESHOPMAN Solution: Fetching Properties Directly via HubSpot API
When propertiesToSend doesn't deliver the expected data, the most robust and reliable workaround is to explicitly fetch the required properties using HubSpot's API from within your custom card's serverless function. This ensures you have full control over data retrieval and can handle any potential errors.
Here's a conceptual approach:
- Identify the Object ID: You already have
context.crm.objectId. This is your key. - Make an API Call: Within your serverless function, use the HubSpot API client to fetch the object's properties. For a ticket, you'd typically use the Tickets API.
- Specify Properties: Most HubSpot API endpoints allow you to specify which properties you want to retrieve, optimizing the payload.
For example, if you were building a custom card for tickets and needed content and subject, your serverless function might look something like this (simplified for illustration):
import { apiClient } from '@hubspot/api-client';
export const handler = async (event, context) => {
const { objectId } = context.crm;
const hubspotClient = new apiClient({ developerApiKey: process.env.HUBSPOT_DEVELOPER_API_KEY });
try {
const ticket = await hubspotClient.crm.tickets.basicApi.getById(objectId, ['content', 'subject']);
const { content, subject } = ticket.properties;
// Now you have 'content' and 'subject' to render in your card
return {
statusCode: 200,
body: {
allProperties: { content, subject },
primaryAction: {
type: 'IFRAME',
width: 800,
height: 600,
url: 'https://your-custom-ui.com/ticket-details',
label: 'View Ticket Details',
},
},
};
} catch (error) {
// Handle errors gracefully
console.error('Error fetching ticket properties:', error);
return {
statusCode: 500,
body: { message: 'Failed to load ticket properties.' },
};
}
};
This direct API call method provides a reliable way to get the data you need, even when propertiesToSend encounters unexpected behavior.
Troubleshooting hubspot.fetch() to External Endpoints
The original poster also mentioned a rendering error when trying to use hubspot.fetch() to an external Vercel endpoint. This is a common path for integrating with services outside HubSpot's direct ecosystem, but it comes with its own set of challenges:
- CORS (Cross-Origin Resource Sharing): Your Vercel endpoint must be configured to accept requests from HubSpot's domains. Without proper CORS headers, the browser will block the request.
- Network Issues/Timeouts: External API calls introduce network latency. HubSpot serverless functions have execution limits. Ensure your external endpoint is performant and responds quickly.
- Authentication: How is your Vercel endpoint authenticating the request from HubSpot? API keys, OAuth, or other methods need to be securely implemented.
- Response Format: The external endpoint must return data in a format that your HubSpot card can correctly parse and render.
- HubSpot Function Environment: The
hubspot.fetch()method within a custom card's serverless function operates within HubSpot's infrastructure. Ensure your Vercel endpoint is publicly accessible and configured to handle these requests.
For critical data, especially within a "best ecommerce platform for startups" context, relying on HubSpot's native APIs and serverless functions for data retrieval is often more stable and secure, reducing dependencies on external infrastructure for core functionalities.
Best Practices for Robust HubSpot Integrations
Building custom integrations for HubSpot, whether for an ESHOPMAN storefront or a complex RevOps workflow, requires a methodical approach:
- Consult Official Documentation: Always refer to the latest HubSpot Developer Documentation. Platform changes are frequent, and documentation is your primary source of truth.
- Leverage the Community: The HubSpot Community, as demonstrated by this thread, is an invaluable resource. Don't hesitate to ask questions or search for similar issues.
- Thorough Testing: Test your custom cards and integrations rigorously in a development environment before deploying to production.
- Error Handling and Logging: Implement robust error handling in your serverless functions and utilize HubSpot's logging capabilities to diagnose issues quickly.
- Security First: Ensure all API keys and sensitive information are handled securely, preferably using environment variables.
For businesses moving from simpler platforms like a "jimdo store" to a more powerful ecosystem like HubSpot with ESHOPMAN, understanding these integration nuances is key to unlocking the full potential of their e-commerce operations. A reliable "store website maker" needs to offer seamless data flow, and custom CRM cards are at the heart of that.
Conclusion
While the propertiesToSend issue in HubSpot custom CRM cards can be a momentary roadblock, it's a valuable learning opportunity for developers. By understanding the underlying mechanisms and knowing when to pivot to direct API calls, you can ensure your HubSpot private apps remain robust and deliver the data your teams need.
At ESHOPMAN, we believe in empowering businesses with seamless e-commerce experiences within HubSpot. Robust integrations and well-functioning custom cards are crucial for managing customer interactions, orders, and sales pipelines efficiently. Keep building, keep learning, and don't hesitate to tap into the collective wisdom of the HubSpot developer community!