How to get your Bubble Users into to the HubSpot CRM as Contacts

Multiple places with lists of customers becomes hard to manage. Lets consolidate this in a CRM

Hi there,

Once you start to get people signing up to your cool new app, you’ll find you have a new problem. You’ll have a list of users in your users table, possibly a different list in an Invitations table, maybe another list in a system where you send newsletters ‘about’ your product, a list of people you’ve contacted separately via email, and over time, others lists from other products you build.

These lists may overlap in some cases, some records will be new, some old, some will have logged in recently, some not. Some have contacted you, some not. Even at small scale this can be hard to manage, so let’s tidy this up a bit.

CRM

What is a CRM. The acronym stands for Customer Relationship Management.

Customer relationship management (CRM) is a technology for managing all your company’s relationships and interactions with customers and potential customers. The goal is simple: Improve business relationships to grow your business. A CRM system helps companies stay connected to customers, streamline processes, and improve profitability.

Often this same term is used to also describe the software which helps manage this relationship, hence it is called ‘the CRM’. Examples of this are HubSpot and Salesforce.

So.. In this article I’m going to describe how we can get the new customers from the Users table of a Bubble application, into the Contacts list in the Hubspot CRM.

Why

Indeed, why do this at all. There is a perfectly good list is users with email addresses in the Users table in Bubble.

I’ve found that over time I want to know the lifecycle of a customer. Some are brand new, having only signed up for the site, then nothing else.

Some have created teams, but not invited team members, therefore they aren’t getting the full value of the product.

Some have full teams, but no work items.

In addition to this, I have several products in varying states of completeness, and each of these has a list of contacts which I’d like to communicate with, and in particular, communicate using the correct context.

I don’t want to email everyone reminding them to set up a team, when most have already. You get the idea.

So, I want to consolidate all customers in one place, into a tool that is designed specifically to manage this process.

Enter the CRM.

HubSpot

Why Hubspot. 3 Reasons:

  1. Natalie Furness recommended it and she knows what she’s talking about. Find her on twitter via @Natalie_Furn

  2. Hubspot has a free tier, which you can upgrade later if you need to.

  3. There is an existing Bubble plugin

Scope

So, what is our goal.

  1. Adding new Bubble users ‘as they sign up’ into HubSpot as Contacts

There are other very useful things we’d want to do in the future, such as updating Lifecycles in Hubspot when certain states change in our app [ i.e team creation, subscription start, etc], but we’ll cover that in another article.

Also I’m excluding the export/import process to bulk load existing contacts into Bubble. This is fairly straightforward so you can follow your nose on that one, but DM me on Twitter @MartyLindsay_NZ if you need some help.

Hubspot Setup

Browse to https://www.hubspot.com/ and click the button: ‘Start free or get a demo’

On the ‘Get Started with Hubspot’ page you are presented with several products, related to Marketing, Sales, Service etc

We’ll just choose the one at the top:

Progress through their wizard to get your account set up.

One you are logged, you want to locate the API key as we’ll be needing that for the Hubspot plugin configuration.

Click the Cog icon near the top right of the screen

Then in the left side menu, browse to:

Integrations | API key

Click Generate API key

[Note, if you have previously created a key, the text will be Show
ref https://knowledge.hubspot.com/integrations/how-do-i-get-my-hubspot-api-key ]

Make a note of this key in a secure password management system.

You’ll also need to know your UserID. You can find this is the URL of your logged in Hubspot session.

i.e https://app.hubspot.com/settings/123456789/account-defaults

Bubble Setup

The easiest step is to use the Hubspot plugin. Like most plugins this will have its limitations, but it’s a good way to get started with the basics & for more complex use cases there is always the Hubspot API.

The plugin is located under:

Plugins | + Add Plugins | Search for a plugin… | Hubspot | Install

Plugin Config

Take your API key and User ID from the previous step, and paste them into these fields:

API Key

User ID (headers)

So.. what have we done so far:

  • Added the functionality for Bubble to send data to Hubspot [ the plugin]

  • Given your Bubble app permission to read/write that data in Hubspot [the API key and UserID combo]

What to Synch

So, what do we want to send to Hubspot? I think the minimum would be the Firstname, Lastname, and email address so let’s start there.

When to Sync

Ideally when a customer signs up to our app, that would be the trigger to send this new customer record to the CRM, so what we’ll do is bolt on this new action to an existing User sign up process.

In my case I have two different Signup methods, Google and Facebook. I don’t want to repeat myself by adding the ‘CRM’ bit twice, so I’ll set up a new custom event, in the Workflow tab of my signup/login page.

I named it ‘new user admins tasks’, as there may be other things in the future that I’ll consolidate into this action. For now I’m just adding the CRM bit:

In here I have two actions, one to Send data to Hubspot to create a new record, and another to collect the identifier from Hubspot, to update my User table with, for this new customer:

What is this ‘vid’ thing? It’s just their acronym for Visitor Identifier.

I should mention that I also extended my User data type to include a vid field, in order to hold this value.

The Trigger

As I mentioned we want to connect our new user sign up process to this new Action to update the CRM. In my case I just need to reference this ‘new user admin tasks’ custom action, in the two sign up methods I have.

For each of Google and Facebook sign in, I have added this additional step.

And, that’s it :)

When a new customer signs up, we call the new custom action, pass it the Current User, and the Hubspot plugin accepts this, authenticates using the API Key and User ID, then creates a new Contact record in Hubspot.

What does this look like?

Over in the Hubspot website, we can find our new contacts in the Contacts| Contacts menu:

By default, they will be assigned the default Hubspot lifecycle stage of subscriber. We’ll talk about these in a future article, but for now here is info from Hubspot:

Lifecycle stages

https://knowledge.hubspot.com/contacts/use-lifecycle-stages

The default Lifecycle stage property contains the following stages as options:

  • Subscriber: a contact who has opted in to hear more from you by signing up for your blog or newsletter. This is automatically set by HubSpot when a contact converts on a blog subscription form, is created through a conversation, or is manually created in the contacts index page.

  • Lead: a contact who has converted on your website or through some other interaction with your organization beyond a subscription sign up. This is automatically set by HubSpot when a contact converts on a lead form, is synced to HubSpot from Salesforce, or is created from a contact profile in Gmail or Outlook

  • Marketing Qualified Lead: a contact that your marketing team has qualified as ready for the sales team.

  • Sales Qualified Lead: a contact that your sales team has qualified as a potential customer.

  • Opportunity: a contact who is associated with a deal (e.g., they're involved in a potential deal with your organization). If you've selected to Sync lifecycle stages in your settings, this is automatically set by HubSpot when a contact or company is associated with an open deal.

  • Customer: a contact with at least one closed deal. If you've selected to Sync lifecycle stages in your settings, this is automatically set by HubSpot when at least one deal associated with the contact or company is set to Closed Won.

  • Evangelist: a customer who has advocated for your organization.

  • Other: a contact who does not fit any of the above stages.

I plan to create some custom lifecycle stages which relate to specific states in my app, but for that I’ll need to use the Bubble API Connection and the Hubspot API. There is some general info here:

https://community.hubspot.com/t5/Tips-Tricks-Best-Practices/Quick-Tip-How-to-create-a-custom-Lifecycle-Stage-property/m-p/251581

Thanks for following along with this free article.

If you know of someone who would find this useful, please share. If you’d like access to all my articles, please consider signing up as a Subscriber