Custom Cards

Sejal Parikh and Amy Chamness explain HubSpot custom cards, UI extensions that let you build React frontends and serverless backends to display data in record pages. They're available in Sales and Service Hub Enterprise, work in the middle column and sidebars, and integrate with GitHub and the CLI for local development.
Chapters
Foreign. Welcome to the Admin Hug event and today we're gonna talk about custom cards. It's an extension to the last event that Dennis at Sunren where you he took you to and took you deeper into how custom cards are built. And this time we are going to go deeper into what's the problems you can solve with custom cards. And I'm Sajud Parikh, I work as a PM inside HubSpot and I'm highly focused in making HubSpot more extensible and I talk to developers, working with customers and solution partners almost every other day as a part of my work. But I don't Talk enough to HubSpot admins or business users. So here I am. I'm very excited to talk about custom car today and they're also known as UI extensions by the way, if you have heard that somewhere else. So let's dive in. Today we are going to touch upon what custom cards are. What did they help you solve in terms of business problems? We'll jump into lots and lots of examples built by our community developers and some sample visuals that Amy is going to walk us through. We are continuously looking to expand surface locations inside HubSpot where you can plug this in. We'll cover that a little bit. Also we'll touch upon briefly as a recap on how these cards are built behind the scene and how you can find developers to build those cards and then we'll open up for discussions. Let's dive in. There are a number of different cards that exist in HubSpot. Now before we go further, let's just clarify a little bit what cards are we talking about today? It all starts with record pages. We have a newly unified record page editor that you can see on the screen right now and that allows you to makes it super easy to visualize your data. If the data is inside your HubSpot account, you can add cards to show association data properties, highlight some data reports filtered with record page and much more. And this is extremely powerful because it gets you 80 percentage of your way in terms of your customization needs. Covering most common customization needs when your data is available inside HubSpot. But there are always those 20% of use cases where you're trying to solve for custom processes, integrations or some special needs that is not covered by these tools. And sometimes it's unique business process like I said that align with your industry or your geography. In other times they are third party integrations or for tools like project management, bookings, product usage or even internal homegrown tools that you have inside your company that no one else has access to or at times highly customized code to cash flows or business processes you have in your company. And there are so many aspects to running and growing business that are unique and each company requires something else. That's where we now have extension cards that are also known as UI extensions, all custom cards and that get you rest of the 20 percentage of weight in terms of the needs that you have for customization. To sum it all up, you can use out of the box card template to solve most common and most recurring problems in your CI customization. And you can build private applications to extend HubSpot to solve the problems that HubSpot is not solving out of box. Most of these are long tail use cases that you have in your companies so you can do that to custom development. That is custom cards that we are going to talk about today. Now I know some of you might be thinking but say we already have no CRM cards to do just that. I want to know how many of you are actually aware of CRM cards that I'm talking about. What am I talking about? I'm going to go back to chat to see.
Yeah, we actually do have a question in the chat. What are these cards? Where are they located? So they can say you're diving into this.
Yes, Today we also offer something called classic CRM Card. You can create these cards with CRM Extensions API and you have to create a public app to do that. They are very static as in you can send some data in JSON format and HubSpot will decide how they look. And at best you can have a few actions or a button that will open up an IFM model. What most developers end up doing is they would create a web application on the side and then they would iframe it inside HubSpot. And that itself has a very limited capability because of security and other limitations we have. That's where last inbound we launched a new set of tools that called CRM development tools that allow you to build UI extensions. UI extensions are much more powerful. They're built with React. React is a mainstream JavaScript framework to build web applications. Because of that it becomes more powerful. It makes it easy to build dynamic and interactive capabilities inside your HubSpot account. They are the four custom cards. When I say they're the first of many types of UI extensions we might be adding later on, but custom cards are first. That's why the umbrella term UI extension is being used. That helps you extend HubSpot's UI beyond what it offers out of the box. And I'm going to talk about that next. This is one example of a custom card that exists in our GitHub repository. We offer the GitHub repository of code samples and this is an example. They show how you can build a micro application that look, feel and behave just like HubSpot. This is not out of the box in HubSpot. This is custom built by developer. It shows a workflow to order a meal, form a contact page which starts from searching for a restaurant, from a list of restaurant, viewing the menu on the side panel, picking up options for items and finally performing a mock checkout. And all of these is custom built as one single UI extension inside HubSpot. And that is what I'm talking about when I'm saying UI extensions or custom card today. This is what I mean. Not the classic CM card and not the cards that are built out of the box by the box on record. Page editor tooling so since the time we launched last inbound, our data shows that sales and service hub enterprise customers who have built These extensions see 25% growth in deals created and 48% of growth in deals close one. And they're also closing more tickets. And this is happening primarily because the users are able to stay inside HubSpot more and more to get a single view of all of the data that exists outside HubSpot right when they need it and where they need it. And they can even take actions without actually getting out of HubSpot pages. So they're using HubSpot more efficiently and that's why they are getting more growth out of HubSpot usage. Let's get real. We have some of the examples over the top of what we offer on GitHub repositories. Today I'm going to show some of the examples built by our community developers with their consent. So let's start with that. Starting with our own internal teams, we use HubSpot inside HubSpot and the product team that's in charge of helping HubSpoters grow better, they built out this recent Conversations analysis extension. This allows the history of all of the recent conversations with the contact and much more. You can see that there's a panel opening on the side that shows a history and a timeline and new talon who works with one of our solutions partners. Novicelink built this extension for a client, Urban Young, that allows them their reps to easily quote new policies or bind policies and service policies easily, all within HubSpot. It's a fintech company that is able to customize their business process all inside HubSpot. He actually sent me 3 minute recording which is trimmed down and cut into 20 seconds. But I can share more later on if you if anybody's interested. More so Lou actually truly believes that CIM development feature will revolutionize how companies incorporate processes and operations just like this company and operate most of the business from inside HubSpot because for their work this is another fun fact.
Lou is here. He just waved in the chat so hello. Well done.
Hi.
I can't see you Lou, but hey Lou, thank you for sharing this. Anze is another developer who works with Scorpio Digital. They are another Solutions partners with HubSpot and they wanted to let their client who is a home builder configure their flow plans which they display on the CMS site. The issue was getting the right data schema, creating the correct client side validation and ensuring the data format is consistent across the backend and front end. And they solve this problem by building a flow plan config builder extension that you can see right now this project like Anze was showing and he was talking to me, he was able to show that this is extension that is able to get all of the users inside HubSpot and keep them inside HubSpot but at the same time work through their flow plan without having to go into the multiple systems.
Anze is also here. We've got an all star audience today.
Yes, I have a lot many examples to show and all of them have given me consent and I'm happy that they are also for joining this session. This is another one for configuring line item for a deal. You're seeing some of the custom business processes or integrations needs. Sometimes you will feel that HubSpot is not solving for your business needs and you would try to solve it by building a custom feature of your own. And that's what Federico did. He works with Impersoft Engish. They're also one of the partners with HubSpot and their custom card enables sales reps to configure line items for deal more easily by providing a very easy and straightforward interface. It allows them to focus on entering only the data that matters the most for their business. The custom card handles all data validation, conditional field logics and something that was not possible by the default editor. FedEx also believes that new UI extensions that are built with React, they're easy to develop tests and debug. And you can see his code. There is a history to his codes. We initially Launched his UI extensions with a different technology stack and then we moved to react. So he's compelling the earlier strategy with the new one and seeing the returns of it. Prasad works with as an in house developers with ERC Document. ERC Documents is a very active HubSpot customers. They build extensions to present the data in a more user friendly format. Actually how to click the next one to show Yes, I had an animation built. This is so that the sales reps can view the products bought from the customers every month on yearly basis and they know which products its customers are buying or not buying and then approach the customers with cross sale or upsell opportunities. All right, this is last one. This not the last one. I think I have one more. This one is for Manuel in ama. He works with as an in house developer again with Funnel. Funnel is a SaaS company and they build this custom CPQ process. I think I need to play the video. Yeah. All inside an extension that also integrates with Julio. This recording, recording that minor descent that shows that various levels of interactive feedback built into the workflow that finally results in creating a code in Judo and also getting that code back and seeing as an iframe model inside HubSpot. This is a very complex process. This is again one recording that was sent to me which was very long and I trimmed it down to 20 seconds. But what happens behind the scene in this one is highly complex process that Funnel is able to get automated inside HubSpot for their CPQ process. Okay, the next one is, you know you need a game in HubSpot. Byron felt that there are not enough games in HubSpot so he built Hurdle, why not? And this you can see they have built different types of, you know, visual indicators to show how the. How you would play the classic world game inside HubSpot which is also fun. So if some of you are looking to build games, you could do that too and stretch HubSpot to its limits. But if you're not a developer and you have some basic design chops, you can also put your imaginations to work with an extensibility focused FIGMA design kit. It's coming up very soon in private beta. If you go in the product updates, it's already showing as an in development feature. Internal teams are already utilizing those to express the ideas and imaginations to know which library of components that FIGMA library also bakes in. Amy will next talk about how you can solve very specific problems for certain verticals using the design samples that she has built. So Amy, take it over.
Perfect Go ahead and jump over to the next slide if you don't mind Sejal and then I will just kind of guide from there. So my name is Amy Chamness. I recognize a ton of names in here. I was lucky enough to join a couple of these hugs last year. But I am a principal Product marketing Manager here at HubSpot. I support Sejal's team and these tools and I wanted to talk, as Sajal just noted, about some of the other sort of industry specific or use case specific examples where we could see custom cards coming in handy. So go ahead, jump to the next slide. There's a ton of different use cases, kind of infinite to be honest with you. All that these custom cards or UIE in general can solve for. These are just a couple. This is a quick sort of admin. Note that what we're walking through is a sample of ideas that came to mind when thinking about industries that have gaps in terms of their needs and use cases and how they're solved in HubSpot. But definitely let your imagination run free. If you've never used Figma before, it's really powerful in terms of sort of mapping an idea onto paper. So with that we'll go to the next slide. Okay, so we categorize these by different industries and then the use case within the industry. So this is a mock for the manufacturing industry or vertical, and it specifically allows users of the record to check production status. You'll notice here that there's a full mock, including the left and right sidebars of the record and custom objects you might use. But the real center of attention is the custom card that is shown right in the middle. And you can see it's tracking certain things like the material and labor cost and percentage sort of used of those different elements in the order. And then we also have production details with a stage tracker beneath it. And then you'll also notice at the top we have sort of a warning or alert to notice. And all of these different components could be moved around, could be changed depending on the actual need. Jump to the next slide. As an E Commerce example, I think this is fairly common, especially you could imagine this on a deal record where you're kind of looking at the review of a product. So this shows a different component, right? We are seeing an image at the top and then you're seeing a property list showing details about that item. And this could depending on how you imagine it, right? It could be specifications of this specific order that was set or placed, or it could be specifications about the Order before it's placed depending on when in the process you are looking. Go jump to the next slide. Another manufacturing example. So you'll see a couple of these type examples in here where they're really form based. And these form based cards are really helpful for tracking different processes that might be, you know, custom to the workflow of the industry or business at hand. So this is initiating a return. You can see here there's a couple of different sort of components at play. So we actually have the form inputs where you're sort of inserting different reasons for the return. There's different guardrails to data entry here, including what properties are mandatory and what aren't. And then you have additional information or supplementary information below with the associated products that might help. Again as a guardrail to the person entering this return. All right, next, switching industries. So this is looking at the professional services vertical and this is a really common example we see come up which is just logging time. And there's a couple of different ways you could think about it. In this particular example, the custom card is not only allowing the individual rep to log time. You'll notice this is on a custom object called a project, but you could put this really on any object. In this case, it's not only allowing them to enter their time, but it's also showing them sort of an overview or summary of how much time is left allotted for that given project, how much time they've already billed. And it gives them a couple of different options in terms of those buttons. They can log time, they can see past entries, so forth. Another professional services example. This is a project snapshot. So you could imagine this living on the same project custom object that the log time card was on. And this is really just showing a snapshot of different milestones or elements about this project that would be important at first glance when reviewing the engagement. So you can see there's a stage tracker, there's also some text and different tags that are going to again visually represent what's important about this project at a glance. And then we also have some different statistics that might be helpful, especially around that time tracking and remaining hours, especially, you know, if you're tracking utilization across employee hours and things of that nature. Okay, new vertical again. So now we're looking at the education vertical and there's a couple of different things here I think that we'll see across the education vertical. This one has to do with course enrollment. So typically when we talk to folks in this vertical, there's different teams at play. So you might have the recruiting team, the administrative team, and they handle different processes. In this particular case, when looking at course enrollment, we're looking at an individual student. So we're on the contact record and we're tracking what courses has she enrolled for, how many credits has she completed, how many credits she need to complete in order to graduate. And then you'll notice there's sort of a status check across that table for each of the courses. Courses, another education one. So this is on the recruiting side. So this is still looking at a contact record, but you're assuming you're earlier in the lifecycle stage. This contact does not get sort of a formally admitted student. And now we're looking at more of a snapshot, similar to what we saw in the professional services industry example, where you're looking at both property list table information that you can scroll through and engage with, as well as a stage tracker along the top.
I think it's a fast one this last month.
Great. So financial services. And I'll just take an aside here to note, you'll notice a lot of these themes are recurring, right. So once you sort of get into the mindset of understanding how you want to display and architect your data within a card, you'll notice that it becomes really easy because of the way that these tools are built to map that onto different components, whether that's a stage tracker, a table, property list, buttons, things of that nature. Really all of these use cases are accomplished using a similar set of building blocks, which makes the whole process a lot easier. I noted this in the chat a little bit earlier, but another element that makes this entire process fairly easy is it all looks and feels like HubSpot when you're mocking these up or envisioning them, thinking within the guardrails of how HubSpot works and how you manipulate, engage with and display data in HubSpot contact records, CRM records in general is really helpful. So with that, the last example here is an account summary on the financial services side where you're again looking at a stage tracker, a property list, some buttons and some statistics. But put all of those things together.
And you get a pretty easy at.
A glance look at given contacts in this case account.
Thanks, Amy. This is amazingly wonderful. Mocks. Thank you for walking us through. Amy showed you some of the mocks, which has cars on the right side, cars in the middle column. I'm just going to go a little deeper into what locations are we allowing. There are two parts to customization through extensibility. One, we give you Tools to build these extensions that we have been showing so far. And the second one is we open up locations inside HubSpot where you can put this extension or place this extension. We are starting with YAM records. You have a middle column tab that we have mostly been showing examples of that so far where on the middle column tabs you can put your extensions. You can also put it on the right sidebar of the pages and any showed in some of the mocks how they could be looking. The third one is preview sidebar which is very powerful extension location where you can put it on a previous sidebar which is one way you can get your extensions outside of record pages because previous sidebar can be open from different pages like contact index pages or segments, list pages and other pages. So that's one way to get the extensions outside of wicked pages. But right now they are still limited to CM records but at the same time they are not just limited to contacts, companies, deals, tickets, but also available on customer objects as well. So in this meeting I also want to know what are the other Pages in the HubSpot where you are seeing your users are moving in and out of HubSpot a lot, where they can stay inside HubSpot and bring all those data from other places inside and work better. So where should we open up more? What location should we open up more? Where you want to put your custom extension, you Want to change HubSpot's UI and get your work done. So we'll talk about that during Q and A as well. And lastly, this is the last bit about how these extensions are built. I'm not going to be going super deep into this. We had one webinar where Dennis took us to the step by step flow of how to build it. But this is mostly about what it takes to build extensions. So we launched CI development tools that allow you to build UI extensions which are Full Stack. Full Stack means there's a front end and the back end, both completely hosted inside HubSpot. For private applications, the mainstream technology stack which we have chosen is front end for react for front end and serverless function which is basically JavaScript functions for the backend and they are all available inside HubSpot, even also for the local development. These extensions, just like any mainstream method of development, you have the developers to have the local development capabilities. Now what means that if you are building something, if you're typing something your code locally, you can instantly see the changes without actually having to Deploy that to HubSpot account. All of the complete extension for Stack Extensions is available for local development. This along with the tools that we provide with CLI, GitHub integration and everything provides complete lifecycle of building an extension from starting from creating, building to testing and deploying and monitoring. That is what CIM development tool set looks like for beginners. I would say you're not learning to be a HubSpot developers, but we want you to be gaining skills that will help you to build your career for the future as a developer, not just HubSpot for developers. That's why the technology stack we have chosen and any choices we make in terms of even APIs are considering familiarity of development practices as well. After hearing everything today you may be like how do I find developers building these extensions? We also have Solutions directory where you can find the right solution partners. If you don't have access to in house developers, you can hire them to customize your account. And this Visions directory contains ways to find partners as well. So that's about what I had today and now I want to now switch to hearing from everybody on what's your top of mind? What are you thinking in terms of your use cases and for custom card what locations inside HubSpot where you think oh I wish I could have put UI extensions a custom card there but you know you don't allow and you know we should be thinking about. So yeah and any other questions I didn't answer.
Great. So yeah we have a lot of questions in the Q and A. Thanks so much both of you for all you've shared so far. But if everyone wants to move over to the Q and A tab we will sort them by popularity. So take a look through there. All you attendees upvote the questions you most want to hear the answers to. Feel free to add more questions there if you don't see one that captures the question you have. And we'll give it like 10 seconds and then I'll sort by popularity and we'll work top to bottom. Most voted with 12 upvotes. Can we expect a marketplace area for custom cards?
Yes, marketplace. Yes, it's very much in the plans and we would be working towards it but no dates or commitments at this point. But yes, we are considering and we are thinking about that.
Amazing. That's exciting. I just sorted again we have with 14 votes. Now Mark asks, hey folks, any plans to create a library gallery of potential UI templates? So it sounds like that's maybe the.
Same thing Amy and I were in the morning talking about just literally the same thing. Yes we have the code samples available for the GitHub repository and I'll see if I can find quickly the link to it. But other than that we are thinking of sample galleries. Right now there is a documentation page that provides a sample projects, all of the sample projects and now that's available in docs pages. But you need to be a developer to be able to use those samples. I recognize that. But at the same time there are about eight to nine samples code samples available and the very first, the meal ordering one that I showed is from one of those samples.
Amazing. Are there any plans to go forward with a file attachment component that would be usable in UI extension code?
You know, it's unbelievable to see this file attachment component coming up as one of the top voted. I would say yes. We I am personally very much aware of all of the use cases for file attachment and that's something we have discussed. There are real limitations in terms of file attachment components in terms of how much, what is the size of the file, what is the network latency that we are not able to right now solve it with the right 100% confident of the performance performance. But at the same time there are workarounds as in like you could use the AMP data component that has a file property type and you can attach files to HubSpot accounts using that file property type and that works. That is available as a solid option. But at the same time if you want a generic file attachment component, that's something it will take a little more time for us to figure out the right technical solution that allows the good performance as well.
Great. What is the benefit of showing properties on cards instead of the left sidebars we did before? Just curious, what are the best practices or if this ever came up in user interviews?
Yes, properties on the left side. But I think the feedback that we often got was in the early stages when we were looking for what custom cards customers would want to build. Some of them were all about I just want to visualize all the properties that are in the left sidebar. I don't want to scroll through it. I just want five properties standing in out in my face. I just want to build a card for that. We decided some of the other teams decided to solve that really out of the box by giving a no code solution that you can pick a property that you want to show and other HubSpot data so all of those visualizations are not available including property list just so that you can not all companies have same use cases. If you care about certain properties a lot more than any Other ones you can show them on top. It's all about your presence in that case. In terms of customization, that makes a lot of sense.
And at risk of bringing my computer to its death, I'm going to open a second tab here and show everyone real quick just what those basic standard cards look like. Because there were some questions around that.
Link to the sample project in the chat.
Oh great, great. But yeah, there are a lot available that don't require any coding at all. So if you just want something basic like a list of properties or a report, oh boy, I can demo it right now. I literally, I have closed every application except for chrome. I have two tabs open and it's more than my MacBook Pro can handle, so maybe someone else should. But there's a huge library and it's always growing. We just added a property totals card. We just did a new. It's in beta I think the ability to customize the full record page all at once before you hop straight to coding anything or hiring a developer, I would definitely recommend you go to this record customization page. If you look at your view here, this is just the contacts page, but all CRM records look essentially the same with this three column layout. If we want to add cards to this middle part, there's this huge library. I don't know how, maybe I should zoom in all different cards here. And if you want to create a card for yourself, you can show association tables, association list data, highlights, which is a collection of properties, a property list, a report card, any single object report can go here. Stage tracker if you want to show lifecycle stages or deal stages and activity totals if you want to do number of phone calls or number of emails and things. These are pretty customizable. This new one for activity totals, you just choose the direction inbound, outbound and it gives it to you. There are the numbers you can drill into them. Just exploring that library I think is worthwhile and hopefully that will give you some ideas if you want something more advanced, like some of the industry specific examples Amy was showing you, then basically sky's the limit for what you can build.
Yeah, I'll pass on to that. Record Page Editor is a powerful tool. If your data is inside HubSpot, there is all the ways it gives you to visualize your data the way you want it for 80% of the most common use cases. And you build custom cards for the rest of the 20% use cases. No, we don't solve out of the box.
Sure.
Great.
Aaron asks, are there plans to Bring this to Pro Licenses of Sales service. We have Marketing Enterprise but that won't allow us to use these cards.
No plans as of now, but packaging changes. Hubbot does do often at times and we would keep you posted if we are changing those plans but at this point, no plans. It is on sales and service Hub Enterprises.
Got it. Are there any courses lessons to learn how to build this in our demo portals?
Yes. Dev Relations team runs boot camps regularly and also YouTube videos available that they make it available for anytime. Academy Teams keeps posting those videos as well. So there is a learning path available for the bootcamp. I'm not sure if Dennis is available to put that information, but I'll find out.
Yeah, great. All right. Do these cards work on mobile?
Not yet, no. No. But keep talking about mobile.
The mobile app has been evolving really quickly lately. A lot of new things has been added there. I would not say it's impossible, but yeah, not today. Do you have a resource you recommend for learning React?
I posted CI Customization Beta page Dev Rel team came up with RTIC blog post for resources for learning React that's available on this page. That's linked on this page. If you're new to React how you would learn React? That one page is like a gold mine of all information. For example, this is a blog post for the ACT Development CMS team. Also CMS products also use React and CRM products also use React. So this one post talks about all of the react development inside HubSpot.
Great. Will the data captured within custom cards be integrated and usable with report functionality within HubSpot?
Not yet. Not yet. There are single object report available just like I showed the Record page editor. You can add single object view reports right now and I'm sure there's more and more plans to add different types of report there where you can just pick and choose reports that form your library and show it on the record pages.
Yeah. And if you build a custom card that people insert information into, in order for that data to be available in a report, you would have to sync it into a HubSpot property somewhere, right?
Yes. We are thinking of Charts component though. Component libraries getting richer and richer. So charts is one thing that's coming up often in terms of different visualization. So we are thinking about and considering building our charts and product updates Page is the best place to keep posted on when and where it's coming. Yeah.
Could the table information in the CRM card be exported to Excel or PDF?
That's very interesting. Not out of the box. I Would love to know the use cases for that, but not out of the box. You can definitely build the functionality with customer development. You can do the export functionality but it won't do it out of the box for you.
Are cards with extensions available as no code development?
No, but I would think the page editor tools and custom card templates you have that provides a lot of no code functionality where if your Data is inside HubSpot anywhere, you don't need to code to show different visualization of it or even take actions. The custom cards part is code first makes sense.
I want to be a better admin. What coding platform should one focus on to help make this happen? If you want to take the developer.
Role in house Dennis, you have the right answer to these questions like recommended one he says learn JavaScript node. Yeah I remember. I think Devil even posted on what are the right skillset for the HubSpot development and that blog post provides if you want to hire a developer, what would you look for? I can find out that blog post as well. But JavaScript and Node is what I would go for and then React beginners.
Also similar to this lovely admin hug, there is a lovely developer hug. If you want to connect with a community and learn from people that would be a great place to go. Where do we create them? Does it require a programmer?
Yes it does require programmer with A knowledge of JavaScript and React is a JavaScript framework. It's JavaScript first development in that sense.
Is this coming to Dashboards? I saw a lot of chatter about Dashboards in the chat.
Yeah, I think Dashboard is one place where we allow putting you ifits for things like Google Slide and everything and a lot of items end up coming into dashboards. I am also hoping I was also hoping that a lot of questions would be about Dashboard. So thanks for confirmation. We are thinking about Dashboard. You talking about it right now just gives us more fuel to think more about it. But yeah, Dashboard is one point where one location I guess that I'm actively considering. You can feel free to reach out to me for what kind of use cases you have for Dashboard. I would love to know what problems you're trying to solve if you had extensions on Dashboard and go from there.
Yeah, I'm curious in the chat if you all want to share the most creative or craziest things you've ever put on a dashboard because the dashboards are fairly flexible with your ability to embed things on them. But there are weird limitations you randomly bump into every now and then. So I don't know if you built a custom card and hosted it on a webpage, if you could then embed that webpage on a dashboard or not, I don't know how far you could get.
Yeah, I would love to know that too. Craziest thing you put on dashboard.
Yeah, or try to and it didn't work.
Says iframes get blocked depending on the service. But allowing some sort of custom card or widget would allow someone to properly.
Handle the authentication flow most likely.
Oh, interesting. Yeah, that's. Yeah.
And one thing I didn't cover about custom card is some of the advanced use cases would require you to talk to the parent pages. For example, if you are updating something in the contact page today, if you're going to build a classic card, you want to refresh the page to see that property refresh put in place. Custom cards give you the library of methods that allow you to interact with parent page and also vendor data contextually so it knows what user is logged in, what portal they have and what environment they have or time zone and render data contextually based on users themes, those permissions and everything they are more contextual and those are more advanced use cases that you can solve with custom cards as well without actually doing no iframes wouldn't allow you to solve that way.
Can custom cards be visible or not visible based on a property? If this company field is X then show the custom card otherwise do not display it.
Yes, you can make the data inside custom cards visible based on the property. The entire custom card being visible or not based on property is not yet possible. But you would see there is a conditional property rendering beta available for non custom cards like out of the box cards that you would build. We might be taking that forward for custom card as well. Not baking that inside the code for development, but giving admins more control on visibility of the custom cards is what we would go with.
Cool.
In the page editor.
Yeah. On CRM cards when will it be possible to rearrange records to meet certain criteria? For example on the contacts card on company put the most important contacts at the top or put the more important attachments at the top of the card.
Amy, you're nodding your head. I was going to ask like repeat the questions but I think you're already nodding your head so go ahead.
Yeah, I think it depends on how you're defining most and how custom that is to your processes. But I know this use case has come up a ton with association tables. So wanting to add let's say a deal association table to a contact record but float to the top of that or auto filter out I should say any deals that have closed more than a year ago or something like that so that the most relevant associations are showing up. That's possible stage uniting. I don't want to speak out of turn. So there are some elements where you can sort of like auto filter association tables. Beyond that I don't know and this is probably where I'll pass it back to you. Sagel I don't know that there's a way to sort of build in like hyper custom logic as to what is quote important or not to float an attachment up or an association up.
No, but that's what I think. Knowing what this person is trying to solve would be helping us to understand and come up with the right solution as well. So I put my email and meeting link to Kariska doing that. Feel free to email me your use cases and if you want my meeting link is there and if you find time to schedule that, do that too. I'm happy to talk about use cases because more and more business use cases help us understand what is the right problem you're trying to solve and come up with the right set of solutions for that. Knowing your problems is the best way for me as a product manager.
That's great. John asks in all caps, custom objects.
And cards you can do it all caps. You can put custom cards and custom objects as well in any of the locations that are available for the Deals Ticket Contacts companies objects. Any other objects you would want to put it though outside of Deals Tickets Contact companies is not possible right now, but tell me about it if you have ideas.
Your good friend Lou says. File Upload field. We talked about that a little bit.
Already, but yes, yes solution again you can use the CRM data component and know there is a property list component available for CRM data component and you can create a file property type as a file property and use that property list component so those files will be stored inside your CRM file property. For now we don't have right now a generic component. Something I'm completely 100, 200% aware of the need. But right now we're trying to solve it in a more performant way. So right now it's not available. This is a solid workaround where you can solve it by storing files inside HubSpot using file property.
File property is way stronger now than it used to be. You can do all kinds of stuff with it. Yeah, Shel says any plans to include ability for individual users to adjust columns viewed in the central custom card indexes would be nice if they could make their own changes there instead of going to the separate View associated contacts linked in the right side column or any plans to give ability to include the View associated contacts link on a custom card under an index table. That was a long question. Did you follow it?
Okay, not the last part, but I think I had to go back to the question to answer. Can I answer this offline when you are taking another question?
Sure, yeah. Yeah. I'll just continue on down.
When was it?
It's from Shell Morse at 11:13am in the Q and A.
Okay.
Antoine asked do you need license for the user also in the tool use as a source in the CRM card.
No unique sales and service hub enterprise.
Tiers to use the cards Byron says I want a canvas component.
Tell me oh the HTML canvas. It has come up a while. I don't have the right answer on yes or no to it, but I get where you're coming from. Byron on more flexibility I think something that I would One of the feedback that we often get about custom styling or anything I would like to know what exactly you're trying to do and what you're missing in the component set and bake that into a component and make expand the library more Canvas is one way to go and we would have to discuss that internally, but right now give me your use cases and tell me what you're trying to do and we can expand the library of components and make it more richer and richer for you.
Okay. We have a handful of other questions that all have kind of one or two upvotes, mostly, I don't know, some industry specific stuff. One piece of advice from Bob that ended up here in the Q and A is instead of I'll read it just repeating what I said before. I'd not specifically dive into learning JavaScript from scratch, but instead learn how to think in its concepts so you can brief AI to write it for you. So that's an interesting approach, especially for an admin person. If you can just understand what sorts of things can be done and the sort of logic required to do them. Especially for a simpler card. I think that's a very that's a fine way to get started.
Yes.
Okay, well I think we can wrap it there. Thanks so much for being here. Any any last thoughts from either of you before we shut it down?
No, it was a lot of fun to do this. Thanks Kyle for organizing and thank you all for asking all the questions. I will make a forming the point of joins Pocket here. I didn't know about this, so I'm going to do that. But feel free to push post your questions on Community or reach out to me or anybody in HubSpot with more use cases. Thanks.
Amazing. Thank you so much. Amy, any last parting words?
No, I just want to second that we hear everything you guys are saying. And I think more than any other feature that HubSpot put out, your ideas are really valuable because the entire idea is to reflect them back in the tool. So keep the feedback coming.
Amazing. Thank you both so much. Thank you everyone for being here. This has been recorded and we will share the recording out with you afterward. And yeah, hope you all have a great Tuesday, great rest of your week, and hope to see you all back next week.










