Gray MacKenzie walks through embedding Acuity Scheduling into HubSpot websites. The tutorial covers Acuity's backend and HubSpot's template builder to set up custom scheduling pages for your site.
Welcome back to episode number five of Agency Toolbox. I'm your host, Gray MacKenzie, and today we're going to wrap up this short series of episodes that we've done on Acuity Scheduling, which we use to manage the back and forth in your calendars, booking appointments with prospects, with clients and with peers. So today we're going to talk about how to set up acuity scheduling and HubSpot. So if you're running your website on HubSpot right now, you can have links directly on your HubSpot pages to book your calendar. So we're gonna look at what it looks like to embed Acuity scheduling into a HubSpot page. Alright, let's go ahead and dive in. Okay, so here I am, I am on guavabox.com chatwithgrey and here is my Acuity page. And we talked about last time in episode number four, how to customize what the front end of your acuity looks like. So the colors that we've given it here, we've changed up the fonts, given it a background image and changed up a number of other things. So here is the scheduling page. As you can see, it's on my website, which is hosted on HubSpot, and I've got the HubSpot editing button right here. So I can actually jump into the back end and change at least a couple things from within my portal here. I can change up the page name, page title, URL, I can give it a meta description, attach it to a campaign which is pretty handy and your kind of standard HubSpot page editing stuff. Obviously I'm not able to edit, I'm not editing the content that's on the front page. This is all done through Acuity. So now I'm going to take you over into the back end of Acuity to look at where we're going to get this code from. And then we'll walk through the HubSpot template builder and how to create a template that's going to host this page on your HubSpot site. So here we've got our appointment types inside our Acuity backend and if we go down to my quick chat and hit edit here, we can see that I can grab. I've already changed all my settings for this particular event and if I go to Direct scheduling link, it's going to give me an iFrame and JavaScript source to embed this into my website. But if I throw it in just like that, I can't just create a new HTML document, throw it in just plain like that into HubSpot because HubSpot has some other requirements that it needs. Now you will also trying to remember where it is inside of inside of Acuity. But there is the availability to oh client scheduling page. That's where it is. You can directly embed using a bunch of different platforms that are pre built. HubSpot is not one of them and that's why we're walking through this today. So if you're on WordPress just walk through the website guide that they already have. You can embed the whole. This is not event specific, you can embed the entire scheduler, but that's gonna link any events that are public. People will be able to select from the dropdown here on the front end and choose those public events. So that's not going to embed your individual events like what we have here, which is I want a specific page to send a specific link to schedule my individual calendar. So to do that I need to create a page template and I need to use that embed code that we just looked at. So appointment types my event. Again direct scheduling link gets me to the iframe. And now I've got this information right here. So I'll copy that and what I've got inside. So now we're going to jump over to HubSpot and into the template builder which is inside of Design Manager. So I've jumped in here and here is my very simple custom HTML HubSpot template. So to create this I've just opened a, opened up my Design manager selected new coded file, given it a name, put it into a folder and it pops open a document from there. So I have the standard stuff that HubSpot requires. It's going to pre populate with this header information. I've got my standard header stuff in my body section. Now you will need to have the standard header includes and standard footer includes for HubSpot page to render. So there's no way around those. But then as you can see, all we've done is copied and pasted in that information that we got from Acuity just a second ago where we pulled in the iframe source and the script. You will notice however, a little difference if you look at what I've got pulled in as far as the style, some of the settings on the iframe, the properties there as opposed to what came out of the box. So I don't want a height of just 800, I want my page to extend to the full borders of the pages and not get cut off because Then it'll leave an awkward white color background or whatever the browser default is there. So that is why what I do is I have a pre built template which I'm gonna share with you guys at the end of this episode. I have a pre built template and all I do is I just grab, go grab my iframe source and I just plug that source directly into here into my template anytime I'm creating a new template page. And for me, for Guavabox, once you have the owner set, all I really need is just the type of. So if I want to grab a different event here, let's go back to acuity. I want to grab, let's say I want to grab my meeting URL. I'll just grab my type ID and all I need to do is just replace this 312487 with 287144 and we are in business with a new event showing up there on the front end. I'm going to undo that. So I don't, so I don't save it that way. Okay, so what I've put together for you because this may seem for most folks who have had some coding experience, this is very straightforward. But if you're not at that point yet, this may seem a little overwhelming. So what I've put together is a quick little template that I'm going to share with you. You're going to be able to download this if you just go to doinbound.com toolbox you'll be able to find the show notes and grab the download link. But here is a pre built HTML template that has everything that will work inside of HubSpot and tells you exactly what you need to replace. So just replace this with the iframe source URL from your Acuity event and everything else will take care of itself. Now if you need the front end styling, you're going to want to go back to episode number four of Agency Toolbox and you'll be able to grab the pre built style sheet that I put together for that as well. You can find the show notes for that at the same place. Just go to do Inbound Toolbox. All right, well that does it for this episode of Agency Toolbox. If you have any questions about how this works or any suggestions for improvement tools you'd like to see covered in a future episode, just send me an email@grayoinbound.com and I will look at those, get back to you and hopefully be including that stuff here in the upcoming shows. All right, we will see you next time in episode number six of Agency Toolbox.
