Even once your decision is made, you may find out the platform lacks native support (components that are already built into the platform) for functionality you may desperately need. This leaves you paying more to integrate additional assets.
To get some advanced insight, I sat down with two of IMPACT’s senior web developers, Kyle Sheldon and Tim Ostheimer, to discuss why HubSpot not only makes their job easier, but helps them make client websites easier for both parties to create, edit, and manage.
In the interview, we go over some of HubSpot's key features including its template builder, its templating language (Hubl), HubDB, Workflows, and their API documentation, as well as how these tools make it easier for them to achieve marketers goals.
HubSpot’s Drag-and-Drop Visual Website Builder
CA: So I guess we will start off with you, Tim. Why do you prefer HubSpot’s drag and drop visual website builder to say, something like using WordPress when trying to make a template?
TO: Well, WordPress isn't standardized, so it depends on what theme you have.
I don't think WordPress is even a good comparison because it is open-sourced and all the templates are at the liberty of the developer who made them.
From my experience, some of the themes are decent. They all do what they are supposed to do, but they are a little limiting in terms of usability. The developers built them with the intent of preventing people from editing the code which makes it difficult for the people who know code.
To change the templates, you need to manipulate the core PHP (server sided, open source scripting language) in order to even do some basic layouts changes or alter the template altogether.
So, from my experience, I don't think WordPress really does visual builders too well.
The major flaw is just the lack of any sort of documentation. For themes that aren’t super popular, there isn't any sort of space where you can have your questions answered or contact information to talk to anyone.
So, it is sort of all up to you to figure out.
CA: So essentially, it’s very difficult for a client without coding experience to change a WordPress template. They would really have to go to a developer.
TO: Yes, trying to figure out how to change WordPress templates if you aren’t comfortable or familiar with code is incredibly difficult.
This makes it hard to hand off WordPress sites to people whose projects are ending, and they may return to us for changes in the future because they can't figure the code out.
I believe a more fair comparison to HubSpot's Visual Builder is something like Wix or Squarespace which have standardized visual builders.
Yet, they are still somewhat limited and are very basic.
These platforms aren’t meant for people who want designs beforehand that then get built out. They are meant for people who want to use templates, manipulate them with minimal design changes, and primarily focus on adding in the right content -- But these designs are fine for those who aren’t too picky about what the end product is going to look like and simply want something professional.
For those looking for advanced design customization, HubSpot’s Visual Builder makes it easy to manipulate the templates by moving and editing sections. You don't have to integrate any add-ons to get what you are trying to look for. If you do know a little bit of code, it is really easy to do some advanced customization as well.
Not only does the HubSpot's Visual Builder have all the drag and drop abilities, but it also has an abundance of modules you can use. These include text models, image models, form modules, and even custom modules that enable clients or a developer to code out anything we need.
If you like the template you’ve made and want to use it in other places, but have a few changes you want to make, you can clone the template and get right to work too.
CA: Kyle, I want to hear what you have to say, specifically concerning how easy HubSpot’s Visual Builder is to use if a client wants to make simple layout changes themselves. Do you find it easy to hand off HubSpot Visual Builder templates to clients who want to edit them?
KS: Yes, and I believe one of the reasons for this is because of how together everything is, you don’t need to jump around to several different spots for simple changes.
Take WordPress for example, if you want to change a bunch of things, you might have to edit a theme file, then edit a spot in theme options, or edit a widget. For WordPress, things can easily spider web all over the place, but that’s how WordPress is.
The difference with HubSpot is it’s all right there. You don't have to really go in and out of places. Once people using it for the first time learn the UI, it’s incredibly intuitive to use, even if clients aren't that tech savvy.
For those who are tech-savvy, or have a dev team, you can event convert visual templates to hand-coded ones and do more advanced editing.
I constantly find myself telling clients in kick-off calls that HubSpot is far more powerful than it appears on first notice, the value is incredible.
CA: So, we talked a lot about HubSpot's Visual Builder and how great it is for dev’s and clients to utilize, but now I want to move on coded templates and using HubSpot’s templating language, Hubl.
But many people might not understand what HubL is. So Kyle, like a very basic level, can you kind of explain what HubL is and how it helps us when we are developing websites?
KS: Sure, HubL is HubSpot's version of a templating based on Jinja, Jinja 2 specifically. Basically, it’s a server side language, for any math, operations, or code manipulation, that happens on HubSpot’s server, not on a computer browser. So if you has a global header you wanted to set across multiple pages, but don't want to copy that code into every template, you can save that code in your global content in your content settings (soon to be in the design manager), and add that code into a coded template by entering a few characters, rather than copy and pasting everything constantly.
CA: So essentially, HubL makes it really easy for us to quickly pump out templates using snippets that make the site dynamic. One of the core parts of Hubl is its modules. Tim, can you explain what these are and how they are utilized during development?
TO: HubL modules are just short code you can inject into your HTML that each create different areas to place content, like text, images, etc. In the template editor, you will be able to edit your module and add whatever content you want in it.
So you can have a Rich Text Module, which will allow you to enter text, html, images, etc. And, you can have a module for an image to only allows you to add a image.
Then, there are even more advance techniques you can do such as manipulating the content that is actually stored in these models. So with all that in mind, it really gives a lot of power to whoever is building the template, and even the person editing the page.
Overall, these techniques allow us to build templates in an intuitive and efficient way rather than writing everything out manually.
KS: Hang on, let me just talk about this really quick.
Now, one of the most important things that he said there was how powerful it was. Now, one of my favorite things about HubL is the immense logic the language has.
Yet with all this power comes some useful limitations. Let me explain.
You can’t use Hubl to write query strings and erase all your context, like you could in WordPress. This really gives people safety to work in the language without worrying about causing damage to any template.
One other worry we are safe with is HubSpot rolling out core updates to their framework that risk messing up websites. With HubSpot, you won’t hear that there was some mass problem with the current code that caused SQL injection (database coruption) to occur because their software and language doesn’t cause that risk like a WordPress theme would.
As a final note, there is nothing worse than to get a call in the middle of the night that from a client explaining that they attempted to install and update to their WordPress theme, only to discover is severely broke the site. That just sends shivers down your spine.
CA: Interesting. I want to go a little bit more in depth on modules and like how they are used. Tim, you talked about what are called 'custom modules' earlier which allows you to do more advanced design and development customization within templates. So, in more detail, what does a custom module really enable you to do?
TO: So custom modules are again, shortcode in a sense, that enable you to combine bits of code, including other modules.
For example, you can have a custom module with other modules and HTML within it that create testimonials, sliders, or really anything you want to do. This is useful if you ever want to use segments of code over and over without having to copy and paste it.
Custom modules become even more powerful when utilizing a flex column, which is a section of your template that allows you to insert other modules into it, and rearrange them in any order. So, you could add in as many of the custom modules, or testimonials for example, as you want within a flex column. This makes it super easy for anyone to manage or edit.
In WordPress, the theme would have to have a custom setup just for that, but it is really difficult for the user to edit. You basically have to go to a bunch of different places just to edit what is essentially a single page.
Sometimes, we'll have clients come to us with the special request where they want us to create a series of custom modules. Their templates have a large flex column that allows them to drop in any custom modules we build for them so they can customize and build the pages all their own.
KS: And I am comfortable enough giving them that power too, because, like I said, it is not like I am giving them the keys to the Oz. Like what Tim said, give them a fish to eat for a day or teach them how to fish and they are set for a lifetime.
CA: All right, last thing before we’re done with Hubl, let’s talk using conditional statements and smart content to personalize pages and templates. Kyle, I want to come back to you. If I’m a client that really wants to personalize the page in my specific ways, what options do I have? What types of things can you essentially do on the page to personalize it to different groups of people?
With that being known, we can create smart content on your website that alters specific sections based on location, specific property values within their database, whether they are a blog subscriber, etc.
I just recently used smart content on an exit intent I built on a blog. Normally, if they aren’t subscribed to that blog, show the exit intent. In this special case, there is custom logic that checks other properties other than whether or not they are a subscriber to show different popups to people that are more MOFU or BOFU.
CA: It sounds like if HubSpot didn’t have the ability to allow you to like track people and set contact properties based on specific user action, you guys are kind of out of luck for doing smart content unless you integrate other platforms or tools.
KS: Yeah, exactly. And smart content is something our clients need, you can’t tell them it’s not important. If HubSpot didn’t do already do stuff like that, we'd either be using third party vendors or creating our own thing to keep track of it all. But that becomes very cumbersome. That's a lot of data you need to worry about storing and monitoring.
CA: All right. So enough about HubL. We’re going to move on to HubDB (which stands for Hubspot Database). I know, Tim, you have a lot of experience with HubDB, despite it being in beta. Can you briefly go it is and how you started using it for some of your website projects?
TO: Sure. So as you’ve said, HubDB is definitely in beta. I’m sure a lot of things will improve and change, but it’s actually pretty nice that they already gave us access to it. In fact, I’ve already used it on various sites.
What HubDB allows you to do is create any number of tables, which are essentially sheets, in which you create of rows and columns. Each area where those rows and columns intersect is a cell, or module you can edit, just like you would in excel, but the nice thing about HubDB is that those cells aren’t just always text fields. You can actually put in a rich text module, a dropdown, or an image module that you can edit just like you do in a page editor, except the modules are globally controlled (change something in HubDB, it changes everywhere it's being used) and you have a lot more power in how you organize things.
One of the sites that I just recently built uses HubDB as core functionality. The site contains a various array of microsites and on each page they create, they wanted the capability to their own pages for each by using prebuilt assets with all the content in them.
To do this, I used HubDB to create various tables that contain the content they need, but segmented into different rows which represented content they would need for particular microsites.
Within a page template, the person editing it can select from a dropdown menu what particular microsite the are making a page for, and then, drag in the modules they need. Based upon what they pick in the dropdown, the modules will pull in the content from HubDB that correlates with that dropdown. This prevents the need for them to manually enter content.
If they ever needed to change any of the content, all someone would need to do it head to the table, click on the ‘cell’ and enter in the new content. What's great is they can do this at their leisure. There's no code, but a simple training call does help to clarify how everything works.
Although HubDB is new, it’s very powerful and sort of serves a purpose that no other part HubSpot currently utilized, so it’s an exciting feature despite being in beta.
I want to come back to you Tim, because I know we discussed this a couple of days ago. How do you use workflows from a development standpoint?
TO: Before I go into that, just as an overview, it’s important to recognize that HubSpot is primarily marketing software, its purpose is to store contact information. This is beneficial because you can use that contact information for things like personalization, creating the buyer’s journey, triggering automated emails and campaigns, and all sorts of things that you want to run without any sort of manual management.
We use workflows for so many different purposes. I mean, I don’t even know if I can summarize it in a couple words because workflows really are the main chunk of what HubSpot does for you.
As developers, we are not primarily the one using workflows, but most often what we need to do is run one to either segment users or set/update contact properties that we’re using for personalization. We can use workflows to set all of the contact properties & update those based on form submissions, page views, CTA clicks, or any sort of event that we want.
In the backend, we can modify the template to show different content and different information based on those properties, create unique experiences for different users.
CA: Thank’s for that overview Tim. All right, our final point we’re going to talk about is essentially an overview of HubSpot’s API Documentation. Obviously, they have a lot of stuff and we could go really in-depth, but I think we should stay more to the shallow end of the pool.
Kyle, I know people hear the term API a lot and they get really scared by it. So can you, in a non-intimidating way, describe what an API is?
KS: So basically the acronym itself stands for Advanced Programming Interface. Anyone who visits a site hosted on HubSpot is actually interacting with HubSpot's API, but they just don’t notice it.
Let’s look at a simple example. Say you have a website page, and on that website page, you have a form. When someone fills out that form, you need an icon to appear to alert your users of something. We need to use HubSpot’s API code to interact with HubSpot’s form to check when the form has submitted. Once it does, show the icon. Otherwise, we have no way of knowing when the form has actually submitted, or if it submitted at all.
A more advanced technique that I use it for is to take all the images located on someone's HubSpot blog, and run a script to compress their file size. So I utilize the API to reach into HubSpot and gain permission to access all these images within the file manager. From here, I can run a script on them to decrease their file size. If HubSpot didn’t allow access to its API, you’d need to pull each of the images out of file manager manually, put them into photoshop, batch resize them there, and then replace each of the files on HubSpot
The cost and mental fatigue that would arise from asking an agency to do this are unimaginable. In this case, it’s so much more valuable to find an agency that could just use the API to automate the image resize task for you.
TO: I think one of the most common uses for HubSpot's APIs is updating properties within other systems that people use to manage their contacts. An integration with SalesForce & HubSpot is a great example of this. Access to HubSpot’s API allows you to carry and transfer information to other platforms based upon certain actions users perform, their list membership, etc. Without it, you're stuck going back and forth between the two platforms to manually updating the criteria you need changed. This is time people don’t have to spare.
CA: All right, thanks, you guys. Those are all the points I wanted to touch on. To close the conversation, I wanted to get some concluding statements from you two. This time I’ll start with you, Tim. Are there any final thoughts or feeling you think people should know about HubSpot?
TO: The thing that I like the most about HubSpot is that it’s all-in-one software, yet really avoids any sacrifices or compromises you may see with other software that tries to achieve similar results. HubSpot really does everything very well and everything you need is right there, an all-in-one place, organized, with documentation for everything.
There’s even a huge user following. You can easily go to the phones and ask for help and get the answers you need.
Overall, it really does everything that you would want if you are looking for marketing software. And if you are a small business looking to use it, you don’t need to worry about outgrowing it. HubSpot has done an excellent job creating a platform that grows and expands to meet your business needs, regardless of how big or small.
KS: I want to echo all of his points. You hit the nail on the head. One of the points that I really want to talk about that we haven’t touched on yet is how HubSpot brings a really good level of transparency and accountability to any changes that are made on pages. It's easy to see revisions and revert if a mistake is made. That’s one of my biggest pet peeves about WordPress. If you update a page, that’s it. The previous version is gone and there’s no way to recover it.
If someone did something wrong on a HubSpot page, you could see exactly who blew it up and when it blew up. Then, 90% of the time, you can go back to what you had.
It’s functionality like this that makes HubSpot one of my favorite platforms to work on.