CRM Data on Websites | Will Spiro | HubSpot Developer Day 2020

Hello everyone and welcome to Developer Day. I hope you all have been enjoying the event inbound and staying safe and healthy. I wanted to start by saying thank you to everyone who joined today. Developer Day is always my favorite event of the year. It is awesome to get to work so closely with you all and and hear about what's going on in your worlds because many of you have heard me talk about all the updates to the CMS for developers like themes and local development. Today I'm going to be talking about something new. I'm going to be talking about custom objects and using CRM data on websites. Before we get to the fun, I just need to make a quick note around forward looking statements. This slide is essentially saying that anything I talk about today is liable to change. Alright, now back to the fun. Just to quickly introduce myself, My name is Will Spiro and I'm a product manager at HubSpot on a few teams that work on creating a phenomenal developer experience. I've worked at HubSpot for a little over four years and when I'm not working I love hiking, skiing and generally doing anything outside. Today I'm going to be diving into three topics. First, a quick overview of custom objects and how you can use custom object data on a website as a developer. Second, how you can empower marketers with modules that utilize CRM data on websites. And last, we'll take a look at a new open source project that you can use to get started with custom objects on websites. For anyone who missed it last week at Inbound, one of the major announcements was the release of Custom Objects. Custom objects allow businesses to define new objects within their CRM. In addition to the standard CRM objects like Contacts, Companies and Deals, you can define all the properties that go along with the object, as well as what other object types they can be associated with. And because they are CRM objects, they show up throughout the HubSpot platform, like in workflows, reporting, and more. If you've not checked custom objects out, I highly recommend checking out the documentation for them on developers.HubSpot.com so you might be asking yourself what does this have to do with the cms? It's the tie between the CRM and the cms that makes HubSpot so powerful and and supporting personalized user experiences. There are times where the data source you have in your CRM might also be needed on your website, and custom objects allow your data to be used throughout the entire platform, both for your internal business operations and workflows and reporting, but also for your website Unified business and website data with a single source of truth so let's talk through a simple example to see some of the new beta features we're releasing to support publishing custom object data. We're going to talk through a fictional company called Hub Homes that's a real estate business. Hub Homes has a property listings object they use to keep track of the homes they're selling. This allows them to report on properties, associate properties with contacts, and also run automation around their properties. But how can they market their real estate properties? They likely want to publish their properties to their website so visitors can look at what's available to support developers rendering custom object and CRM object data on websites. The CRM Objects and CRM Object Hubble functions allow developers to print data from the CRM on their websites. This function is not new and works with the built in CRM objects as well, but it newly supports custom objects as well. It is perfect for when you need to list all object instances of a certain type or object instances which meet a particular filter criteria. So jumping back to our real estate example, we can use this Hubble function to list out all our property listing objects. Think about this for a second. We have data pulling directly from the CRM onto our website here. This means if automation updates or adds any data, it's immediately reflected on our website. There is no need to sync data between your business database and your website database. The next important new feature to know about is the CRM Associations Hubble function. This function allows you to query for and render associated the associated contacts of the company using this function and depending on how you're listing website, all of this data is being pulled directly from the CRM. There are detailed page views of a particular property, and there's a way to request a viewing for every single property. I wanted to show you all what the final website will look like now, but we'll go into more depth later as to how it's all working. All right, let's go ahead and get started. The first thing that I'm going to do is clone this repository to my local machine. So I'm going to jump over to my favorite text editor Microsoft Visual Studio code and clone this repo. Next I'm going to run NPM install to install all the dependencies of the project. And if we take a look inside this project here, we can see it's consisted of a few things. The first is we can see this Hub Homes theme. It has some serverless functions, CSS images, modules and templates, but we'll take a look at this later. The other thing in this project is this resources folder. This actually contains the schema for our sample property listing object and and even sample data for our property listing instances. All right, now we have to get our local environment authenticated with our HubSpot account. To do that, I'm going to run HS init. This is going to open up the personal access key screen. And now we can see there is an option to generate a personal access key with access to custom objects. If you already have authentication set up for an account, you can run HS auth deactivate your key and create a new key with access to custom objects. All right, I'm going to copy this key into my local environment. We'll call this account Dev day. And now our authentication is set up. Next, I need to scaffold out my property listing object and and sample property listing data. To do that, I'm going to run NPM run setup, and this is going to use the CMS CLI to scaffold out the object type and the sample property listing data. Let's jump over to my account here and refresh the page. And now we can see our property listing object has shown up. We can even click into individual property listing instances and and we can see some details about the properties, the address, bathrooms, bedrooms descriptions, and more about each one of these objects. Now I'm going to jump back to my local text editor here. And next I'm going to actually upload this hub home themes to my account. To do that, I'm going to run npm, run upload, and all these files will be uploaded to my account. If we jump over to the Design manager, we can see this theme has been created. The next thing I need to do to set this up is to actually create a secret for the serverless function used as part of this project. To do that, I'm going to go to Settings and grab my API key, copy it, jump back to my terminal and run HS Secrets. Add API key is the name of the secret, and then the value is my API key. All right, that secret has been created. Next, I'm going to create a form that's going to be used as the property interest form. So I'm going to go over to the Forms tool, create a new embedded form, let's call it Property Interest form, and I'm going to add the first name field, the last name field, and email, and then we'll go ahead and publish. Now let's actually start creating some pages. So I'm Going to jump over to the Website Pages tool, create a new Website page, and within our Hub Homes theme, I'm going to select the homepage option and let's just call this All Property Listings. All right, and we'll see. There are a couple modules already on this template. We have a featured Property Listings module and an All Property Listings module. I'll show you this in a little bit. But the All Property Listings module is using the CRM Objects Hubble function to render and list out all of my CRM objects. This is pulling directly from the CRM. And here we have the Featured Property Listings module. This module is using the new CRM Object Selector module field I mentioned earlier. So let's take a look at how it works. As I mentioned before, the Marketer UI allows a marketer to easily pick an instance of one of their properties from the CRM. So let's say I want to feature this Cliff street property. It's incredibly easy for a marketer to drag and drop this module onto any page and pull data directly from their CRM onto the website and the particular instances they're interested in displaying. Okay, let's go ahead and publish this page here. So we'll just call the title All Property Listings and set that as the slug as well. So we'll publish this and I'll go ahead and open this page. All right, and now we need to set up the Detail page views. So I'm going to jump back to the Website Pages tool, create a new website page. This time I'll choose the Detail Page template. We'll call this property Detail Page. The module that already exists on this template is the Property Details module. So I'm going to go ahead and go into this module, select the form that I just created, the Property Interest form. Now I'll go ahead and publish this page. And the URL of this page has to be property. Alright, now let's take a look at our listing page. So we can see here that we essentially have a listing of all of our properties from the CRM as well as our featured property. And because we set up our Detail page, we can actually click into an individual property and see details about that particular property. All of this data is pulling directly from the CRM. So let's take a look at how both of these pages are working behind the scenes. Let's jump back to my tech step. Let's take a look at the code behind these modules. First, let's take a look at the All Property Listings module. If we take a look at the HTML for this module, we can see here that it's using the CRM objects Hubble function I talked about earlier and it's querying for all of the property listing objects and specifying which properties that it will use when rendering. And what about the featured property listings module? Let's take a look at its fields. We can see this module is using the new CRM Object Selector module field. It has the type set to CRM object. The object type selected is property listing. And here are all the properties that are being used for rendering the HTML of the module. And for those of you that like to develop in the ide, let's take a look at what that field looks like in the Design manager. Alright, so here we can see our CRM Object selector module field. And if we click into it we can see very similar to the local experience, the developer is able to choose the object type as well as all the properties that need to be fetched for rendering as well as the default CRM object property. All right, let's take a look back at the website and check out the request viewing feature of the site. So let's check out a property here and then I'm going to click this request a viewing option, fill in my information, and this form is actually submitting using a serverless function. And it's doing two different things. The first thing that it's doing is creating a contact in the CRM. But the second thing it's doing is actually creating an explicit association between my contact and the property that I expressed interest in. Now we can run marketing and sales and services activities all based off of the fact of this explicit relationship. Think about how this might play out in workflows. Let's go ahead and create a new workflow. I'm going to make it a property listing based workflow and let's call this an upcoming open house notification workflow. So I could roll and roll properties in this workflow based off of a property like Open House date being known. So let's go ahead and apply that and then from there we could do something like send an email to all associated contacts and send them something like an interested property open house notification email. And it's incredibly easy for us to make this email one to many and work for all of our properties. And we can use personalization tokens to make sure it's being addressed to the correct contact, but showing the correct information from the particular property they've expressed interest in. Let's go ahead and save that. And just like that we have a really simple setup for how an upcoming open house notification workflow could work. As soon as the open house date is known for a particular property, all of the contacts who have expressed interest in that property and therefore have become associated with that property would get an email notification letting them know they could see the property on a certain date. And this is just the beginning. Property listings show up throughout the app, so you could create reporting dashboards and set up a bunch of different cool features that allow you to utilize the power of the HubSpot platform on your property listings object Now I'm sure many of you are wondering how you should think about the overlap between hubdb and Custom Objects. After all, they're both features that allow you to define custom data schemas and author instances of that data. There are a few things to consider when thinking about which feature is right for you, and in many ways you it really depends on your project. Here are a couple of points you might want to consider when choosing HubDB or custom objects. First, custom objects there is no limit for the instances per Type compared to HubDB's 10,000 rows limit, so custom Objects might work well for large data stores. Custom Objects requires an Enterprise subscription versus HubDB which is available at CMS Hub Pro and Custom Object supports a unified data store for when you want it, reducing the need to duplicate data. And HubDB it has more publishing oriented properties like rich text, image, location and video which the CRM does not currently support. The data is isolated to the CMS and it can't be used in the rest of the HubSpot platform versus custom objects which show up in and can be used throughout the rest of the platform like reporting and automation. And HubDB has a no auth public API which can be used for headless style content delivery versus custom objects which only have authenticated APIs. So as I said, the decision partially depends on factors around the Hub subscription as well as your requirements for the data store. But as many of you heard me talk about at Inbound, Custom Objects can do an amazing job of supporting app like sophisticated functionality for both visitors on your website and also in your internal business operations. Custom Objects allow you to report on, run automation on, have associations and records for and public marketing material like emails and websites for your data. All of this power throughout the HubSpot platform is what makes Custom Objects so powerful as a data store. I'm incredibly excited to see what you all build with Custom object data on websites. So what else are we working on relating to using CRM data on websites? Some of you might have noticed our setup to show detail views of properties was not so ideal because it just uses a query string to identify a property and there'd be no good way to view the analytics for a given property's detail view. We're actively working on a concept of CRM Object Dynamic pages similar to HubDB dynamic pages, where you can select a CRM object type as a datastore and we'll dynamically generate the detail pages for you. That way they'll all have their own unique URLs for each instance of the data type, and you can view the reporting and analytics for that particular page. As soon as CRM Object Dynamic Pages is ready, we'll definitely let folks know through our usual channels and by pr' ing the Custom Objects example repository to use it, so make sure to watch that repository. We're also working on a number of HubSpot CLI commands that allow developers to create objects, create sample data, fetch object schemas, and more. Our Custom Objects example repository actually utilizes these CLI functions to scaffold out the sample data and Sample object. These CLI commands should be in beta soon, so we'll make sure to announce them when they're ready. So if you're watching this and are excited about getting started with CRM data on websites, here are a few resources that you should definitely check out. First, check out our CRM objects in CMS Hub Doc, which talks through all of the features that I mentioned today. Second, check out the Custom Objects API docs which have more details about how custom objects work, which you'll definitely need as you go about defining your own custom objects that meet your business needs. Third, we have the Custom Objects example Open Source project that we walked through today, which will get you started with all of these concepts in just a few minutes. And once again, all of these features, including Custom objects, are available in CMS Developer Sandbox accounts, which is a great place to play around with these features and evaluate them for implementation or if you just want to check them out. So thank you everybody for listening. I'd love to hear all of your feedback on this talk and all of the concepts and features I talked about today. Always feel free to get in touch with me via Developer Slack as I love talking to developers and hearing about what's going on in your worlds and what we can do to better enable you all as developers. I look forward to shaping the future of the developer platform with your help. All the best and everyone stay safe.