What's new with App Card Components

This is a YouTube video titled "What's new with App Card Components" created in November 2024. It features a presentation and Q&A session with multiple speakers including Dennis, Achal, Amelia, and a host/moderator. The content focuses on developer updates, the introduction and customization of HubSpot app cards, the use of a Figma design kit for UI design, and new UI components like charts. The session is aimed at developers and designers interested in enhancing user experience and integrating workflows within HubSpot CRM. The format is a structured webinar with presentations followed by audience questions.
Hello Internet, how are you doing? So today we have an amazing topic app cut components and you already saw the today's speakers. So let's just proceed with the agenda introduction obviously. Then Dennis will take the stage with a few developer updates. After that, Anchor will talk about AppCards in general. After that, Emilio will talk about the Figma design file and how you can use it. And after that it's what's new with AppCards. And last but not least, the Q and A. So if you have questions, drop them in the chat and we will answer them at the end. And just a quick look out for the next events. So the next one will be on 21st of November and will be about developing leaders, so how to build and manage developer teams. And it's going to be a roundtable discussion. So just a quick chat with amazing people. And after that the last, most likely last session this year will be just a conversation session and the date will be announced very soon. So Dennis, the stage is yours, my friend.
Thank you, kind sir. I'm going to take over the screen share and let's talk about what's happening in the HubSpot development world. First up, guess what? Developer Feedback, it's getting a new look through all these slides I have up here. There's going to be a QR code. Also in the YouTube description there should be a link to the slide. So if you don't like to point your phone at the screen and take pictures of it, that's totally fine. And I get it, you should have the links there as well. Anshul's presentation will also be there, just so you know. All right, Developer Feedback. Yeah, I know it's hard and we're trying to make it better. We're trying to streamline everything for everyone so your feedback is heard and we can actually action it. So go to this. Have you have thoughts? Go ahead and throw them in there and we will deal with them. Moving on, we have custom Events API that is now supporting batch Create endpoints. Amazing. As well as multi value enumeration properties which really expands the capacity. What this can do. Now in beta we had the Campaigns API, we had the basic Create, read, update, delete functionality there you can also view and associate remove assets associated with the campaign, et cetera, as well as retrieve the campaign analytics. That's right. We're bringing more APIs to you every single day. That's a lie, but close to it. Also, this happened a while back, but I thought I'd bring it back back to your attention for all the People who have a HubSpot account out there and they have a developer and they don't know what to do, so they just go ahead and assign that developer the super admin role. No longer. You don't have to do that. We have specific developer permission sets for the developer and if those aren't appropriate, you can update them with the developer role based permission template. So get at it. Next up, a few breaking changes starting on December 1st. And you should probably already have this going on for you anyway. But if you do not have the correct scopes for the app card that you're using on an object, the project you used will upload will fail. Anything up there now is going to work. But if you try to upload a new project, that will fail. So for example, if you have a rec or a contact, you have an app card on a contact record, you need to have the contact dot read scope. At least that starts December 1st. So take care of that now so you know you're not caught off guard. November 20 Legacy calculated properties will be replaced with a new set that starts with the prefix hs_v2_ all the data that was in the legacy properties should be backfilled into the new properties. So your integrations just need to update where you're pointing those to. There are small changes. Go ahead and hit that QR code or find that link for to see how more details to IT events. If you haven't noticed, we're doing a few more things out there lately and this is coming up soon in. Well, they say New York. It's a lie. It's in New Jersey. The React summit November 19th through 22nd. Our own Brie hall will be presenting. I believe we're gonna have a booth there. So if you are in town, please, please do stop by and say hi to the friends. And then you're probably saying to yourself, Dennis, I've heard all these things and that's good because you probably subscribe to the developer's changelog. All the things I just said earlier has already been in the change log, but not enough people subscribe to it, so subscribe so you know exactly when something important happens. When something breaks, we put it up there and we make sure we have enough time for you to make the changes necessary. We do now have a LinkedIn profile as a matter of fact, I bet you a few of you are actually watching this via the LinkedIn page. So go ahead and subscribe to that. This QR code take you there. Obviously you're on YouTube. This should be the simplest thing for you. What do they say? Hammer the like button, mash the subscribe button. All those other words that, you know, YouTubers say, just subscribe to the page. It makes me happy and oh my God, I'm so happy. This is something We've done three episodes so far. The developers after After Dark is happening. Yes, it's a great podcast. You can subscribe on the YouTube channel. Also, if you just look at your itunes or what do you call Apple Music? I don't know what they'll call it now. You should be able to see the audio version of it elsewhere. So wherever you get your podcast. With that being said, I have nothing more to report. I'm going to hand it over to Anshul, who is going to blow everyone's minds. So let's get at it.
Thank you so much, Dennis. So excited to be here. And I realize I haven't heard the word itunes in a very long time. So thanks for jogging my memory. It's lovely to see you all. Some old friends, some new friends, and we're very excited to be talking about app cards, customizing the CRM and what's new. Let's get cracking. Amazing. First of all, my name is Achal. I'm a PM on the UI Extensibility team and along with Amelia, who's my product designer counterpart, today we're going to be talking a lot about what are app cards generally. I know we have some new folks, some experienced folks in here. How do we design these app cards? What is the Figma design kit have to do with it? And today we'll be having a design kit demo for the very first time. And finally, what are our newest UI components that we've released in the last couple months? Let's get started. But I do know that we're a lot of people from many different walks of life. We have admins, developers, people who are just generally interested in CRM. But there's one thing that isn't common among all of us. It is that we deeply care about the user experience. And it matters a lot to all of us because it can help us save time in terms of onboarding customers faster, saving cost in that way too. Productivity can improve with a good user experience. More deals, more tickets. We love to see that. And finally, customers truly value a great user experience. They keep coming back for more. We have so many products that we use personally just because of how awesome the UX is. So how do we create that? And that's kind of the theme of this developer hug today. But before we start, let's jump a little bit more into what is UX sensibility like, what does it mean when we hear these words together? The way I think about it, it's kind of like opening up a blank canvas within the HubSpot CRM. So imagine that this is, this is currently the record page, so you'd be able to edit and add your own custom components, being able to add your own custom information in there so you get the right information at the right place, what this might look like. For example, as the developer, I want to put in something like a survey in here. I can do that, just pop like that. And all of this looks like it's native HubSpot, but it is actually HubSpot APIs that are added onto these UI extensions. Now let's talk a little bit more about just overview logistical things I want to get done because these are questions I always get and we want to make sure we get to that. When we hear app cards, app guards, UI extensions, exact same thing, no difference at all. When we think about private app cards, those are the ones that have been in beta for a long time. We've had them essentially it's like a one on one situation. So you can create them and they can be visible in your own account. When you think about public app cards, these are the ones that we launched recently at Inbound and these are one to many. These are the ones that you'll see on Marketplace and can be installed in a bunch of different customer accounts for the access levels of each of these. And you'll have access to these slides later. So definitely like it to these. But essentially private apps can be built by sales and service enterprise as of today and public apps are free for developer cons. Now that that's clear, let's talk a little bit more about app cards. App cards, as we mentioned earlier, there's these extension of the HubSpot CRM. They're also based on React. An example of what this might look like. This is one of our sample projects, which is a great way of getting started. This is a sweet green little menu situation. All of this is built within HubSpot on top of HubSpot. I want to show you all the different possibilities of what can be built. Let's look at some of the stuff that our customers that you all have already built. So number one, we have novuslang, which is one of our solutions partners. They've created this application to reduce their data duplication across their different systems. It helps them bring all this information from their external system into HubSpot. They can keep their customers in HubSpot longer too and have these actions happen super quickly, which we love to see shout out to them. I think Lou is also in the chat, so definitely say hi to him also. Not just solution partners, we also have a bunch of app partners. Quotapath was one of the apps that was demoed a lot at Inbound and you might have seen this, but essentially there's a lot of complex interactions happening here. We're thinking about panels, but a lot of different kinds of multimodal information that can be given to reps at the right place to give that informative view. Let's talk a little bit more about what is the value of an app card. Number one, you're seeing all these different pieces of data, putting all that information together within the HubSpot CRM. That's number one. Number two, faster time to action, lesser clicks. I know, I hear this so much. Clicks, it matters a lot. A lot of these things, they multiply over the number of customers you have and you want to make that every single action as productive as can be. So with a good UI extension flow, that can definitely happen. Number three, write data at the right place, incredibly important. And number four, we're talking earlier about that user experience, that deep crafted user experience and that is something that we hope to enable with these app cards as well. So what are the different kinds of use cases that we're thinking about when we're thinking about app cards? We've seen historically like CPQs, we've seen inventory, we've seen project management. There's a wide possibility and huge array of things that can be done. But I do want to ask, since we have such a good and diverse crowd today, let's hear from you. If you had the ability to build anything at all in HubSpot, what would you want to build? We have no wrong answers. Please put it in the chat. This is also secretly our way of knowing what you all want to build. So it's helpful for us in the future. But as you all are thinking, there's different places that this can go, right? It's the record page. It can be in the sidebar card anywhere at all in HubSpot. But what do you want to build? Also, I hope my friends are looking Bitcoin minor. Okay, Blue sky, let's do it. Notification. That is definitely a good one. Oh, Dome. I have actually seen someone build, I think Wordle as well like in the HubSpot CRM that was pretty interesting. Asana integration, definitely more on the project management side. Yeah. So we're loving to see this. There's a huge array of possibilities. Third party apps, ClickUp integration, custom pricing, calculator. 100%. Yeah. There's a lot of different problems here and very creative solutions that we all brainstorm a lot. So let's dive into some of these examples of how components can be grouped together for achieving use cases like this. Right. So a couple ways that components can come together. One big theme that we've seen is thinking about the progress of a particular action. What's the recommended next action? So we have progress bars, we have ban rules, we have the ability to put in forms in there for next steps. Number two, I do see a lot of these inventory. So a lot of us have data in different spaces. How do we keep that together? Maybe keeping HubSpot as a source of truth, maybe having that information synced and ready and fresh. So that's definitely. This is the table component with the status tag in there. And number three, data is a big theme and you'll see data and design. These are two important themes of this presentation today, is that how do we extrapolate that information, how do we make it simple to figure out what are these trends, what are next action items based on that? These are just a very few of these possibilities. We have 40 plus UI components. We're always adding to this library with your help also. And this is what kind of APIs and different components look like. And while we know that putting all these components together is a craft, it takes time, it takes effort, it takes energy. And as a developer, we know that you're never working alone, you're working with your PMs, your designers, with HubSpot to kind of make this a reality. And we really appreciate that and we're always looking for how do we make that process better. One thing that we've been hearing loud and clear from you all is while making these UI extensions, there's been a lot of back and forth. Sometimes it's wasteful, sometimes it's scope creep because developer will go and make something, show it to their client and then the client like no, that's not what we want to go back. There's that wasteful element to it which you wanted to avoid in some ways. And we heard that your clients want to be hands on. They want to be able to see what they're going to get, get that alignment before. And so very recently we launched our Figma design kit which makes developers lives easier and faster. That is the hope. And with that I do want to pass it on to our designer Amelia to talk more about how to use this.
All right, thank you, Achal. I'm going to get started talking about the design kit. Yeah, like Achill said, the goal of this kit is really just to make developers lives easier. I'm going to go into a little bit of the purpose of the kit before I start the demo. So just to reemphasize, it's a really easy, no code way to create app card designs before you have to actually invest time into building them. So it creates the opportunity to agree upon those visuals with clients and any other team members before you actually start developing the app card. It also has all of the design options available that are available within the actual components. So you can see the different customization options in Figma that are actually real customization options. For example colors, different design variables that actually exist within HubSpot exist in the library and you can test it out in different layouts, which is great. I'm going to hop into the demo now. Let me just pull open figma here. So this is the library itself I want to emphasize before I get into this. Figma might be kind of intimidating if you're not a designer, if you're new to it, but it's actually very easy to use. We've had a lot of developers, had great success with it, not have any issues onboarding into this tool. So the first thing I want to say about the demo, when you open this file yourself, the first thing that you want to do is go over to this left hand side where you can see the title of it because you'll only have view access to it. So what you're going to need to do to actually be able to edit the file yourself is go ahead and duplicate it. This is the most important first step that you have to take to get the most usability out of this library. So I know some people have come in and opened the file and just copied and pasted into a new file, but what we want you to be doing is duplicating it. So I want to emphasize that right off the bat I'll go through a couple of these first few pages of the file before I get into the actual demo. This is just some background into the library, an introduction, and this is where you can come to leave feedback. So if you're new to the library or if you've been using it for a while and you just didn't know that this was here, this is where you come to submit any feedback ideas that you have that are specific to the library. So I just want to call that out. Next page down, this is where you can see the locations and the card anatomy section. So we have the different layouts here for a few of the locations that app cards appear within the product. So you can have, you know, a center column app card, you can have it show up on the side here. So we have a lot of different options here for when you're designing your app card. This makes it really easy to just pull in the background of what it might realistically look like on the page. And then the change log is another new addition. So this is something that we've added just so people can come in and see anything that's added recently been added to the library. Recently we have added modal status, tag, loading button and charts. Those are some really exciting additions and they're highly requested. So this is where you can see when those were added and any link to documentation. And then if you scroll down, this is where you can see all of the components that we have available. And these are all reflected in the developer docs as well. But this is where you can go into each one and see what the component looks like in Figma and start playing around with it. So the first thing that I'm going to do in this demo, I actually have a page kind of pre created just to be ready for this. But if you wanted to come in and create your own page just as a playground, you can click Add new page here. And I pulled in some of the background layouts that I just showed you on the card anatomy page just to be ready for this, to start building an app card. So the first thing that you're going to do to get the most best usability out of these components is click from the File tab here on the left hand side to the assets page. And this is where you can see again all of these components. I'm going to start with a really simple one, so I'm going to start with button. Just to show you an example, I just clicked into button and I'm dragging it onto the page. So you can see here that it's selected because it has this purple outline. And once you have it selected, there should be a panel that shows up here on the right hand side so you can see where my cursor is. This is where it shows you all of the different customization options. And like I said, these are actual customization options that are available in the real components. So you can see all the different options that are available to you. I'm just going to play around with a couple here to show you. Right now we have it set as a secondary button, but if I decide I want it to be primary, I can do that. And you see how it automatically changes the color. It makes it super, super easy. Change it to destructive. If I had copied and pasted this in, I wouldn't have these options here and I would have to manually change the col. So I can really easily. Like we have all of these kind of preset here. I can change the size automatically changes while retaining the type that I chose, switch it back to primary if I want to. And then we have a couple different states here. You can have an active button, you can disable it or set it to hover. I'm going to go back to default for now. And then we have a couple different link types. So right now it has no links within the button, but I can set it to have an external link. And this just automatically updates. I didn't need to bring in that icon or make any manual edits here. And I can change it to drop down as well. And then obviously we have the text here. You can click into the button itself, but this makes it even easier. I'm just going to type something in just example button and that automatically updates. So that is a very basic example, but I want to show you something a little bit more visual, a little bit cooler. I just clicked into line chart here on the left hand side. And this is where you can see all the different options that are available for line charts. So I can do stacked, I can do not stacked. And then I can choose if I wanted to have a legend. So this one is a little bit more advanced, but same thing, I'm going to drag it in, drop it on the card, Just align that a little bit. If you pull it around, you can see those red lines show up and that kind of helps you align it to the title and the footer of the card. So this is just the default line chart and same thing as the button. If you drag it in from the assets panel, that's very important. That is the way that you're going to get this panel show up on the right hand side. So the options with the line chart, I can play around with the lines here. Four lines is just what the default is. But I can, if I decide, you know what, for this example I want to, I can do that. And it automatically updates. I can turn on and off the chart title. I Can change the name of the chart title automatically updates. I can turn on and off the Y and X axis labels super easy. Change the names of them as well. And then this is really cool. I can change the color of the lines and these are the actual color variables that are are basically HubSpot like preset chart colors. So we have all of these automatically loaded in here. So just choosing line one, I could decide, you know, I want it to be dark aqua, I want it to be pink maybe. And then I can do the same thing for line two, I can decide I want that one to be orange. And it automatically updates the legend bubble as well, which is great. And same thing here, you can change the title of the legend items. So that is a little tutorial on line charts. I just want to kind of re emphasize we've seen developers have a lot of success with this library, saving them a ton of development time and really easy to onboard into. If you use it correctly, you can have a ton of benefits to it. So I'm going to hop back over to the presentation. I'm done with my demo. I'm just going to touch a little bit more on the library, the docs lines just to wrap this up. If you're having trouble with any of the components not, you know, maybe you're not sure how to use it in a design context. We do provide documentation and guidelines for each component in the developer docs. The developer docs is also where you're going to find the library. So I just screenshotted. I believe this guidelines are for button. So we give you do's and don'ts. So if you have any questions there like that should help clear up some of your design questions. If you're not a designer. Yeah, so I have kind of mentioned this already, but we have seen this library have a great impact on saving development time. It also helps to just put the user experience at the center of the app cards. It makes it much easier to design a good experience and improve the usability of the app cards. While we're providing access to the native HubSpot UI, make your app cards look very HubSpot Y, which is great. Then just to wrap up the future of the library, the goal is to make the library public to everybody within the FIGMA community. That will increase the accessibility of the library, hopefully the usage. We have seen the usage increase a lot as we've made it more available, but as we increase the usage, that will in turn increase the quality of the app cards ideally. So the timeline for this goal is by the end of this year. So that'll make it really easy to find it within Figma and download it into your tool. And that is it for me. I'm gonna pass it back to Achille.
Thank you so much, Amelia. That was great. And I'm so glad that we got to see this design kit because I've met a lot of developers and sometimes, you know what, Figma seems scary, but it's not actually. We've seen a lot of people go from zero to 70 in just a couple of days and there's a lot of good benefits to it from there. So super excited to see what you all have built and also I think a lot of the good chart buttons in the chat are setting me up very well for what's new with these UI components. So let's get into that. So over the last couple, I guess, like honestly, last couple of years we've been seeing a lot of data increase just overall, on an average, organizations may have up to 400 different data sources and I'm sure you're seeing that with a lot of your different places that your reps need to go to. How do we unify that? That's been one of the main HubSpot goals recently. And so as we saw with this demo, we just recently released line chart and bar chart last month. These components are super close to our hearts because we know that you all have been asking for this for a very long time. These kind of components help with decision making, it helps with strategy, it helps make sense of all these 400 plus different places we have info from in this session. I will say that we're not focusing on the how, but more on the why and the what of these components. We find that tutorials and samples are better ways of like thinking about the actual code. So I will highlight that YouTube tutorial as we. I've linked this at the bottom and chart sample for like boilerplate code is a great way to get started. If you're feeling inspired after all of all of this conversation, let's talk a little bit more about how these charts come into being. One main thing is that these chart components help visualize external data. So the data can be essentially any source from any source. The only thing is that it needs to have a particular kind of format that is highlighted in our developer docs. So some examples we have over there. We also have the engineer who worked on this in the chat, so feel free to shout out so we can answer some of those questions there as well. We also have the ability to stack in these charts and line and bar charts. I've seen that for decision makers, stacking is important in terms of identifying complex data in terms of identifying trends from subgroups. So that is definitely also feature add on. Another use case for charts can be anomaly detection. Thinking about what didn't go as expected, what are next action items based on that, I'm sure your wheels are already spinning in terms of different components that can come together to make this entire big app experience to leave you all with some more just use cases across different kinds of products. We've seen these charts being used in CSAT scores, support ticket volume, thinking about which products are doing better. Why Sales, performance forecasting and there's a lot of different use cases in there and I was seeing a bunch in the chart, sorry in the chat as well in terms of deals and tickets and there's a lot of lot of more things that we can do with this here. So essentially the whole point of these chart components is to be able to unify this data, make your app cards more data driven, visual dynamic and help the users of this make more informed choices. The Pro bonus Small things that I know we all always get questions about customizing colors. This is finally possible, especially with the different colors that Amelia mentioned. We can do access types, tooltips. There's a bunch of different features that you can put a bow on the charts with as well. Cool. So that's the charts, other components that we've had in the last couple of months in case you missed it was copy to clipboard, action loading button and status tag. So these are the three couple main ones that we've had over the last couple of months and we're always looking to expand this library. We know that everything is not possible today, but your feedback is appreciated. We're always, always adding on based on that. So feel free to drop anything in the chat. I already saw a couple like file upload comments and that and we always appreciate it. It helps add more information to our use cases.
Cool.
So let's talk a little bit more about our main takeaways from today. So number one, app cards help integrate HubSpot into integrate your own workflow into HubSpot. It helps kind of get that information where you want it. Now we have tools number two to be able to design app cards to unleash that creativity and to get that alignment with stakeholders. Number three, line chart and bar chart for visualizing data. And there will if you have any kind of charts that you would like to build and are not able to build. We also want to hear feedback on that as well. We've heard pie charts and that kind of thing, so want to hear more from that. And number four, as Amelia was alluding to, we know that right now we've given design tools. We also hope to give more design opinions about, like where should the button go? What's the best way of placing out a form and those and more to come on that front as well. Thank you all so much. I just want to end on the note that user experience is how we win. It's our usp. It's how we build that crafted ecosystem together. We have a huge opportunity to make all these products super easy to use for our customers. Thank you all so much. I'm linking a couple of resources in here for you all to come back to. We can move into the Q and A tune if you're ready.
Yeah, definitely. Well, thanks a lot. That was an amazing presentation. We have one question from SJ in this case and it is for you, Angel. What's your favorite use of the UI so far?
Yeah, that's a great question. I actually answered that in the chat as well. But I'll say it up again. We had somebody make a wordle and Minesweeper out of it with these creative use of components, which I thought was really, really fun. That was a fun one. But the actual serious use case, I think product galleries, images. I really love seeing all these different components come together. So those are always my favorite ones to see.
Yeah, I can imagine. It really shows that the possibilities are quite limitless when you're leveraging the different UI components. Second question. Do you have any suggestions on how to create a HubSpot like UI?
Oh yeah. Amelia, do you want to take this one?
Yeah, totally. That's something Achal and I are actually working on right now, is expanding our design guidelines so that we have more specific native to HubSpot guidelines. So that could be for like forms or modals or empty state. Those are the ones that we get the most questions about. And so I guess it would have to be. It would be tricky to give like broad answer to that. If it was about a specific component, it might able to speak to that a little bit more. But I guess what I would say is within the HubSpot product, I would go through and look for as many examples as you can to. For what you're trying to do to. To see what HubSpot native language is and then obviously you can reach out to us on Slack and just pretty much Stay posted for what's coming from me and Achal. We're going to be providing more specific guidelines for individual components, but also any questions you might have, you can probably find some guidelines about that on the docs as well.
That's awesome. And about the charts, I mean we have line charts now, we have bar charts. Everyone loves a good pie chart. Any plans on extending the positivity with. With the charts?
Yeah, that's an awesome question. We're not done yet. We don't think we are. This was just kind of the MVP in terms of line chart and bar chart. We were seeing the most common use cases on it, so we started off with those ones. We hope to add some more eventually depending on the use cases we see. So based on the ones that we're seeing right now, always let us know if you have specific ones on your mind and that helps us get more information to form a case for that. So that is the long winded way of saying we hope to add more at some point.
Awesome. I think the final question I have myself is we've been building cards for quite some time now, but the UI can get a bit tricky as a developer, right. Building a really user friendly solution for your clients. So we're trying to come up with a way to include our UX designers in the projects that we're doing and I think the Figma kit is a great starting point. However, what basic knowledge do you think a designer should have to start working with the Figma regarding HubSpot and different components that are available?
Yeah, I think if you are a designer, I guess if you're new to Figma, all I'll really say on that is it's really very user friendly, it's very easy to get started on and we try to make it as easy as possible with the way that we've set up the library as well, having the pages organized in a specific way. And yeah, if you're a designer, I would say just like practice makes perfect, more time you spend in Figma the better you'll get at it. And it honestly is a very, very easy tool to use and we try to make it more so and provide as much guidelines as possible within the library and within the docs.
Yeah. And on the HubSpot knowledge, do you think that a basic HubSpot knowledge is necessary to start working with UI components as well?
I don't think necessarily. What would you say, Achal? I feel like we have all the components there, so we're giving you the building blocks. So I don't necessarily think you need to be very well versed in HubSpot UI.
That is perfect. Cool.
I'd like to add on to that. It definitely helps to have that familiarity with the HubSpot interface, just in terms of that kind of thing. But as Amelia mentioned, we're always looking to add more so that we know that not Everybody's Expert with HubSpot. And that's not the expectation. It's just about like, what are the places? How can we get it to be more intuitive? How do we get the same secret sauce to be going on with our app cards as well? So we'll be adding more there. But that is a really good question.
Yeah. And that's why I would also add. That's why we have the layout page where you have the actual native HubSpot HubSpot layout as your background. We make that available to you. So even if you aren't familiar with HubSpot, you have those like background pages to build on top of. So we're setting you up for success in that sense.
Perfect. That's awesome. I think we have a few more questions dropping in. Harrison is asking will we get more customization in the future around layout? Because currently it's based on Flex and Box components. Randy gave an answer, but maybe you can shine your light on that as well.
Yeah, that is a great question, Harrison. Thank you so much. Because this is something that we are actively discussing. We know that Flex and Box are sometimes not enough, especially for complex layouts. We in fact are going to be discussing after this a little bit more in detail of how to make this experience better. So stay tuned. It is something that is actively on our radar.
Awesome. Another question from Vidit. I recently joined the company and I got tasks in which I have to pass data from react chatbot to HubSpot. I think this is a question that I'm going throughout to developer Slack as well. We have a lot of people there available who can answer the more technical questions. Unless you have an answer for that as well.
No, I think that's a great idea. Developer Slack is a great place to put especially coding specific questions. Our community is huge and we always love to help our with specifics there.
Cool.
Santiago is asking will you get extended to other parts of HubSpot such as the sales or prospecting workspace, y'.
All. These are such topical questions such like really like hitting the nail on the head with these questions. This is the plan for next year. Our goal is to improve app cards and the surfaces that we're giving right now we have to start small, but we're hoping to build on them. We'll be doing that incrementally and with very specific like use cases in mind. So I would highly recommend if you have any specific use cases, for example sales prospecting. We've heard also about dashboards a lot. I would, I would encourage you to put those use cases in the Slack or like send it out to us because this helps us think about which are the main ones that you want to use, especially with workspaces. So please send us more information there. And our plan is to expand.
Awesome.
Obviously you can reach out to us on Slack and just pretty much stay posted for what's coming from me and Achill. We're going to be providing more specific guidelines for for individual components, but also any questions you might have. You can probably find some guidelines about that on the docs as well.
That's awesome. And about the charts, I mean we have line charts now, we have bar charts. Everyone loves a good pie chart. Any plans on extending the positivity with with the charts?
Yeah, that's an awesome question. We're not done yet. We don't think we are. This was just kind of the MVP in terms of line chart and bar chart. We were seeing the most common use cases on it, so we started off with those ones. We hope to add some more eventually depending on the use cases we see. So based on the ones that we're seeing right now, always let us know if you have specific ones on your mind and that helps us get more information to form a case for that. So that is the long winded way of saying we hope to add more at some point.
Awesome. I think the final question I have myself is we've been building cards for quite some time now, but the UI can get a bit tricky as a developer, right. Building a really user friendly solution for your clients. So we're trying to come up with a way to include our UX designers in the projects that we're doing and I think the Figma kit is a great starting point. However, what basic knowledge do you think a designer should have to start working with the Figma regarding HubSpot and different components that are available?
Yeah, I think if you are a designer, I guess if you're new to Figma, all I'll really say on that is it's really very user friendly. It's very easy to get started on and we try to make it as easy as possible with the way that we've set up the library as well, having the pages organized in a specific way. And yeah, if you're a designer, I would say just like practice makes perfect, more time you spend in Figma, the better you'll get at it. And it honestly is a very, very easy tool to use and we try to make it more so and provide as much guidelines as possible within the library and within the docs.
Yeah. And on the HubSpot knowledge, do you think that a basic HubSpot knowledge is necessary to start working with UI components as well?
I don't think necessarily. What would you say, Achal? I feel like we have all the components there, so we're giving you the building blocks. So I don't necessarily think you need to be very well versed in HubSpot UI.
That is perfect. Cool.
I'd like to add on to that. It definitely helps to have that familiarity with the HubSpot interface, just in terms of that kind of thing. But as Amelia mentioned, we're always looking to add more so that we know that not Everybody's Expert with HubSpot. And that's not the expectation, it's just about like, what are the places? How can we get it to be more intuitive? How do we get like the same, like, secret sauce to be going on, like with. With our app. App cards as well? So we'll be adding more there. But that, that is a really good question.
Yeah. And that's why I would also add, like, that's why we have the layout page where you have the actual native HubSpot layout as your background. We make that available to you. So even if you aren't familiar with HubSpot, you have those like, background pages to build on top of. So we're setting you up for success in that sense.
Perfect. That's awesome. I think we have a few more questions dropping in. Harrison is asking, will we get more customization in the future around layout, because currently it's based on Flex and Box components. And Randy gave an answer, but maybe you can shine your light on that as well.
Yeah, that is a great question, Harrison. Thank you so much. Because this is something that we are actively discussing. We know that Flex and Box are sometimes not enough, especially for complex layouts. We in fact, are going to be discussing after this a little bit more in detail of how to make this experience better. So stay tuned. It is something that is actively on our radar.
Awesome. Another question from Vidit. I recently joined the company and I got tasks in which I have to pass data from react chatbot to HubSpot. I think this is a question that I'm going throughout to Developer Slack as well. We have a lot of people there available who can answer the more technical questions. Unless you have an answer for that as well.
No, I think that's a great idea. Developer Slack is a great place to put especially coding specific questions. Our community is huge and we always love to help. Aha. With specifics there.
Cool.
Santiago is asking will get extended to other parts of HubSpot such as the sales or prospecting workspace.
Y'. All. These are such topical questions such like really like hitting the nail on the head with these questions. This is the plan for next year. Our goal is to improve app cards and the surfaces that we're giving right now. We have to start small, but we're hoping to build on them. We'll be doing that incrementally and with very specific like use cases in mind. So I would highly recommend if you have any specific use cases, for example sales prospecting. We've heard also about dashboards a lot. I would encourage you to put those use cases in the Slack or send it out to us because this helps us think about which are the main ones that you want to use, especially with workspaces. So please send us more information there. And our plan is to expand.
Awesome. And I think that were all the questions for today. So thank you so much for the amazing presentations. Again, like they said, make sure to join the developer Slack. A lot of documentation is available and the slides that you saw today will be shared as well. If you want to stay tuned with all the new webinars that are dropping in in the next coming weeks, make sure to navigate events.HubSpot.com developer and become a D Hog member. And I think that's all for today.
Yeah. Thank you all so much. Love you. And we'll see you in Slack. Take care.
Thank you.
Bye bye.










