How to integrate your Bubble.io app with Hubspot

Ever feel like your bubble app is living in isolation while your sales and marketing team is drowning in manual data entry? Here's the brutal truth. If your app isn't talking to HubSpot, you're leaving serious money on the table. Hi, I'm Dennis Lewis, one of the founders from Ratio.dev and after 40 years in tech, from IBM's secret AIX team to helping build and scale hundreds of startups, I can tell you that most successful apps aren't just functional, they're connected. Today, I'm going to show you exactly how to turn your bubble application into a lead generating, revenue driving machine by integrating it seamlessly with HubSpot. And stick around, because at the end, I'll show you how to get free access to our amazing no code resource center. Look, I've audited hundreds of bubble applications. Here's what I see all the time. Founders build these amazing tools that solve real problems and then they hit a wall. Users love the functionality, but the business side, it's a mess. Sales teams can't track leads, marketing can't nurture their prospects. And customer success has no clue what users are actually doing in the app. Here's what happened to one of our clients. Let's call her Cinera. She built this incredible fitness coaching platform in bubble. Users were signing up, coaches were booking sessions, payments were processing. Everything was working. Except her business was barely growing. Why? Because every lead lived in a silo. Her marketing team had no way to follow up. Her sales process was completely manual, and she had no idea which features actually converted users into paying customers. But here's the thing, and this is where most people get it wrong. The solution isn't to rip out your bubble app and start over with some enterprise platform. The magic happens when you connect your bubble application to HubSpot's integrated suite of marketing tools. Email marketing, CRM, content creation, social media, all of it working together with your app's data in real time. When we integrated hero's app with HubSpot, something incredible happened. Not only did her lead conversion increase by 340%, but her customer lifetime value nearly doubled. Why? Because now her app wasn't just solving specific problems, it was actually driving her business forward. Now, I know what you're thinking, Dennis. This sounds complicated. And yeah, it can be if you don't know what you're doing. But here's the secret. I've been doing integrations like this since before most people knew what an API was. Back in my IBM days, we were connecting systems that weren't supposed to talk to each other. I remember connecting servers all across the Balara Islands in Spain before people even knew what TCPIP was. And these days, with Bubbles API connector, which by the way is one of my favorite features in the entire platform, this integration is actually straightforward. Once you know the steps. In the next few minutes, I'm going to walk you through the exact four step process we use to connect any bubble application. With HubSpot, you'll see how to create new leads, automatically, update custom properties based on user behavior, add notes to contact records, and store HubSpot IDs in your bubble database for future workflows. By the end of this video, you'll have everything you need to turn your app into a24.7 lead generation and nurturing machine. But first, let me tell you why this integration is so powerful. Organizations that run on HubSpot use it as the revenue driving part of their business. And when you integrate your bubble application with this system, you're instantly forging a link between between your application and your growth engine. Think about it this way. Your app might be solving a customer's immediate problem, but HubSpot is thinking about the entire customer journey. Where did they come from? What content did they engage with? How many touch points did it take before they converted? What's their predicted lifetime value? And I learned this lesson the hard way. Back in the 2000s when I was building one of the first online wine recommendation engines in Spain. We had this amazing algorithm that could predict what wines people would love based on their taste preferences. Users were obsessed with it, but our business was struggling because we had no way to nurture those relationships. Every user interaction was a dead end. If HubSpot had existed back then, and if Bubble had existed, we could have turned that wine app into a subscription business worth millions of. Instead, we were just a cool tool that people used once and forgot about. All right, so let's get into the actual implementation and here's the four step process that we use for every HubSpot integration. Step one, set up your HubSpot API access. So first things first, you need to get your API key from HubSpot. So you're going to log into your HubSpot account, you're going to go to Settings, then Integrations and then API key. And you do need to make sure that that user has the correct permissions because otherwise things won't work down the road and you will be troubleshooting for hours. I've done that. Been there. Step number two, configure your API calls in bubble now here's where the magic happens. You're going to come in to the API connector, okay? So you're going to go to plugins API connector. You're going to set up a new API, call it HubSpot. I'm going to open this up for you here and you're going to create some API calls. You're going to create one for Create Contact. That's going to be a post. You're going to use the objects slash contacts. You're going to put bearer space and your API key here in the header as an authorization. And the content type is application JSON. And then down here you're going to make this an action and you're going to, you can use it as a data type JSON. And then you're just going to put down here in this JSON with properties, email, last name, first name. This is where you can set up custom properties that you've set up in HubSpot and you can pass them through here. So in this case we're passing through a clinic name. You're going to give it the lifecycle stage. You can also set a source if you want so that HubSpot knows where this contact can came from. Then you're going to initialize it and boom, now you have an APL call that will create a new contact. Another thing you're going to need is to check and see if a contact already exists. So you're going to go and use create one called Retrieve Contact by Email. This is going to use a get call. I'm using it as an action as well with the JSON. It's going here to Contacts. You're passing it in the email and here you're going to have the same authorization. You're going to pass it the email as a parameter and this will automatically return the ID for that contact if it exists. And we'll see later how we're going to use that in the workflows. And then also the last one here we're going to create is add note to contact. And to do this you're going to pass your authorization. That's no big deal. There's this JSON structure that you need to pass through and it's really important here that you're going to pass IT Association Type 202. This is the one for associating a note to a contact. If you want to know how I figured out that it was a number 202. You can create an API called Retrieve Contact Associations and it will tell you, give you the list and you can just see which one it is. And then you're going to pass this through a timestamp, the contact ID, which is the ID in HubSpot for that contact that you're going to get when you create it notes or when you retrieve it, and then you're going to pass it the note for the text. This is going to allow us to add notes to any contact on HubSpot based on things that happen in your application. So think about it as a really cool way to keep your sales team up to date on what you know a specific user might be doing in your bubble application. So these are the API calls that you're most likely going to need. You can go to the HubSpot API documentation and you can do anything else that you want. Completely open to being able to do basically anything you could manually do in HubSpot you can do via the API. But this gives you a good idea how to go for it. The next step we're going to do is we're going to build the backend workflow. So this is crucial. You want this integration to happen behind the scenes so it doesn't slow down your user experience. We're going to go into backend workflows here. And I have in here process HubSpot. We have a quiz. The customer is taking a quiz in this bubble application. When the results get stored, we automatically pass them on to HubSpot so that we have a record in HubSpot that they took this quiz of what their score was and what result they got. So the first thing we're going to do is we're going to check to see if the contact already exists in HubSpot. So I've created a custom event called HubSpot Check Contact. And what this is going to do, first thing it's going to do is it is going to pass the email and just send the API call to HubSpot to retrieve that contact's information and passing back two parameters from this contact custom event. So I'm taking the input as the email. I'm passing back the HubSpot ID. It's optional. This is important. They both need to be optional. And I also passing back a boolean which is does not exist and it's either a yes or no. In order to make this work, it has to be optional because you need to be able to have two different return datas inside your workflow. Otherwise bubble won't let you do this. The error is no. Whenever I've called the retrieve and it didn't give me back an error, then I'm going to pass the ID from this call and I'm going to say does not exist is null because it does exist. If it does give an error, that means it couldn't find it. So then I'm not going to pass HubSpot ID because there's not one. But I am going to pass a yes does not exist. And this is going to allow me to check if it exists and let the rest of the workflow process correctly. So the first thing I do is I trigger that custom event. You already know if you've watched my videos. That means when you do custom events, they execute in order so you don't have to worry about them all firing at the same time. And then we're going to trigger HubSpot new contact. If the result of this does not exist is yes. So if it doesn't exist, we're going to create a new one. So what that will do is it will go HubSpot new contact. What it will do is it'll create the contact, it'll pass it in all the data that I gave it, and it will either return back the HubSpot ID or it will return back the error message. So just another really simple custom event that will go in order. Now then, I want to be able later on here to actually have a single id, either a new one or one that I've retrieved. And I don't want to have to be making my workflows really complicated. So I'm doing a little trick here with another custom event which takes in both of these, takes the retrieve ID and the new id, both optional. So one of them is going to be empty and one of them is going to have data. And I'm going to do here, retrieve ID is not empty, formatted as text. So if it's not empty, going to return back retrieve id. And if it is empty, I'm going to return back the new id. What does that mean? That means now when I come back here in my workflow, all I have to do is refer to the result of this custom event to get the id, and I don't have to be looking to create one. I won't have to duplicate my steps. Just a little, kind of a cool little thing there. Okay, now I'm going to create a new note. So I'm going to pass the result of this HubSpot ID, I'm going to pass it the text. In this case, I'm saying, quiz completed, Bob. The score was that okay, And I'm going to make the changes now in my participant database in bubble, I'm going to store the HubSpot ID. Okay? So that makes it so that in the future I can always refer back to that id. I don't have to be looking for it every time. So now I've got it stored. So that's how in a backend workflow you can step by step integrate whatever process you want in your bubble application. With HubSpot, you can create a note, you could create a new contact, or you could modify one if it already exists. And then the last step, step four, is just to store that ID in your bubble database so that you have it for the future. That way you won't have to do searches or API calls again. You could just update them directly in the future because you already have their id. So when someone completes their quiz, this real world example is that it actually takes it and takes their data, puts it into the to HubSpot. And that could do all sorts of things in the future in HubSpot, you could have a workflow in HubSpot that triggers whenever there's a new contact created with the source coming from the mobile application, for example. Easy to do. And the results of this for our customer, their conversion rate went up from an 8 to a 27%. That's how important actually doing this is. Now, before we go on, let me go over some of the common pitfalls and stuff that you probably should know about so that you don't make the same mistakes that we've made. Mistake number one is overloading HubSpot with data. Okay, just because you can sync every every field doesn't mean you really should. So focus on the data that makes sense for your business case, because otherwise you're going to overwhelm your HubSpot users with stuff that they don't really care about. Mistake number two is forgetting about error handling. So sometimes APIs fail. You may need to put in some retry logic or you may want some fallback options in case bot's having a bad day or something. And number three is forgetting to think about your privacy rules. So make sure you have everything set up correctly in bubble so that you're actually able to get the information and you're not passing empty fields through. I've had that happen before, so just thought I'd mention that. And then number four is ignoring the user experience. So that's why I said it was really important to do this on the backend because you don't want to be Slowing down the user experience while you're updating HubSpot. Okay, it's not something that should be affecting your your users. So that's a good example of something that could slow you down. So the big picture here is what most people don't understand about integrations like this is it's not just about connecting to tools. It's about creating a competitive advantage. When your app is integrated with HubSpot, you can automatically segment users based on their in app behavior. You can trigger marketing campaigns based on feature use in your applic. So when they do something in your application, maybe that triggers a marketing campaign, you can score your leads that are coming in from your bubble application. You can provide your sales team with more data and context about every prospect that's in your HubSpot. And then you can create feedback loops that improve both your product and your marketing. So this is what we mean when we talk about building applications that don't just work, but but that they grow your business. This is really powerful from a business point of view. So once you've got the basics working, here's some kind of advanced tactics that will set you apart. Definitely using the custom events and the properties. I went through that when we were looking at the actual workflows. Okay, don't just track said someone signed up, track how they got to your app, keep track of their source so that quiz score whatever it is, set up workflows that respond to specific user patterns. So if someone hasn't logged in for seven days, trigger a re engagement sequence on HubSpot. If they're using advanced features, offer them an upgrade path. Think about it from a business point of view. Also revenue attribution. So it gets really interesting. By tracking the entire customer journey from first touch to purchase, you can finally answer that question. Which marketing channels actually drive revenue? And I remember working with a SaaS company that thought that their blog was their best lead source because that's where they were getting their most signups. But when they integrated their bubble application with HubSpot and they tracked the entire journey, they discovered that their highest value customers actually came from LinkedIn ads. But they were just taking longer to convert. And that insight completely changed their marketing strategy and led to a significant increase in roi. So another thing that I want to talk about is scaling and maintenance. So here's something that nobody talks about that integrations do need maintenance. HubSpot updates their API, your app evolves, your business needs change. So think about this from the beginning. You may want to put in version control, test protocol, so you're really doing it monitoring. So maybe you want to record in your bubble database API call logs so that you can actually go back and if something goes wrong, figure out what happened. Using the bubble server logs is always the easiest way to debug backend workflows. And here's a pro tip from 40 years in tech. Always build your integrations with the assumption that they'll need to handle more data than you expect. So that fitness app that we built for Sarah, it started with a hundred users and now it's processing thousands of HubSpot updates a day. So it's a good thing that we built it thinking about that from the beginning. And that's where architecture like using the backend and making sure that everything is really tightly put together is really important. So look, what I've shown you today is just the tip of the iceberg when it comes to building bubble applications that actually drive business results. This integration process, the API setup, the workflow architecture, the error handling, it's the same approach we use for every complex integration that we build at ratio.dev, but here's the thing, having the technical knowledge is only half the battle. The other half is having access to the right resources, the vetted plugins, the proven templates, the community support. And that's what you're going to find in our ratio.dev no code resource Center. It's where we put in everything that we learn about bubble, about building applications, all of our videos, all our podcasts, all of our, the plugins that we use. We're gonna, we're building more mobile apps now. That's all going into the Resource center as well. So if you wanna get free access to it, just go to ratio.dev or use the link in the description below, put in your name and your email and you will get added in. You'll get immediate access. We update it every week. So I think it's really something that you know will be of great value for you. So thanks for watching. If you liked the video, give it a thumbs up, subscribe to our channel. That makes us feel really special and yeah, see you on the next video.