The below transcript has been auto-generated for your convenience. Please reference the source video/audio for direct quotes or to clarify any errors.

Speaker 1: (00:06)
All right. Hello everybody. I am Dennis Edson, and I am joined by a couple really cool folks who are gonna be talking about building dynamic pages with c m s Hub. Uh, I got M oh, coming over here. She is web ops and Demand Gen Practice Lead for Aptitude eight. A lot of words to say. Uh, they are an elite partner and she's a career marketing leader with 12 plus years of experience working in the b2b. And Sass goes crazy for Corgis, good to know, uh, being by the ocean and building really cool web experiences with her talented and fun team. Next I have over here Will Spiral. Will is the senior product manager of HubSpot. Well, not v he's one of our senior product manager of the HubSpot, and he is dedicated to the data-driven content. Uh, how you guys doing?

Speaker 2: (00:58)
Doing great. I'm excited.

Speaker 1: (01:00)
Doing well, thanks. Introduction, Dennis. Cool. Uh, real quickly, this is what we're doing. We're gonna do a real quick recap on CMS hub. Uh, we'll discuss what a dynamic CRM page is and how it applies to CMS hub. We'll have a workshop led by M initially, which is gonna be pretty cool. I'm excited about. And after that questions, uh, I'll be monitoring the chat as well as the q and a. So if you have questions, please drop in a minute. There's nothing too small to ask, ask away. M it's all yours. Have fun. Awesome.

Speaker 2: (01:34)
Awesome. All right. C m s hub. What is c m s hub? Why is a C R M powered c m s life-changing? What's, what's that all about? Right, so here we've got this block of text, which you can certainly refer to, but, um, basically c m s hub is HubSpot's c m s product, right? The content management system arm of HubSpot that is very, very tightly baked into it's all in one connected platform. Um, so two big callouts here for c m s hub. One, it's just a very robust and well-built c m s that can do a lot of really cool things that other CMS hub CMSs can't. The other big call out is when I say that it's, you know, integrated into HubSpot's all in one connected platform. It's not just because it's behind the same login screen. I mean, the data and everything is truly integrated and very connected.

Speaker 2: (02:24)
Uh, and obviously what, why we're here today is to talk about how we can leverage that data, uh, for web experiences. But before I get into all the juicy CMS content that we have lined up for today, I do wanna make a call out that, um, it's no coincidence that I, a career marketer and met here today with Will, who is a senior product manager for CMS hub, and spent his career in operations engineering, and obviously very heavy on the product side. Um, you know, it's not just because our schedules happen to line up today. Uh, will and I are here intentionally, uh, and, and wanted to do this together on purpose. Uh, we, we sort of represent two sides of the same coin. He brings to the conversation, the perspective of the developer. While I bring to the conversation the perspective of marketer. And while yes, those are two sort of different personas, the fact that we're both here today is very telling.

Speaker 2: (03:15)
Uh, for, to me what that really means is that software like HubSpot, like the way that HubSpot built its c m s product, and obviously the rest of its uh, suite, it opens up this huge world of possibilities for marketers to build things that maybe they didn't even know that they could build. So it also means that if marketers don't, uh, sort of understand how they can leverage these new opportunities, flex into that ops way of thinking, flex into the dev way of thinking, um, then their dev resources are gonna be underutilized and their customers are likely going to be underserved. Um, but the same is true on the other side, right? Like, if the dev and ops folks don't really have a window into the perspective and what's driving the marketer, they may not be able to develop elegant and creative and seamless solutions for both the marketer and the customer by way of the marketer.

Speaker 2: (04:02)
Um, so long story short, uh, we are sort of bringing two voices, uh, to something that's really important and really, really cool. And because of the way that HubSpot built at c m s very, very intentionally for marketers, but also very, very intentionally for developers, it creates this sort of this new paradigm or new channel, new way of collaborating with one another. I'll try not to ramble too much here, but my, I, long history of building a bunch of websites, leading marketing teams, working with inside developers, outside of developers, and the way that I've worked with them in the past before c m s Hub has been very transactional, right? Like, I have designs that I had my design team make because I know what's possible. We have this, you know, limited world of things we can do on a marketing site. We design it, we hand it off to the developer, they build it, they send it back, okay, cool, we've got some adjustments.

Speaker 2: (04:52)
I send it back to them, they fix those adjustments and then like, that's it. Um, it's not the, the, I feel like it was a very limiting way to work with, uh, a different group of people that are also trying to all achieve the same goal, right? So, again, long story short, the way HubSpot was built allows us to, to interact and collaborate with one another in ways that we haven't been able to do in the past. It also means that we also, we need to, we need to get outside of our comfort zones and try to flex into those other personas so that we can understand each other outside of, or in addition to what the tool can do and sort of force, I guess, in a way. Alright, so important call out. Just wanted to make sure that, uh, I have both perspectives covered.

Speaker 2: (05:33)
So let's get into the content dynamic c r m pages. What are they and why do we need them? So in short, dynamic CRM pages are webpages built in HubSpot, c m s hub, whose content is pulled from a structured dataset that's also in HubSpot in the c r m, uh, think product catalogs, uh, employee directories resources centers, which are, are all the rage these days. Um, so I wanna show you some examples. Some of them are pretty straightforward. It's cool here. Look at this resource center and I wanna show you how it's built in the backend so you can take a peek under the hood. But I also got some other examples that are a little complex, um, and may speak to the developer a little bit more, but may also speak to the marketer in some senses as well. So I am going to jump right on in and hopefully everybody can see this.

Speaker 2: (06:22)
I'm gonna start simple. Uh, I'm gonna start with a resources like page. So this is four Q. They're a client of ours. This is live, this is Don. It's living out into the, in the Innerwebs. Um, and this is a, it's, they have a resources center, but they also have this other center. And this is for news and awards. And what we've done here is we've used the blog objects. You see, we've got, uh, in the spotlight. I think these are blog articles. And then these are news articles. So they're separate types of content and they're both in the blog object, but, which is cool cuz we're pulling data from the CRM and pulling it into the, uh, C M S. But what I wanted to show you here is the backend. Um, obviously if content's being pulled into a module, you're probably not gonna wanna change the headings here, the subheads and these images, cuz they're being dynamically pulled in on their own.

Speaker 2: (07:15)
But, uh, one thing that I really, really love about HubSpot c m s is that it offers the developers to build the editing experience for the marketer in a way that the marketer can do the things that they need to do. Um, and a great example are sort of corollary is if you think about like WordPress and they have WP Bakery, they've got Elementor, they've got these builders, and when you get you, you activate that inside of your WordPress account inside of your theme or whatever, and you get what you get, right? But with HubSpot, you can really build things to be as static and rigid as you want, where you're kind of just like, okay, the marketer's just like adding in fields. But you can also build this builder, build the content editor to be very open and very flexible. So, like I said, we wouldn't wanna change like these headings, but look what we can do.

Speaker 2: (08:02)
We can change. How many articles are viewed are displayed here. So we've got six, we could change that to four or three. Um, we can even change how many columns, uh, are being used here. I don't think we would want to do that. Um, and that's just something also to keep in mind for, uh, any, uh, developers or marketers that are about to use C m s up. Just keep that in mind that you wouldn't want anyone to go necessarily rogue, but you have to understand the needs of the marketer. We don't wanna lock 'em down and, and sort of handcuff them. Uh, but this is great because you've got a ton of different op options here. Animation, uh, you can even add some c s s if you'd like. So this really gets the marketer a lot of power. So this is a straightforward example.

Speaker 2: (08:44)
Now I'm gonna go to one that's a lot more complex, but it's two parts. So the first part is kind of straightforward, it's the resources center. This is Palo Alto University. Um, this is a, you know, important call out. This is not live, uh, we're scheduled to launch January 5th. So you may see some warmups, some you may see some dummy content. Uh, but the actual function of, uh, the dynamic content is working and is live, uh, in this, uh, I think this is maybe a sandbox. So anyways, this is a resources center for Palo Alto University. We work with specifically their continuing education and online learning arm. Uh, and what we have here is another resources center. It's broken out by content type. So you've got the blog, you've got their podcast. Obviously, you know, these important details like the author date and the tag or the category.

Speaker 2: (09:34)
These are like research articles. They've got case studies. And you see, not only are these being dynamically pulled into each respective module, they also have their own indexes or indexes. Uh, so you've got the blog, podcast, the, uh, research articles and the case studies, and these are all being populated again by using the blog object. So I wanted to show you guys what that would look like. Uh, in case it's hard to sort of wrap your head around what that means, cuz it was for me when I first started figuring this stuff out. Um, but basically if you go into your settings website and blog, you can look at all of your different blog views because perhaps the case study post is much different than the podcast post, right? Like, those templates need to be built differently and separately, but they are all still a blog object.

Speaker 2: (10:22)
And all of that data can still be pulled into different pages and different modules. Okay? So that's sort of part one of this e example. The second part of this example is much more complex and involves a different use case than just a resources center. I'll try not to get too into the weeds, but this stuff gets me really excited also, uh, Dennis and will keep me honest on time if I've, if I'm going over or getting too deep into the weeds, or if anyone has questions, totally interrupt me here. So Palo Alto University, they sell their courses online, uh, and they needed a shopping experience, like a shopping cart experience. We've built things, and I think I have, I have an example actually that I'll show after this, that includes HubSpot payments, how we leverage HubSpot payments. But for this, we really did need that shopping cart experience.

Speaker 2: (11:08)
So HubSpot payments wasn't gonna be the best option for us. We thought Shopify, okay, Shopify is gonna be a great option, but one of the biggest goals of the client was like, we've gotta consolidate our tech stack. So I was like, man, how do we make this work in a way that we can still have the shopping cart experience, but still sort of have some consolidation of how the team, the Palo Alto team will be working. So what we did was, and this is the reason I have this up on the screen, is like, this is where a marketer really has to flex their brains and really open up to the op side of things because the way that data is flowing is absolutely integral to building a seamless web experience. You have to understand the data and where it's coming from, because as long as it's in HubSpot, you can get it on your pages, but you have to get it.

Speaker 2: (11:49)
In this example, we have some data in other places that we've gotta get into HubSpot. Um, so we used Shopify Headlessly again, this is still, um, it's scheduled to launch in January, so it's not fully done yet, but we're using Shopify Headlessly in the background, which means that we're able to build all of the pages, the, the, the catalog, the products, the checkout, all of that we can build in HubSpot, C m s, um, again using Shopify Headlessly. And it's sending to look over here. Shopify is sending information over to HubSpot, the, the things that we need. It's also got an integration with Thinkific, which is their l m s. Again, I'll try not to get too into the weeds, um, but this is all very exciting stuff for me. So we've also leveraged serverless functions to tell HubSpot where to put this data. And we put this data into a couple of different kinds of objects.

Speaker 2: (12:40)
Obviously the deal and line items and products, those are default inside of HubSpot. But we made an enrollment, a custom object. We also made the course a custom object and we made the instructors a separate custom object. And, uh, if you are already aware, it's not just the default objects that you can use in c m s hub for dynamic c r M pages, it's also the custom objects, which again, just like opens us up to such cool stuff. Um, like using Shopify Headlessly, being able to talk to an L M S platform, being able to get payment information back over to so that we understand how this is actually impacting our bottom and top line, our revenue. Um, and so I talked earlier about instructor directories. We're using that custom object to, to populate a directory here we've got the course library. So I'm gonna walk you through some of these things.

Speaker 2: (13:30)
But, um, I also wanna show another example before I show the designs. So as another example of sort of the marketing and demand function, leaning more into ops, leaning more into the dev function. So now that we understand how the data is flowing, we know what's possible, right? We know that the data that we need is gonna be in HubSpot. It's just a matter now of how do we want the experience to look and feel because we need to know how to design that so that we can then develop that this is wireframes that were built by someone on our demand gen team. Obviously for this account, we've got, uh, you know, operations, rev ops resources assigned to, I've got demand gen resources and developer resources and design resources. But I, you know, just a big takeaway from this, I was so impressed and, and so pleased to see that a demand gen, uh, consultant was building out a wire frame that's heavily rooted in a data model that will ultimately become a design that will ultimately become a real functioning web experience for somebody.

Speaker 2: (14:28)
So, uh, we were just coming up with different options for how that checkout experience could be. Um, now again, this is isn't done, these are designs, uh, because if I showed you the developed pages, they're even less baked than the the previous ones that had some dummy content on them. But I wanna help sort of shape and scope what, uh, what's happening here. So this is the course catalog. This is where, where someone could go in, they can use all of these different, um, categories or criteria to sort the, the courses that they wanna see. They can do it by continuing education hours format. Is it live, is it on demand? Um, who are the instructors? Again, start thinking about that object of the instructor, the object of the course and how we are enabled and empowered to do so much with it. Um, as a web experience.

Speaker 2: (15:15)
We also added in sorting, of course we've got search, um, some dummy content here of course, but this is what the courses catalog page will look like. Again, it'll be built on HubSpot, but powered by Shopify. This is an example of an individual course and what that would look like. This is a dynamic c r m page that's being populated by the properties on the custom object. Uh, so you've got the instructor, you've got for us all the cost and, um, the by now and these details about it. And then you've got this module down here for the instructor curriculum, all this good stuff.

Speaker 2: (15:56)
Um, here's just another example showing if there's more than one speaker. Again, this is a design, so it's not fully complete, but this is us building out the checkout experience and how it's going to look based off of the data model that we built. Um, in that lucid chart that I showed, I think that's pretty much all of the designs that I wanna show you. Oh, each individual instructor has its own page and they have all of their courses that they've instructed or are going to instruct listed on their page. Might be wondering, how do you do that? How do you know that they did this course, they led this course well, because they're two separate objects that actually we're using Aptitude Eight's app that we built that's called associate. Go check it out. It's super helpful for our use cases like this where you need to take multiple objects and associate them to one another.

Speaker 2: (16:44)
And I'll show you real life examples in another, uh, use case here in a second where you can see the actual custom object and see the association on those records. But, um, yeah, checkout associate, it's super cool. It's with the let the number eight at the end. co-branding, um, I think trying to see. Yeah, that's all I wanted to show you for that. So I want to actually show you what that looks like and it doesn't exist for the, um, Palo Alto University HubSpot instance. So I'm gonna go over to another, uh, example. This one is Ignite. They offer courses online as well. It's professional coaching and professional training, but it's the, the payment experience is different because they have the, the model is a subscription. So you pay for a membership and then you get access to all of this content. So you can see the courses, um, and all of that jazz.

Speaker 2: (17:36)
So what we're looking at here is their, um, all of their course listings listing page. You can change and sort by different, um, uh, tracks here. But for the sake of today's example, we'll pretend like we're just gonna go into this communicating with clarity when you get to the page. And this is all live by the way. So you can go check out experience ignite.com and sign up for a membership and, uh, go through that flow if you'd like, , hopefully you'll buy. Um, so anyways, this is the individual's session page. It's got the information about the session, how you can register. And again, we have a similar module here. Uh, same, same concept. The instructor is a custom object. The course is a custom object. Um, and this page is being populated by two separate custom objects. One being again, the course information and one being the instructor.

Speaker 2: (18:34)
So I wanna show you that. So this is what the custom object looks like for that particular course. So, um, call out here, you've got all of your, oops, you've got all of your properties. And maybe it's good that I zoomed in on the dynamic page slug, because that one is very important because that's going to dictate the actual u r URL of the page of communicating with clarity and consistency, cuz you can see that it is right there. Um, now for associations, we've got all of the contacts who have registered for this course listed here. We've also got all of the, well, the instructor who is on this course listed here. So if you wanted to go over, you could look at a separate custom object for the instructor. You can now see all of the training events that they're associated to. So going back to, uh, in this example, we don't have a page where the instructors are listed with all of their respective, oh wait, no, we do no for, sorry for Ignite.

Speaker 2: (19:32)
We don't have that. Um, but for the example I showed with Palo Alto University where there's a page for the instructor and it shows all of their courses that they've taught. This is what would power that, like this exact same concept. Uh, and it's done again through using the associate app. Certainly makes that helpful, um, makes that possible. So that's the instructor. And then I wanna pop over to a contact so that you can see that they are now associated with that training event. So this also opens up a lot of different ops opportunities to be able to look at and report on and understand what's happening, what are the associations, right? What are are the instructors for this course, better or worse or whatever. There's, there's so many different things that you could do with this data. So, um, that's a contact record. I also wanna show, again, just the interconnectedness of marketing hub, sales hub, c n s hub, because pretty much none of this stuff is possible without each other or without one another, without the respective, um, hubs.

Speaker 2: (20:37)
So here we're using a workflow. Again, this was a, they, there are memberships. You have to have a membership to view the content. So here we're going through, if you filled out the form to start, they have a 30 day free trial. Um, change the membership status to active, put a, a date stamp on there, send an internal notification so we know someone has now just signed up to become a member. Wait 30 days and then let's see if after 30 days did they pay. And this is an example where we did use HubSpot payments, um, because it wasn't really a full shopping cart experience that was needed. It was just a, a checkout experience. Hey, let's buy this, uh, membership and, and move on with our lives. And we'll have that payment recur every month. And, um, autorenew every year, uh, great for revenue, great for predictability.

Speaker 2: (21:23)
Um, so yeah, this is just looking, let's see if it's closed. One, obviously there's a workflow that's separate from this that says, did they pay? Let's check the, um, data that's coming in and, uh, you know, change the deal stages. If so. Uh, so then we can either put them in a nurture if they didn't buy, we put them in a nurture to try to get them to buy. If they did buy, we can make sure that they're added to those membership lists, um, so that they can, uh, see the content that they're entitled to, that they paid for. Um, so I also kind of wanted to explain the, the way that this page is built, um, the cu the with custom objects populating a page, you don't really need to, especially for this use case, you don't really need to go in and edit the page because the page is built off of a template.

Speaker 2: (22:13)
And in this, again, in this example, all of the courses have the same exact layout every single time. So I can go in and edit this page, but it's not what you'd expect. Um, again, I just sort of want to show that, uh, by using the template and using these modules. Um, so this looks like the, the listing page, right? Because the listing page is the same template that we're using for the individual event page. Um, so they're all like connected. But I just wanted to to, to hit on that so that you guys would understand that the, the, the process and the publishing flow isn't to go into a page, create a page, clone it, add this, add that, maybe change your color here and there. It's really just to add a new, um, custom object and hit save. And then now the page exists, uh, with all of the information you, you need.

Speaker 2: (23:02)
And will, I think something else here, uh, that we did, cuz this was one, I think one of the first times that we used the, the rich text property field, um, so that we could add all kinds of different formatting bullets and old and italics and whatever else that we needed into some of these, um, uh, properties, these fields. And this is not just limited to copy, it's also images in here, uh, multiple. So, alright, that was a lot. Um, and those are all of the examples that I've got, but it was a lot. So I'm sure there might be questions. Uh, and I also didn't really go into the why we need need dynamic c r m pages, because I think to really answer that question, we have to take a look back, back at the history of websites and web and the history of web design. And, uh, to my point from earlier, I think this is the perfect example of, uh, when the developer's perspective is particularly important. So will, I would like to hear from you. I'm gonna stop sharing and have you take over so we can get your perspective.

Speaker 3: (24:09)
Awesome, thank you so much. Um, uh, those are such cool examples, um, to see all the cool sites you've built and how you've used data to build sophisticated website experiences. One of the things I love to see about people using CRM objects and custom objects to drive content is, you're exactly right. Like, you don't go into a page to edit the content. And one of the things that's so cool is like workflows, automation integrations can actually be the thing that's updating and creating content for you, and it's all automatically reflected on your website. So super cool to see what you're building and, and pushing the limits there. That's, that's really awesome to see. Um, but anyways, um, as Dennis said earlier, my name's Will Sparrow, I'm a product manager at HubSpot and I focus specifically on how developers and marketers can use data to power their websites.

Speaker 3: (24:59)
So today I'm gonna talk a bit about why it's important to use data to power websites and give you all a little preview of a new beta feature that we have built to enable developers to build really sophisticated and data-driven websites. Um, anyone who is a developer day will have seen some of these slides already, but make sure to stick around as m has some more great content after. Um, and will also have time for a q and a at the end. Um, so that further ado, for anyone who's not read it, I highly recommend checking out this blog post. Angela DeFranco, a former VP of product at HubSpot wrote, it's called the Evolution of Website Design, how websites are becoming more than a Pretty Face. And in this blog post, Angela talks about the future of websites and how websites have evolved from brand assets to growth tools, right?

Speaker 3: (25:45)
So no longer do we just need a website or even just a beautiful website, we need a website that drives business results. And with this evolution, we've learned that companies aren't just looking for brochure websites. They're looking to design and build sophisticated, interactive digital experiences that will power their businesses. And this seems cool and makes sense, but it does beg the question of . What exactly does a sophisticated, interactive digital experience actually look like from an end user's perspective? How does it work? How does it drive business results and how do you build it? But let's take a big step back and jump into the problem. As I mentioned earlier, why is it a problem for websites to just be beautiful in nature from the perspective of our website visitors? What problem do they face? Well, the reality is that many digital experiences don't live up to their expectation and are anything but seamless.

Speaker 3: (26:39)
Just because a website is beautiful does not mean it is functional. And this can come at the expense of our website visitors and we can all relate to that, right? We've all had frustrating slow two-dimensional customer journeys that took much more time than you expect, than you expected. And you might even get as far as to the point of being able to make a purchase. But by then you might not be super excited to continue your relationship with that company. Or even worse, your bad experience might start after, um, after becoming a customer. But we want to make this solving, we wanna make solving this problem for your customers and prospects easier. We wanna enable you, our customers to build remarkable digital experiences for your customers. So you should be able to turn that frustrating journey from before, um, into something that looks more like this.

Speaker 3: (27:27)
And it shouldn't end when someone makes a purchase. A great digital experience can act as a guide throughout the entire customer journey. And now obviously every product and service should not have the same journey, right? There are many factors that might change the experience depending on the nature of your business. Um, you know, just as em showed us, there are different ways that people interact with the website depending on the nature of a business, but you get the idea. It's all about creating a seamless customer journey as possible based on what we know about our website, visitors, prospects, and customers. Um, so you might be wondering to yourself like, what is the key to these seamless experiences? How do I build them exactly? Um, and really at its core, the key to building these seamless digital experiences is all about using data to power them.

Speaker 3: (28:16)
So as your business grows, you curate more and more data from your customers, from your prospects, from your marketing, sales and services teams. And using this data to power personalized digital experiences is how you can create that amazing experience for your prospects, your customers, and your internal team as well. Just as em was saying, it's really all about a mindset shift in thinking about data actually as content and not data and content as two separate things. So I'm super excited to share with you all that we've been investing in a refined data layer to sit next to the presentation layer of the c m s. We wanna provide a cohesive way for you to interact with, uh, for cohesive layer for you to interact with, to power your digital experiences with data as you grow, integrate more data sources into your business, um, and try to build more seamless user experiences for your customers and prospects.

Speaker 3: (29:12)
Um, and this data layer of the C M S will make utilizing data across your digital experiences easier to implement AMP Learn. And at the core of the data layer is a brand new beta GraphQL a api. This is gonna let you query for all of your HubSpot data in its relationships, excuse me, in a single unified layer, and use it in CMS hosted content, external content such as Jams sites or apps and integrations. It unlocks all of your data under a unified a p i and provides a straightforward way to connect that data to your websites and apps. And this unified data layer is gonna make it much easier, easier to interact with all of your data across channels rather than needing to learn a bunch of disparate ways to access your access your data as depicted on the left, um, the core queries can be used throughout websites, apps and integrations, meaning less learning, less coding, and more time solving for your customers.

Speaker 3: (30:11)
As depicted on the right, the mental model of what data you can get, how to get and how to use that data will be much simpler and much more powerful. Now this is all really technical, so if you're not a developer, this might not make total sense to you. Um, but you might be wondering to yourself, why would I want to use GraphQL instead of Hubble For querying for data? Um, there are a few main benefits really. First is that GraphQL is an open and widely accepted data query language that's rapidly becoming a standard for API-based data access. Second, it's self docking, documenting, making it easy to learn. Um, it will allow you to get all of your HubSpot data and its relationships in a single query rather than needing to learn separate functions and make roundtrip calls to get associated data. Um, so really a whole bunch of benefits with this functionality.

Speaker 3: (30:59)
You can make a single query fetch all your contacts and their associated companies or fetch custom objects and tickets associated with a contact logged into a C M S membership page to create a portal style experience. Um, so let's take a look at a really simple website we put together to illustrate some of this power. So we put together this really simple recruiting agency job website. Um, that's basically a listing of roles here. We can see there are some filters. Um, we can filter by company, department, and location. We can also click into individual jobs and see more details about the role and even let people apply for these roles. Um, and I've already gone ahead and, and applied for a new job at HubSpot here. Um, and I actually have behind c m s memberships an application portal where I can log in and see my job application.

Speaker 3: (31:50)
Um, and so this is a really cool approach to have one single page that really acts as a portal, um, for customers to log into and see highly personalized content for them. So this is a really scalable approach to create personalized data-driven content. Um, and what's really cool, similar to what m just showed us, is this is all powered by c r M data. So this is actually my job application, which is a custom object in the C R M. We also have all of our roles stored in the C R M, which is what we're using to generate the listing and detail pages. And obviously this is all assigned to, um, you know, my contact here. And because all this data is in the C R m, we can run marketing, sales and services activities based off of all this data and these objects, right?

Speaker 3: (32:38)
We can can use workflows, integrations, reporting, all the other tools that interact with the C R M. Um, and if you want to get technical, what's really cool about how, how all this data is getting pulled into the website is at its cores using these graph QL queries that I was talking about. They make it really, really easy to pull in all the data you might need to create a data-driven website, um, or create those personalized portal style experiences where depending on who's viewing the page, they see data that's relevant to them. And one thing your developers will be super excited about is this sample website is actually an open source theme. Um, so if you wanna get started checking out this new functionality, how to create data-driven websites, this is a great place to get started. Um, it's also where you can sign up for the data to, to get going with this new functionality.

Speaker 3: (33:30)
Um, and uh, we do, we dove into in more detail this functionality and walk through the sample open source recruiting agency theme and a developer day talk about a month ago. Um, so I won't go too deep into that, but I highly recommend checking it out, um, and sending it along to your developers. Um, if they're interested or if you're a developer yourself, um, definitely check it out. The possibilities are endless and hopefully watching this will help you get inspired for what you're gonna build next. Um, and I'll make sure to post some links in the chat for the beta signup form, the documentation, um, this, this past presentation, uh, and the open source sample theme. Um, and I really look forward to seeing what you billed. Uh, but for now I'll pass things back off to m

Speaker 2: (34:14)
Awesome, thanks Will. Yeah, let me just get this presentation mode back up. Um, so admittedly with GraphQL, I had such a hard time wrapping my head around it. Remember, I come from the marketer's perspective, so, um, I had a hard time with it. So my CTO and internal developers probably wanna kill me because of how many times I've called meetings with them to be like, but wait, but wait, what about this? What about that? Um, cuz I really just want to understand how it affects the marketer and like that was my main impetus and goal. Um, but it, obviously I met with my team, I got some insight, um, chatted with Will, um, but it wasn't until we started scoping this project that is still scoping, so I can't tell you what, uh, the company's name is, but it's a major cruise line. Uh, but once we started scoping this project out, it kind of all hit me, um, why this matters so much and what the, the, the tangible impact is for marketers.

Speaker 2: (35:06)
So, um, if you think about a cruise line and you want to say you've bought some cruise excursions in the pa by the way, can you guys see my screen? Good. Cool. Um, so imagine you've bought some excursions in the past, you have some upcoming cruises. Um, the, the client wants to be able to have a, like an account portal for each user to go in and see, all right, what are the, the excursions that I bought in the past? Uh, what do I have coming up, how many days until my next one? Who, who are the guests that I brought with me on the first one? One of the email addresses? What are, you know, there's like a whole loyalty program and that's pulling in from somewhere else. There's customer support, logout log in, all of that stuff needs to be included here. I mean, I mocked up a there, I mean this is very, very um, low fidelity mockup of what it could look like.

Speaker 2: (35:54)
But when I was doing this, I was like, okay, with GraphQL, instead of making a a query for every single little piece of data that I need to see on this page, I can make one query for all of this data at once. So it's streamlined, it's efficient, it's something that developers are familiar with. So I think will correct me if I'm wrong, very interested to hear you weigh in on this, but from my perspective, I think the biggest impact to a marketer, specifically a marketer, is that their devs will be able to create, help them create more things. But I think it just maybe even make the dev resources happier, more streamlined faster. I think there's also a, it could be faster for the actual site itself, the page itself, how it's getting that data could load faster. Um, but I think the, the big, big impacts, um, and benefits of GraphQL are, are a little bit more on the developer side.

Speaker 2: (36:51)
But like I said, when I was putting this together, I was like, okay, I get it now. This is data from different contacts, different objects. Um, there's images, there's links, there's, there's links out to go get contact support. So to me it made a whole lot of sense. Like, okay, yeah, I get it. This is like a dashboard type of a, uh, use case. And having to query make multiple a p i calls for every single piece of data seems wasteful . And when I was understanding and wrapping my head around graph quel, GraphQL, I was like, oh, I get it. This is dope. Like this makes developers' lives easier, this makes marketers lives easier because now we have more opportunity to do things and developers who are more willing to do them in a way that makes sense and is streamlined. Uh, so that's my sort of, uh, GraphQL example or use case to help the marketer understand it. Cuz like I said, I had a tough time, um, understanding it. So what else? I think, I think we're now time for q and a, so I'm gonna hand it over to Dennis, but I'll just keep sharing the screen.

Speaker 1: (37:55)
Yeah, guys, amazing. Seriously, like, uh, uh, this first of all, m you're you, your presentation initially was just spot on. Wonderful. Uh, there was a question back there specifically about those diagrams, the lucid diagrams, and uh, I think, uh, it was Carl who asked, how do we get that diagram?

Speaker 2: (38:15)
Well, those lucid charts are very specific to the data model of that customer and their, you know, the, the, the experience that we're building, the tools that they're using and the data points that they really need. So, and every solutions design that we build is a little bit different because the needs are a little different, but we use Lucidchart, um, and we, it's never just a one person thing, it's always the marketing function, collaborating with the dev function, collaborating with the ops function. It's never just one person just doing it on their own. Because like I said, we all have to understand each other and be speaking the same language so that we can really seize the opportunity that HubSpot has created for us with c m s Hub. Um, so I can't really give that to you , I'm sorry, Carl

Speaker 1: (39:00)
, how much does that evolve over the process? Like, just from, you know, you start building out whatever you're building and you realize, oh, I need, I forgot X, you know, how, how, how much do you actually change?

Speaker 2: (39:12)
Hopefully not at all. Like the, the goal would be to, to build a data model that is sound and secure and solid, uh, so that you don't have to go back. And I, and honestly, like we, back in the day, we would build sites and not really go through the data modeling sort of phase. And what happens is, is you realize like, oh, well we can't get that because we don't have that data point and we would have to build this whole page entire, like the UX would be entirely different if we wanted that thing to happen, but we've already built it this way, so like, what are we gonna do? Uh, so it it's very unique to customers, uh, from customer to customer. And we, we definitely, and now especially for web projects that are going to involve multiple platforms or data sources that are needing dynamic CRM pages, we'll do a solutions design first. Um, at absolutely obvious, see we're a services partner here with HubSpot, so we'll, yeah, we'll do like a paid solutions design first so that the client can feel really, really comfortable about a lot of the, about how complex this stuff is and, um, about the experience that we're gonna be able to create. So there's not as many, we don't wanna have any guesses or any question marks or any surprises in the future. So that phase is very, very important.

Speaker 1: (40:22)
Uh, Carl Al also asked, uh, and I'm not sure, I dunno what this is referencing, is that example a will be pulled from someplace. We can try it locally. I believe that's, uh, from the Graph dwell and I'm hoping that GitHub repo answers that question. But, uh, Carl, if there's anything else you wanna add to that, uh, go ahead and put it in the chat and we'll ask will that question?

Speaker 3: (40:44)
Yeah, feel free to, uh, check out that sample repository. Make sure to sign up for the beta first though, because um, your account does need to have access to the functionality. Um, but, but once you, uh, once you do that, we've got some simple instructions for getting started and then you can check it out.

Speaker 1: (41:01)
Uh, Gabe asked, graph Quel is only available for Custom Objects currently. If so, what's the timeline on other objects, hub DB blog, et cetera?

Speaker 3: (41:10)
That is a great question, Gabe. I'm glad you asked it. Yeah, so right now the graph q l functionality works with all of the default HubSpot objects as well as any of your custom objects you have in a given account. Um, but as I mentioned earlier, we are looking to round out that functionality. We're actually currently working on adding Hub DB to the graph fuel functionality. So hopefully, um, at the beginning of the New Year's, you'll have a nice, uh, surprise that we'll be, we'll be rolling out pretty soon, um, after the holidays. Um, and then, and then we'll be working on the other data sources after that. Um, so very soon you'll be able to interact with really all of your data that might be used in content or or other applications through this layer.

Speaker 1: (41:52)
Cool. Um, I'm not seeing any other questions in the chat, so I'll give you guys just a couple minutes here or minute to, uh, add some more questions. If not, I, I feel pretty satisfied with this conversation we've had. Um, while we're waiting, Anne or Will, if there's anything you guys wanna add. Oh, so does it work with blog currently? I apologize and Will answered immediately. Wow. Um, so blog in the future, by the way. Um,

Speaker 2: (42:19)
Speaking of locally available code and some of the use cases that we were talking about today, like the resources center, I do think HubSpot has published their, uh, resource center code, uh, and that's, I do believe, I think it's using Hump DB or is it using blog objects? I can't remember, but either way I'm pretty sure that that's publicly available and locally, uh, found online.

Speaker 1: (42:44)
Uh, to answer Max's question about will the recording be available? Yes, of course we'll put it on a YouTube developer channel. It'll also be available in the community. Um, yeah, it'll be all of the place. I believe, uh, will gave a link to a video that is on our developer channel. I'll see if I can find our channel once more to just add it to the chat. And Jose, uh, asked this may be more for Will, I was able to build out this example for a team member page and there's a link I was at Abel to add a custom module to a template, um, question. Sorry, maybe I should just let Jose talk here. How can I edit Author Drop?

Speaker 3: (43:30)
Yeah, good question. I mean, I think, um, you know, ultimately how flexible you wanna make something similar to what m talked about earlier is really up to you. Um, you know, at the end of the day, modules are the mechanism that developers use to, to basically pass on a highly usable and editable concept to marketers. Um, and we also have a concept called drag and drop areas, which makes the page a really drag and drop and easy to use experience. Um, so it's really like the application of both that data-driven content and those marketer friendly building blocks and meshing those together, um, to make it sort of an, an easily editable, um, and drag and drop experience for like anywhere across your website. You know, you might want to drag and drop team members onto an email as well. Um, and so you can enable your marketers to have a module that they can drag and drop into an email and it all pulls from your team member hub DB table. They could drag it onto a homepage, show their team members on the homepage too, if you want, in addition to that sort of dynamically generated listing and instance page for your, for your team members. Um,

Speaker 2: (44:47)
For dynamic pages, don't the pages have to be developed using that boiler plate and d and d versus the old school templates way back in the day that were Dragon Drop? Won't those not function with dynamic pages?

Speaker 3: (45:01)
Um, you could probably do either. Um, I think you could do either. Haven't set it up the whole the old way in the, in a while. Um, and one other thing, but, but definitely, you know, if you want the most marketer friendly approach that the new themes drag and drop areas approach will definitely be the most friendly for you. Um, one other thing that we want to do to make dynamic pages more friendly for marketers is, um, you know, one of the things that m showed is when you enter the editor for Dynamic pages, right now, the listing page and the detail pages are actually generated by a single page. Um, and that makes sense that the editor is sort of in the context of the listing page, not detail pages, but let's say you wanted to drag like some random module onto just the detail page.

Speaker 3: (45:49)
There's not really an easy way to do that right now. Um, so one of the things that we're working on is separating out the listing and the detail pages so that you can make a listing page that looks and works however you want. And then you also have an editor for the detail page and you actually could choose up at the top of the page, you know, which instance you should be previewing the page, and it could drag and drop modules that would basically apply to all of those dynamically generated instances. It's sort of a blueprint of sorts. Um, hold on. So that's another thing that we're thinking about if anybody's interested in, in talking more about that. And yeah, um, providing feedback on those concepts. We'd definitely love to share where we're headed, um, where we're headed in, uh, with, with, with that direction, um, and get any feedback from you all. Um, so definitely feel free to reach out for that.

Speaker 1: (46:43)
And with that being said, I believe, and if you just go ahead and advance the next slide, we have some contact information. So if you guys have questions for either of these two very, very smart folks, please feel free to reach out. I hope that's okay. Uh, and . Yeah. All right guys, this has been a great thank you everyone for, uh, coming and Will and em, uh, special thanks to you guys once again. I'll get this onto the community in the YouTube developer channel post-haste. Uh, it should be up there probably tomorrow. Um, we're here in the community Dev Slack. You can find us. Have a good day guys.

Speaker 2: (47:21)
Bye

Speaker 3: (47:21)
Guys. Thanks everyone.