How to offer a native CRM integration in your product cover

How to offer a native CRM integration in your product

David Molot profile image

by David Molot

Jan 14th 2022

One of the most important aspects of building a SaaS company today is building integrations, especially with CRM (customer relationship management) systems that deal with such enormous amounts of custom data. These integrations require a signifcant amount of engineering and monetary investment, from building the integration to maintaining the integration for the rest of time.

So what is the way to go about offering your users a native integration? Well with hotglue, a CRM integration within your website is just a few steps away.

The first thing you must do is sign in to your hotglue account - if you don’t have one, hotglue provides a 14 day free trial (you can register for an account here).

Screen Shot 2022-01-12 at 2.20.41 PM.png

Once you log in to hotglue, you will need to create a new flow. You can begin to do that by heading to the Flows section of your hotglue account.

Screen Shot 2022-01-12 at 2.20.26 PM.png

Once on the flows page, you can go ahead and click on the New Flow button.

Screen Shot 2022-01-07 at 9.34.48 AM.png

On this page, you should go ahead and name your flow. I titled my flow “Sales” as I am going to use this flow to pull in sales information from CRMs, but you can title it whatever you want. For example, another common flow is a Contacts flow that pulls in contact information from CRMs.

Once you are configuring the details of your flow, hit the Save and Continue button in the bottom right.

Setting up your integration

Screen Shot 2022-01-12 at 2.19.56 PM.png

Now that you have finished configuring the Flow details, you need to select your data source for this flow. For the integration that we are building in this article, we are going to be simply pulling data out of CRMs (though hotglue supports pushing data back to CRMs as well). Let’s go ahead and use the Salesforce connector for this example (you can add in more CRM sources later, such as HubSpot, Pipedrive, Close, and more).

Screen Shot 2022-01-11 at 10.40.47 AM.png

Now, you should go ahead and put in your Salesforce credentials! If you don’t know how to get these credentials, we have a walkthrough that you can use here.

Screen Shot 2022-01-11 at 11.47.36 AM.png

Now that you have input your credentials, go ahead and click the Save & Connect button.

Screen Shot 2022-01-11 at 11.52.01 AM.png

You will then be asked to sign-in to a Salesforce account - this is for testing purposes only! It will allow you to pull data from this Salesforce account, as well as allow you to choose what fields you want to be pulling in this flow. Go ahead and log in.

Screen Shot 2022-01-11 at 11.52.20 AM.png

Now you have succesfully set up your Salesforce tap! Go ahead and click OK. The next step is choose what data you want to pull from Salesforce!

Picking the data

So now you have completed setting up the Salesforce connection. The next step is to configure what data you want your Salesforce connector to pull.

Screen Shot 2022-01-11 at 2.33.33 PM.png

Now that you have your Salesforce connector live, let’s go in and edit the data you are pulling from Salesforce. You can do that by clicking on the Salesforce card.

Screen Shot 2022-01-11 at 2.36.00 PM.png

On this page, you should go ahead and click on the Customize field map option.

Screen Shot 2022-01-11 at 3.11.30 PM.png

On this page you can go ahead and select all the fields you want to bring into your product.

Screen Shot 2022-01-11 at 3.14.15 PM.png

For this example, I want to pull Contact information from Salesforce, so I searched for Contact in the Search bar. I am then going to select the Contact Field by clicking the gear icon.

Screen Shot 2022-01-11 at 3.21.26 PM.png

Now, I will go ahead and select all the Available fields for Contacts and move it to the Chosen column.

Screen Shot 2022-01-11 at 3.30.09 PM.png

Once you are done selecting the fields, you can go ahead and click the Confirm button in the bottom corner.

Screen Shot 2022-01-11 at 3.34.15 PM.png

Now repeat these steps for every field you would like to pull! Once done, hit the save button.

Delivering the data to your backend

Now that you’ve set up the pull function for hotglue and decided what data you want to pull, you want to set up where the data from Salesforce is supposed to end up.

Screen Shot 2022-01-11 at 2.03.11 PM.png

In the same flow, you are going to select a target for your data. For this example, we are going to send the data to a AWS S3 bucket. To do that, go ahead and click Connect for the S3 target.

Screen Shot 2022-01-11 at 2.07.24 PM.png

On this page, you can go ahead and input your AWS S3 credentials for the bucket you would like to push the data into.

Screen Shot 2022-01-11 at 2.24.12 PM.png

Now that you have put in your credentials in hotglue, go ahead and click on the Save & Continue button in the bottom right hand corner.

Screen Shot 2022-01-11 at 3.35.42 PM.png

That is it! You have configured your flow!

Run a test job

Now that you have set up the flow of data, it is time to test that it works. Head to the Jobs section of the flow you are in!

Screen Shot 2022-01-11 at 3.37.04 PM.png

On this page, you can go ahead and trigger a manual test job. To do this, click New Job in the top right hand corner.

Screen Shot 2022-01-11 at 3.38.15 PM.png

Then go ahead and name the test job, as well as choose the source you would like to pull from. Once you are done with that, go ahead and click Create Job.

Screen Shot 2022-01-11 at 3.39.36 PM.png

You will now see that your test_job has begun. You can use the refresh button next to the New Job button to refresh the status of the job. If you are even more curious about what is going on, you can actually jump into the job and see some real-time logs of what hotglue is doing.

Screen Shot 2022-01-11 at 4.23.45 PM.png

Once the job is complete, you should check the S3 bucket you connected to see if you can see the data there. You can also download the payload that hotglue synced directly from the jobs panel, using the download button on the right handside of the screen.

Embedding hotglue

Screen Shot 2022-01-11 at 4.34.34 PM.png

On the homepage of your hotglue environment, you have instructions on how you can embed hotglue into your webapp. We offer both a React package as well as a Standard JS widget that you can embed in your product.

💡 If you prefer to build your own UI, you can utilize our fully featured API.

Depending on your product, you can go ahead and walk through how to embed hotglue here.

Wrapping up

In the ten or so minutes you took to read this walkthrough, you have been able to configure a production-ready integration CRM integration. Now for this example, we used Salesforce, but you could use the same exact process for any other CRM that we support integrations with.

Of course, some of the process has been simplified. If you have a more complex Salesforce integration, you might want to take advantadge of hotglue’s transformation layer, where you can define your own Python scripts to run against the data coming in from your customers’ CRMs.

The purpose of this article was purely to show you how simple it can be to create a CRM integration for your websites that your customers will use with ease.