HubSpot Academy Office Hours | Dec 2 2021

Right now we are recording this meeting so that they can go ahead and watch this back at another time. That works for them.

Yeah, HubSpot might be a popular answer here.

Yeah, for sure.

Loving the CMS these days. Lots of good features.

And if you're using HubSpot, tell us what your favorite feature of the CMS hub is or what you've been mainly focused on using on the CMS recently.

Or you can tell us what you've been working on lately. Just the sorts of things you're building these days. We'd be curious to know.

Yeah, we love to see everybody's different projects that they're working on and what kind of different solutions that they're coming up with to solve their creative problems. Quote templates Very nice. Very nice. NEOs plus Pimcore plus Unbounce plus a lot of different stuff. Darrell is really liking the landing pages. Awesome. Awesome. Very cool. Favorite feature Module fields. Module fields are super helpful and they can be used in so many different ways. They're very cool.

Modules are so great. Just really letting you reduce your code repetition and just really work a lot more efficiently. Really awesome.

Let's introduce ourselves. My name is Brooke Fisher. I am a developer professor here on the HubSpot Academy team. And welcome to Office Hours.

I'm Ben Brophy, also a developer professor, HubSpot Academy. Thanks for joining us. We have some things prepared, but we can also use this time to just answer your questions or just chat. So we're, we're kind of just, you know, we can make it whatever we want to be, want it to be.

So going off of that today, our agenda, we are going to go over some recent product updates that we think are important. We're going to talk about what we're currently working on in the HubSpot Academy and then we're going to do some Q and A and we've got a short activity at the end. So Ben, why don't you start us off with the recent product updates?

Yeah, definitely. So, yeah, these are just some recent product updates that Brooke and I have sort of looked at and just thought it would be cool to share. There's lots of things that the product team are up to, so it can be hard to keep track of everything that goes on. But these are some really cool updates that we thought we should highlight. So private apps are open to the public now. It's basically an alternative to API keys that's a bit more secure. It kind of combines the best of OAuth and traditional API keys. So that's a really cool addition. And then, yeah, reusable sections. Cheryl, you said module fields is one of your favorite things. I totally agree. And then reusable sections is kind of a similar idea, just helping you reduce code reuse and just make your code a little bit more clean. So these are both things that we'll go over here just as a way to highlight these things and maybe you'll find some of it interesting.

Yeah. So if you haven't played around with private apps, I'm going to be going over those. The first thing that I'm going to do is I'm just going to show you how that you can create your private apps within the HubSpot Academy. Within the HubSpot Portal. All you have to do is go to your HubSpot account settings and then under here, under integrations, just like where you'll find where to get your API key, there is now a section for private apps. And when you're here on the private apps, all you have to do is click Create a private app and then you can give it a name. So I'm just going to call this Private App Demo and then what? The best thing about private apps is that they are scoped so you can set different private apps to have different access to different features within your HubSpot account. Unlike with API keys, where the API key gives you super admin access to every feature and private apps, you do add your scopes so that your private app will only have access to certain parts of your CRM. And so today, for our purposes, I'm just going to be using the CRM objects, contacts, write and read. That's all we'll need for this. But like I said, there's a whole bunch of different ways that you can set this up. You can give it only read access, you can give it write and read access, and you have lots of different things that you can work with. And then all you have to do once you've picked your scopes is click Create App and it will say continue creating. Be sure to only share this token. Just like with any API key, you want to make sure that this doesn't go into any sort of online repo because you don't want this to be leaking out onto the Internet. So we'll just click continue creating. And so now our private app was created and we have our private access token right here. So then I'm going to copy this and right now I'm going to skip the private App Store. But if you want that private app store, you can Go in and create your own private app in your own account. And this is your private apps page here. You can actually change different things. You can rotate out your scopes. If it's been a while, like maybe a few months, and you need to change out your access tokens, you can do that here. If you've forgotten what your access token is or you didn't copy it, you can go ahead and show the token here and then recopy it. And one of the great features about private apps is that you can see the logs here so that you can see what requests have been made on the actual private app access token. And that will help you know how many private app logs you've been calling and you can make sure that you are underneath your daily limits. So now we're going to go over. I built a really quick little note app for us to use this. The two packages that I'm using here are just Express and I'm also using the HubSpot npm client. So you can go ahead and download all of those through NPM and install those locally. And so all we have to do here is you have to just set up this constant HubSpot client here. If you're using the NPM client, you can also use a different node package such as Axios if you want to go that route. But I decided that I wanted to use the API client. What you do here to set your access token is in this constant HubSpot client. You create a new instance of the HubSpot client. And then here your access token, all you have to do is just paste in your access token here and make sure that you send along the headers of content type with application JSON as the value. Then here I you can just go straight onto the developer documentation and copy all of these constant limits after properties, associations and archives. Then it'll also give you this try catch that you can download. What this is doing is this is just calling all of the contacts that we have within our CRM. Like I said, I'm using Express, so it's under App get. And then to start it up, I'm going to just make sure that I save it and. And then I'm using nodemon, which is a really helpful piece of software that you can use whenever you're building node apps. And then it'll run your local host and it will also update and refresh your page if you make any changes to your code. So let's just go ahead and do that. And once our node index JS is Starting. Let's go and look at what we've called. What I'm doing here is I'm just sending the results from the API response as I'm res jsoning it onto the page so we'll be able to see it rendered out in a JSON format. Let me just go over to that. Let's reload this page because now we've got our localhost running and now you can see that we have a JSON filled and it has all of our properties showing up. This is a test account, but I did add in a little bit of sample data so that we can see that right now our limit is set to 10, so we're only going to be seeing 10 of those properties show up. But this is just an easy way to get your contacts whenever you need them inside of any kind of project that you're working with so that you can parse through the data and you can represent it into your app in any way that you need to. You have all of that access to whatever data you've got on your contacts in your CRM and. And that's how you can use a private app within your with any project that you're doing. And like I said, you can grab all of this code for the NPM client off of the developer docs. So just go ahead and check there and you can just literally copy and paste put it into an express app, get it up and running. It takes like two minutes, especially if you've worked with this before and you can try it out yourself, but that's all you have to do with the HubSpot client when it comes to using the private apps. You just have to make sure that you add in this default headers and add the content type set to application JSON and that will give you access to using it just like you use your API keys. But that's all I've got on private apps. Does anybody have any questions about that? Anything like that? Please just let me know in the chat.

Yeah, definitely let us know in the chat if there's anything you had any questions about that or if anybody even wanted to have has questions at any point and just even wanted to Come on. Come on screen. That's also cool. We're kind of experimenting with the format, so whatever you guys would like to see is we can definitely accommodate to.

Cool.

All right, I'm going to hand it off to Ben, who's going to walk you through reusable sections. Oh, we have a question from Daryl. What would be some Typical use cases for private apps. So I would say that some of the typical use cases that we're going to be looking at private apps for is when eating integrations. You're definitely going to want to use them when you're, whenever you're doing integrations because they work in a similar way to the API key, but they're more secure. Like I said, you have scopes that you can limit it and it's, it's not like OAuth where people have to authenticate via HubSpot. They don't have to do that with the private app. As long as you have that information there, they can access that integration without having to use the OAuth and go through their HubSpot portal to get to that information. So I would say if you're building any sort of integration, if you are creating any sort of interface where you need to grab data from your CRM and use that in a project, you could definitely use the private app as a way to authenticate and grab your data from your account. Bidirectional sync and integrations. That's a good question. I am not 100% sure if there is that possibility, but I can definitely ask for you, Darrel, and get you that information.

Yeah, I'm not 100% either, Darrel, but I think webhooks are a better choice for bi directional sync. I'm not 100% either, but I think I would look into webhooks for something like that. But we can definitely check on that for you.

Yeah, thanks for the questions. And like I said, now I will turn it over to Ben so that he can talk about reusable sections.

Cool.

All right. So yeah, Cheryl, you mentioned module fields as one of your favorite features. So sections is, I feel just like a sort of a. Like I said before, it does a similar thing, reusable sections. Basically these are part of the CMS now built in. You can use these to quickly build out templates and really help you save time, reduce code, reuse. It's a really useful feature. This is a page that I made just from the boilerplate theme. If you hover in between the sections, right you get this little plus icon and that's where you can add a reusable section. So if I click plus in the boilerplate theme, there are six reusable sections included by default. And I also believe that many of the HubSpot default themes, like the growth theme, also has reusable sections. So you can just pick one of these and then it just gets added to the page if you click Layouts. It's also very useful. You can get easily create a multi column layout that you can then fill with modules. So let me show that real quick. Here's a call to Action section and you can see just by clicking on it, it just appears right on the page. So this is great if you have a content editor who works on your site or if you yourself are doing it, either way you're going to save your all of lot of time. Super useful feature. Then I'll demonstrate the layouts. Maybe 1/3, 2/3, you can see you can just drop modules right in there. This is pretty awesome. Just makes your workflow that much faster. You don't have to spend time setting these layouts up. They're all built in. So that's really cool. So I mean, sections versus modules, like both a section and a module allow you to modularize, reuse your code. The difference is that sections can contain multiple modules, rows and columns. So a module is like a smaller piece, whereas a section is sort of a larger piece. So yeah, those are, that's kind of the difference. But they both have their, their use case. But you can see here, within a single section, I could have multiple modules, which is really cool. So let's look quickly at how you can make sections here in the Design Manager. This is the same call to Action section that was added here. This is the code for it here in the boilerplate. So this is just a few things you can notice here. To make a section, it needs a template type of section. So there are different template types, you know, page, blog listing, blog posts, a few other ones. Some system pages that have different template types. So this one is template type of section. So that's how you can make that. And then these other parameters, these are the four other parameters which probably look familiar. Those are common to many template types. And then, yeah, so a section like this, in order for it to appear in this area here, it has to have that template type. And then syntactically it can only. It must, it must start with a DND section tag. And again, this is all the boilerplate. So if you wanted to look at this, just check out the boilerplate. Lots of good examples in there. And it can only contain one of these D and D section tags. So it has to both start with and only contain one D and D section tag. Sections can be, you know, styled with padding and backgroundimage, you know, by passing in these arguments that you see here, backgroundimage. And these are, these would kind of be the default values, the padding. The best way to preview a section would be to add it to a template. So like on this landing page, this is now a page, not a section. But you can see the section is included. So the best way to preview a section is to add it to a template and then to preview the template and to include a section in a template which is their main use. In addition to being available in the editor, you need to use this include dnd partial syntax. That's how you include sections in a template. Using sections, you can easily add them to pages. You can easily add them into your templates. You can get your templates going a lot faster once you have like sort of a collection of sections or if you want to use the boilerplate, that would be useful too. So yeah, you can include them in templates using this include dnd partial tag. Another cool thing about sections is you can pass in variables. So this include dnd partial. This context variable passes some content into the the section instance, right? So here in the template, you're passing in the content variable context content. And then within this hero banner that will get populated in here you can see it says context content. It's receiving that from the template. If this is empty though, like you create a template and you don't include has this or operator, so it'll just fall back. This is sort of the default header that will get populated. So that's really cool. You can create different templates using the same sections, but then make each template unique. The sections can look different across templates because they allow you to pass in variables. Not everything has to be hard coded, which is really cool. And then the editor can always change it again when they get on the page. Just a lot of modularity, a lot of customization is possible. The ultimate benefit being that it just saves you a bunch of time. You don't have to write all this code all the time. That's really cool. The last thing I wanted to mention about sections, you can add a class. You can add a class to your section. So just using this class sort of variable right on the section tag. And then by adding a class to your section, you can do some more custom styling. And then of course there's the default parameters that can be added to a section. So you can use a class, but you can also include styles this way, which is also very useful. So you have different options depending on your use case, depending on what you feel is best in your situation. So yeah, that's sections. I only really, I guess this one was released maybe in August or something. I had only really learned about it recently. They talked about it a bit at Developer Day. It's a really neat feature, just really powers up the CMS even more. Any questions about sections or anything you saw here that didn't quite make sense? We'd love to hear from you guys, from you all.

Cool.

I'm going to pull up the presentation again. Let me present this. Brooke, how do I present?

You can click on the big present.

Button with the big present button.

Yeah, it's all good. No problem.

All right. Worked it out.

But yeah, if you have any questions at any time, please feel free to ask us them. We are more than happy to answer all of your questions.

Definitely. If you want to come on screen and just say, hey, that's cool too. Like I said, we're. Like we said, we're just kind of experimenting with the format. So, you know, it's kind of a chance for us to talk about things that are going on within the HubSpot product, but also just a chance to kind of work with the community, see what everyone's doing. So yeah, if you want to hop on, say, hey, that's cool. Yeah, we're just, you know, whatever you guys need like to see is cool. Yeah, so that was reusable sections. If anyone wants to talk about just their experiment, experience with the CMS or experience with a recent project, like, we would love to hear it. Just like how, how goes it with the cms, you know, that kind of thing.

Cool.

So yeah, we'll move on then to what we're working on. You know, we're kind of continually in a process of just like creating new content for the Academy. So yeah, this is kind of what we're working on. And Brooke, I think you're first here.

Yeah, so we've got a lot of great updates coming for you all. Some new lessons, some updates to lessons that are already existing. And one of the things that I'm currently working on is other data sources lesson within the CMS for developer certification. Right now there is a lesson at the end called working with HubDB. This other data sources lesson is going to be an update to that. I'm not only going to be talking about HubDB, I'm also going to be expanding out into how you can use custom objects within your CMS hub. I will also include how to build out your custom object schema because currently you have to use an API call to build out these custom object schemas to add them to your account. So I walk you through that process and then we also are working on dynamic pages when it's in that lesson. So you can use both Hub DB data and custom objects data for dynamic pages on your CMS Hub so that you can be working smarter with your code and have the website work for you, create these listing pages and then have all of the single detailed pages created automatically for you through the CMS without you having to manually go and create each of those pages. All you have to do is simply set up the templates one time and then the rest will be working through your CMS Hub. And whenever new information gets added to your custom objects or your Hub db, your dynamic pages will automatically update and add in that new information so that you don't have to go through and recode that. That's just a really nice feature that comes along with using these specific data sources. Part of your CMS Hub.

Yeah, that's really cool. I love dynamic pages. Just they automatically generate a bunch of pages for you with the URLs and everything. It's pretty amazing.

And if you've worked with like blog templates before, it's very similar to how you work with blog templates. So it's really, if you have comfortability with that, like it's really easy to transition into using dynamic pages and setting them up on your site.

Definitely. And then yeah, I have some best practices videos coming soon. Just about things like accessibility and performance which are not necessarily HubSpot specific, but really things that if you're building websites, it's something to really think about and be thoughtful about. Then module and theme best practices like specific to HubSpot, like working with modules, keeping your code dry, that kind of thing. Then yeah, we have some the API updates Brooke went over private apps today and we have videos on just how some more specifics on how that flow might work and the ways to get up and running with that.

We'll also be including information about the V3 API endpoints. We're switching over from the legacy V1 to V3 API endpoints. So we walk you through how to make that transition.

Cool. All right.

So yeah, tell us in the chat any questions that you have. Also, we want to take this time to ask you all for feedback on what kind of stuff you want from us in the academy.

It.

Not everybody all at once, guys. Yeah, you know, there's lots of different topics that we can cover in a given academy video. We always love to hear like, you know, what you might think is important or like what's something you wanted to learn more about. So if you do have any suggestions like, you know, feel free to let us know here or in the developer. Slack is always a good way to reach us. If you wanted to email us, that's cool as well. But you know, it's generally we want to stay connected to the people who eventually will be watching these videos and we want to make it relevant to you and make it feel valuable and meaningful for you. So yeah, feel free to anytime. Just let us know what you think. Something you just wish you knew more about. Yeah, we'd love to, love to hear from you.

And also let us know like any topics that you want to talk about in future live events like this where we can go over them and kind of like talk you through our processes.

Cheryl, this is a great question. Maybe I. Yeah, so this is a question about sandboxes. Yeah, let me. Maybe we can share our screen on some sandboxes info.

Brooke.

Sure, yeah, that would be great. So sandboxes are a new feature that we just launched this past year and right now people have access to one sandbox per account and that sandbox is your development environment that is different from your developer testing account because it has all of the information from your actual HubSpot account in it. So that takes over all of your custom properties and things like that and syncs it into your sandbox environment so that if you're working in a very highly customized HubSpot account, you don't lose access to those properties when you're testing out a new integration. And so sandboxes are a great way for you to see all of your data, like in a, in a way that's not going to, that's not going to tamper with your actual in development account and you know, mess up anything that's live. There is a video on HubSpot Academy right now. There's a lesson about sandboxes that you can watch and it's from one of our colleagues, Adriathy, and she walks you through the process of sending HubSpot sandbox account. She also talks about different use cases that you can go through whenever you're thinking about setting up a sandbox account.

Cool.

Brooke, I'm going to try to find a link for that. Yeah, but you could, yeah, you can set up a sandbox account. It's currently limited to enterprise accounts. I'm not exactly sure. I know there's been talk of maybe expanding it to other tiers, but right now I think it's only on enterprise. But yeah, there's A lot you can do. I know they're continually adding features, so yes, it's definitely a strong way to kind of have like a true development environment and I think that's something that they're going to build over time.

Yeah. So that's a great question, Shanley. And like Ben just said, they're constantly working on adding new features to the sandboxes to make them more valuable to customers and the ways in which that we've getting feedback from how people are using them. So I think that that is definitely something that they're looking into. I don't know when that's coming, but I think that's something that they're looking into expanding in the future.

And I'm copying a shareable link here. Yeah, I know there's. Yeah, there are some limitations currently.

I.

Believe this is a.

This.

If you're not already familiar with sandboxes, this is just. This is just an intro video. Yeah, great question, Daryl. Brooke and I did look at sandboxes somewhat and there were some limitations when we looked at it like pushing to live. Not everything was quite like there was. There was a. Where you could sync from live, but you couldn't necessarily push. I'm not sure where they're at right now, but we can definitely check on that for you.

Yeah. Mm. We are always making sure that we're keeping up, up to date with the different product teams so that we know what new features are coming down the line so that we can plan to create new content for you. All right. As that stuff comes in, so that you have a lot of learning available for you. Right. When those things are going into general access. But this is a question that we've been getting a lot and one thing that the timeline is still iffy on when that's coming out, but I know that it's definitely something that is considered a priority for the product team.

Yeah. And we spoke to the product manager about this and I believe a takeaway from our meeting with her was that an ultimate goal is to have anything that syncs to the sandbox to be able to sync back to production. Yeah, great questions. Yeah. Sandboxes is a. Yeah, definitely agree. Yeah, definitely agree. That's kind of like the gold standard, right? Just to be able to work in your dev environment and then when you're done, just press push and have your site be updated for sure.

So we will definitely make sure that will let you know when that is a thing that is possible because I know that a lot of people are very excited for that. Great questions, y'.

All.

Great questions. Keep them coming.

Thanks for the engagement. Yeah, that's great.

Yeah.

And feel. Yeah. Feel free to ask more questions. We'll just check out what our. Our activity was here. So, yeah, you can click the link in the chat, Brooke, if you want to drop that in there. I think it's in the slide notes.

Yes, let me grab that. I will grab that and put it in the chat so that people can join the developer newsletter, because that is one way that you can keep updated with everything that's going on with new product updates and developer news. Just like we recently, last month had our developer day, all of that information is in the newsletter and it comes out on a monthly to semi monthly basis, so definitely sign up for it. It's a great resource for people who want to do learn more stuff about what's going on in the developer world at HubSpot.

And then also there's the Themes challenge, which is active right now. Brooke, I don't know if there's a link for that one as well.

There is, yes. Let me grab that for everybody.

Yeah, but that's a pretty cool challenge. You can win a Tesla. There's a whole bunch of prizes which I believe are outlined on the, on the, on the link that we'll share with you. But yeah, basically, you know, building out a theme and you can enter to win one of several prizes. Yeah, I mean, it's a good way to practice your skills, make something that looks cool and, you know, see what happens.

And with the Themes challenge, we have a bunch of different categories that you can enter into. So we have like the big overall category for someone who creates a theme, but there's also different things like micro themes. So if you want to create like a specific theme for a certain vertical industry, you can do that and enter that and then you're entered into that specific category. So there's a lot of ways that you can get involved in. And the grand prize is a Tesla. So if you're interested in winning a really cool car, definitely check it out. And you have about two months left to complete your theme. So you've got until the end of January 2022.

Cool.

Right on. If anyone wants to. Can you discuss about Developer Home? Oh, yeah. Did anybody here attend Dev Day a couple weeks ago?

Yeah. Raise your hand if you attended Dev Day.

We attended.

We were there. Cool.

Cheryl said yes. Shanley said they went to a couple of sessions. Awesome. Awesome. So with the developer home that's coming sometime soon, I'm not sure on the timelines with that. And I don't want to speculate for you all, but it's definitely something that's in the works and everyone is very excited about over here. But that is going to be kind of like our. I would say, like, I'm calling it, like, in my mind, it's like a home base for a lot of the features that developers within HubSpot are using. So it's just a really easy place for you to find all of your projects that you're working on and be able to get that information in a single place.

Yeah, yeah, we're not like. I guess we're not really allowed to say like too much. What I would say is we can share with you the. They on YouTube. They have a link. They have all the recordings of all of the sessions. And I'll. I'm going to find the one that is specifically. I know that Gregory here at HubSpot was on that one and Lori Q.

Yeah, it was the keynote from Dev Day. If you're interested in learning more about that, definitely watch their keynote from Dev Day because it was awesome. They did a small little demonstration to show you all what they're working on. I thought that was a really cool thing. If you're interested in learning more about the developer features that are coming in the future, definitely watch their keynote.

Yeah, I pasted that there in the chat. That's. They're calling it Building. Building customized experiences on HubSpot. Yeah, they got Gregory Laurie in there. Sorry for the sound. Yeah, so, yeah, that's a great one to watch there. I think Lori's the product manager. Gregory is like a technical lead. And yeah, there's just a lot of. Really a lot of good things coming around. Just HubSpot being like a place to build, you know, a place to make what you want to make. So that's really exciting. Great, great.

That's a really good question, Shanley. And I do not know the answer to that, I will be honest. But I definitely think that you should just keep your eyes on the newsletter and continue to get product notifications, especially as we really start to roll that out. They'll be definitely talking more about the specific features that are going along with it.

Cool.

So I think. Yeah. If nobody has any other questions, Brooke, would you be okay to.

Yeah, yeah. This has been a great session. Thank you all for joining us today. We really appreciate it. Please make sure that you take the after survey so that we can make these experiences even better for you all. We'll be sending those out and just let us know what you think about the format. What do you think about what we presented today? We would love to get all of your feedback so that we can make these sessions even better in the future.

Yeah. And great questions. There was a lot of talk around sandboxes and developer home. So, you know, those are definitely things that we can cover in the future. We'll. We'll dig up some resources and. Yeah. Share what we can share on that. Those. Those are. Thanks for pushing us in that direction. That's really great.

Cool.

All right, well, we'll see ya. I'll stop sharing. And yeah. Thanks, everyone, for attending. This was great.

Thanks, y'. All. Bye.