Ditch Heavy Plugins! How to Integrate 400+ Platforms in Bubble Without Slowing Down Your App

Are you drowning in a sea of heavy bubble plugins just to connect basic services like Google or Slack or Stripe or Facebook? What if I told you there was a way to integrate with over 400 different platforms using just one lightweight solution that gives you complete control over your connection tokens? Look, Denis, I'm Dennis Lewis from Ratio.dev and after 40 years in tech and building more bubble applications than I care to count, I've seen the same problem destroy app performance over and over again. You start with one plugin for Stripe, another for Google, Maybe one for LinkedIn or Slack, and before you know it, your app is crawling. Because every single plugin loads its entire structure on every page load. And it also is hodgepodge of I have to do this for this application, I have to do this for the other one, I have to use this function here. And it just becomes a nightmare. And here's what's even worse. You don't even control the connection tokens. So most of the time, you're stuck with whatever functionality the plugin developer decided to give you. What if you want multiple connections to the same platform for the same user? What if you want to share connections between different users? Or what if your specific use case requires something totally different? Well, lucky for you, you found this video. Here's the dirty little secret that most bubble developers don't realize. Those application specific plugins are productivity killers. They're big, they're heavy, they blog down your application, you even when you're not using them. And some of them update regularly, some of them don't. It's just a real pain. So think about this. Plugins load their entire structure on every page load. Now, that doesn't mean the entire structure of the plugin and its functions and its API calls, all of that gets loaded on every single page load. Imagine that you want to integrate with four or five different platforms. Well, you're talking about potentially seconds of additional page load time just from plugins that might not even be used on that page. And here's the kicker. These systems almost never give you control over the actual connection tokens. At best, they store them in your user table. Most of the time, you have to rely on their functionality for each and every connection, each and every request to the platform. And it's just not an optimal solution. And that's where nango.dev comes in. And this is going to blow your mind. Nango is one of the world's most powerful integration platforms for developers, and you can leverage it without writing a single line of code straight from your Bubble application. Nango has pre built connections with over 400 distinct platforms. It has a generous free plan for getting you started and you can even self host it if that works best for you in your case, because they do have an open source solution. So if you don't want to pay for the cloud based solution, you can set up your own server. You have to manage it, you'll have to maintain it, all of that. But I have clients that have gone that route. And most importantly, what you are about to learn leaves you in the driver's seat. You have access to the tokens, you can store them in any database table that you want. You can seamlessly integrate the functionality into your front end and backend workflows wherever you need it. And you can do all of this without installing a single platform specific plugin that might slow down your application. So here's exactly what I'm going to show you today. First, I'm going to show you how to set up your Nango account and configure individual connections. Then I'm going to show you how to set up OAuth apps in the developer portals. I'll walk you through that process. And third, I'll show you how to get access to our proprietary in house bubble plugin that makes this whole thing seamless. And it's not on the plugin marketplace. I'll warn you up front. Fourth, I'll show you how to launch the OAuth flow from your Bubble app and then store your integration tokens inside your bubble database. And finally, how to use those tokens with the API connector to make actual API calls. This closes the entire circle. And the cool thing is that you can have a single functionality built that works for 4, 5, 20, 30 different platforms if that's what you need without bogging down your application. Look, we've implemented this exact system across dozens of client applications at ratio.dev. we've seen apps go from sluggish plugin nightmares to lightning fast integrations. And the best part is your users get a better experience and you get complete control over how those integrations work inside your application. All right, so let's jump into the actual setup. First of all, I am going to show you the mango.dev website, some of the people that use it, some of the companies, how you can unlock hundreds of APIs, you can ship them fast, which is really important because one of the cool things about Bubble applications is that Bubble integrates really well with almost every everything. But the key here is that all of these different platforms rely on OAuth authentication and connection tokens to allow you to communicate with their APIs. And this solution of integrating Mango with your bubble application just will make this a complete game changer for you to be able to integrate stuff into your bubble application. The first thing you're going to need to do is you're going to need to go here and sign up for an account at Mango. Once you're in there, you can see their documentation and you'll have a separate environment for development and production, just like in Bubble. Really cool. And then once you've got your account set up, you can see here you're getting up to 10 different connections. So those are 10 different platforms. You get up to a thousand different actions. So, so that's a thousand different API calls before you even need to pay. So you can get this going and then it's not terribly expensive either after that, and it makes sense to pay for this platform. So the first thing you're going to do is you're going to go to the Connections.

Tab and this is where you're going to set up each of the platforms that you're going to connect to. So in this case, I've set up QuickBooks and you can just add a new one just by clicking here and then going and choosing from the list. There's just a whole bunch of those for each platform. You're going to need to go to the platform's developer portal. Okay. They almost all have this, and usually you'll have to create what they call an app. And this will give you. You'll need to log into your account with the platform and then you'll set up an app that is the other part that will communicate with Nango to negotiate the authorization flow. So when you do that, you'll get an API key, a secret key, probably from this platform, and you'll put those into the connection that you create here on the Nango Dashboard. And once you've done that, you'll also need to go and in your environment settings, you'll be able to go down here and you'll see that you'll put in. First of all, the webhooks here are where you will want Mango to communicate back to your bubble application. So this is just a webhook that we'll show you in a second how we create that in bubble. And you'll also need a callback URL. This you want to put into that developer app. So in this case, in QuickBooks, when I set up a quickbooks app, I put in this callback URL. So that's where they will communicate back and forth. So first thing you'll do, you'll create the connection in Nango. Second thing you'll do is you go to the developer platform. It's out of the cognitive scope of this video. I'm not going to take you to QuickBooks and show you that, because each one is a little bit different, but they're all very similar. Set up an app, take the client ID and the secret ID that they'll give you, put those into Nango, put the callback URL from Mango into that app and it'll be good to go to Communicate. Once you've done that, now we have the critical piece of Dango setup to communicate with the platform and you can do that for as many platforms as you want. Like I said, you get 10 free and Nango on their cloud server, but you could have 300 if you need them. So no big deal there. The new integration and then the connections are the actual connections from users. You are Nango and your app on the platform. Next thing you're going to need is we're going to go into the Bubble builder. You're going to need this plugin that we've created. It is a private plugin. So reach out to us@ratio.dev we'll get you sorted there. And here you will put in your API keys. These are just test keys anyway for Nango, so that it knows how to communicate with your Nango server. Then you will need to set up a backend workflow. So I'm going to go here to Lingo, which is where you will create a API webhook. So backend workflow that is exposed as a public API works without authentication. You can ignore privacy rules if you want and you'll use detect request data. And what you'll do then is it will open up a little menu there and you'll need to create the first connection with with Bubble so that it can the Nango dashboard just initiate an integration. Boom, it will send back and that will allow Bubble to configure the API. Call that the data that it's going to get back. Once you've done that, then you're going to want to for each of the types. And by the way, we're here to help you get all of this set up perfectly well so we can help you with that. Then what I've done is I've created a custom event so when it is of a type auth, then I bring in the auth mode, which is either OAuth1 or OAuth2, the environment is it dev or prod, the organization ID, the end user ID. This is the text for the specific integration. In this case, for example, QuickBooks. I will store the connection ID and if it was a success, yes or no. And I'm putting those in to a table that I've called integration. And I'm going to show you the structure of this table here. Types. Let's go to integration here. I've got a place to store the secret key in the token because if it's in OAuth1, it will give you back an access token and an access secret. However, if it is in OAuth2, it will give you back an access token and a refresh token. So I store those. The AUTH mode is the text that I get back, showing me if it's OAuth1 or OAuth2, the connection ID, I will record those back in. I can connect this with whatever user data type or whatever title type I want to associate in my database. So this is how powerful this is. You can connect it to whoever you want, the provider, if there, if Ningo replies back with a specific data that might be associated to that specific platform, then for example, QuickBooks sends you what's called a realm ID. Well, I put that in here as well, so I can store that with the integration, the refresh token, the session id. This is important, another important data point that you'll need and then whether it was a success or not. And I just keep that in this table, locked down with tight privacy rules and you're good to go. Once you've done that, that will establish the way that Nango will be able to talk back to your Bubble application when it generates an actual connection via OAuth, when it does the flow. So let's go to a page, but I'll show you now how we would launch the OAuth flow. So there's a Connect button here. I've created just a normal button in Bubble. I've called it Connect and let's go look at its workflow. So what I'm going to do here, and that is I'm going to create a new connection as I'm connecting with this platform. By the way, if there's already a connection for this platform, then you can hide that button up to you. You have full control inside your Bubble application. So I create a new connection and then I use a function from our plugin called Nango getsessionid and I'm going to pass it the platform from that I've created here. Okay, so in this case I created this just saying QuickBooks, but you can use whatever logic in your application. Depending on you could have different buttons for different platforms, however you want to do it. But I pass it the platform, I pass it the unique ID of that integration. So that is the ID that I'm going to be using and it's going to be stored also in my Mango dashboard. So I can always go back and look through these and make sure things are working correctly. I'm going to pass it the email for this user that is just so that Mango will have that data also in the database. And then I'm going to pass it their name as well, just because I want to. Okay, not all of these are obligatory. You can also pass in an organization and the name of the organization if you want, because sometimes you're going to want to have a connection that works for a whole suite of users and they're all sharing the same connection. So you would associate that with your organization and you might pass that name and ID to Mango as well. Once you've done that, this will give you back the session id. Okay, this will go to Mango and say, give me a session id. I store that in my integrations. Don't lose it. And then I use the function startconnection and I pass it the config key, which is the platform, the connection ID and the session id. And this will open the window in the front end for the authentication process. So it'll open a pop up and the user will authorize the connection. Choose. Sometimes, like Google, you might choose a different what platform, what service you're connecting to, whatever that connection integration requires. And then at the end, once this happens, Mango will reply back to us through that webhook and we can store in the backend. Once it's done, we will store all of these data back into the integration table and then you can do whatever you want with it. So that gets us the entire flow solved and you have control over the tokens and the connection IDs. It's really important. This is not something that you're limited, you're not handcuffed to a specific solution. The next thing is how do we maintain those tokens and how do we actually communicate via the API? Those are the last two things that we need to do. So in this case, let's go back to our design here. I have a button called Refresh. Now, normally you wouldn't have a button for this. You will just do what this does before you make the API call. So every time you're going to make an API call, the normal thing to do is to refresh the token. Although different platforms have different durations of the tokens and you'll actually get back the date from our plugin. We'll give you back the date if you want. Best practice, refresh the token, send off the API request. Okay. Now if you want to do separate those in and do them time wise, you can do that as well. The like I said, you have complete control. So this one, let's look and see what it does is it gets. I have a custom event which is get integration, which I'll show you here. This is just so that I don't have to be doing the same search over and over again. So all it does is it returns a search for the correct integration, pulls that in that way I can just refer back to that to that result. Have to search more than once. Just good practice there. Okay, if the keys are OAuth1 so if that connection is his auth mode is OAuth1 then I'm going to use one, I'm going to use get keys OAuth1. Otherwise if it's OAuth2, I'm going to use get Keys OAuth2. All right? And these are just because the data structures they're going to give me back are different. So you just check do one or the other and based on which one it is, then you store the access token in the secret if it's an OS one or you store the access token, the refresh token. And in this case I'm storing the rel id, I'm getting that back and I have those stored in my integration table. I can use them wherever I want. And so the next thing I'm going to show you is just if I want to communicate with the API in this case I'm just getting the integration back. Yeah, well, it gives me the wrong ID and I can get the token back. And I'm sending this in to. If I go to plugins to an API connector and I go to, in this case QuickBooks, I have one here, balance sheet and I'm passing it through. Here's the realm ID. I'm passing it in because I need that for QuickBooks and then I'm passing it realm ID and authorization in the header. And then you can pass whatever parameters just like any other API call. But this allows me to pass in the token that I get from the integration use it to communicate with the API. And with that we've covered the entire sequence. We've set up Mango, we've set up our platform app, we've made, we've connected those two together. Then we set up the webhook in bubble. We set up a button to initiate the connection, the OAuth connection. We get the information back from the webhook and then we can use that to communicate with the API whenever we want. And we can refresh the token either every time we make an API call or before it expires. That is the walkthrough of how this entire process works. Now let me tell you about one of our clients who implemented this exact system. They were building a marketing automation platform. They needed to integrate with Google Ads, with Facebook ads, with LinkedIn, ads, with Slack, about 15 different platforms because they were Shopify and before they took this approach and they used Dango with our Appel, they were trying to upload like eight different plugins on every page. It was a nightmare. They were all different. They couldn't get access to the tokens so they had to use the functionality that the plugin had. Wasn't working. They were lost. And after switching to the system, their page load times dropped to under two seconds. And they had a way to control the entire experience and make it cohesive for each platform, but giving a very similar user experience so that it didn't feel weird, it felt very put together and that's important. And their users loved it because the authorization flows were consistent across all the platforms. And as a developer, they were amazed because they could get access and use it however they needed. In their case, they decided to go with a self hosted Mango server and they maintain it. And then we created a specific plugin that communicates with their server instead of going to the Mango cloud server. Both are perfect solutions and I hopefully this will really help you in your bubble journey. So let me share just a couple of pro tips. Always implement proper error handling. They can go wrong sometimes. It could fail, the user could cancel. So make sure you take care of that. Implement the connection status checking so you know before you make API calls, I recommend that you just refresh the tokens that way. We've already done that in the plugin. You've seen how we do it. It's really simple. We'll just make your API calls more robust. Make sure that you provide a clean user interface in your admin portal or your account page, wherever it is. They're creating these connections so that you can quickly and easily connect to all the different services that you want to offer to your users. And then finally think about security. Even though Nango's handling all the heavy lifting and we've been really careful to not put any important information in a front end, it's your responsibility to create correct privacy rules for that integration table to know where you're storing those tokens. If you're storing them in a user table or somewhere, make sure your privacy rules don't allow those tokens to be visible because somebody could get them out of their browser and then use them. Let's talk about just some numbers here. In our testing, switching from multiple platform specific plugins usually can reduce 30% of your page load speed. Sometimes if you got a bunch of these is there really they tend to be heavy, but the benefits go beyond just the page loads. It's because you're able now to make direct API calls, you're not going through third party code there. You're able to control a lot more how your application responds and how it works. This will also save you because a lot of these plugins, they have their platform and they charge you there as well. You know you're paying for one for LinkedIn and another for X and just becomes a nightmare. So now that I've shown you today how to get this all going, it's just a foundation. If you need help, feel free to reach out to us. Take advantage of going to ratio.dev and signing up for our no Code Resource Center. That's where you will find how to videos, vetted plugins, guides, podcast, episodes, books to read. Lots of great information there. It's for free and it will definitely help you in your no code journey. So I totally recommend that you go there and sign up. If you've enjoyed this video, give it a like give it a thumbs up. Subscribe to the channel. We really appreciate that. Let us know in the comments if there's anything that you didn't understand or you want to know. Go to ratio.dev sign up and have a call with us if you need help setting all this up for you. We'll be glad to do as well. Hope you've enjoyed the video. See you on the next one.