👩‍💻🚀 Auto-Enriching Typeform CRM Using Webhooks Combined with Clearbit & Clay

If you need any help getting setup, or you’re not as familiar with code but want to have this type of auto-enriching CRM, just send us a ping on Clay’s Intercom chat http://clay.run or join our Slack at http://slack.clay.run and we’ll help you get setup!

Typeform is a great way to quickly setup a lightweight form to capture user signups, event invites, contact forms, surveys & more. We often turn to Typeform when we need to spin up a quick way to capture some user data, and we tend to combine it with Clay for capturing and viewing the data that users submit.

Clay makes it really easy to to connect all your SaaS apps and build integrated tools around them. In this post we’ll setup a lightweight Sign Up form using Typeform, and then we’ll use Clay’s Workflow feature to receive Webhook events from Typeform, and enrich the results using an enrichment API like Clearbit along with some of Clay’s built in-enrichment functionality.

We’ll then save all that data in a Base to quickly be able to see the responses along with enriched information about each of the people and the companies they work at.

Here’s a little demo video & audio walkthrough of what we’re going to setup:

Step 1: Setup Your Typeform

In this hypothetical example, I’ve setup a Typeform to capture interest from people who want to try out a new imaginary product MVP: a “Smart Calendaring App”. I’m going to capture basic information like their Name & Email address.

NOTE: The code we’ve written below is mapped to the ordering of the questions in Typeform — so if you change the ordering or types of questions you’re asking, you’ll need to also modify the code accordingly.

Here’s a snapshot of what my Typeform looks like:

And here’s the actual Typeform in action: https://claylabs.typeform.com/to/NmrJBQ

Step 2: Setup a Workflow in Clay to Receive the Typeform Webhook Results

If you haven’t signed up for a Clay account yet, you can sign up at http://clay.run. There’s three parts to the Clay platform that play nicely together and give you the flexibility to setup the integrated workflows & tools you need:

• Workflows. An easy way to connect your tools to automate workflows based on events happening in your various SaaS products — in this example, Typeform
• Bases. A spreadsheet-like database that makes it easy to work with structured data, and leverage your familiarity with spreadsheets to build powerful tools
• Functions. A simple way to spin up serverless functions that you can use seamlessly inside of your Bases & Workflows

Once you get into the Clay dashboard, let’s go to the Workflows tab and hit the “New Workflow” button to create our workflow. I’m going to call the Workflow: “Typeform Smart Calendar Signups”

We’ll select the trigger event to be “Webhook”, which will then generate a unique URL for us to send the events to. You can try sending an event via curling the URL (Note you need to first turn the “Workflow On” using the toggle in order for the full Workflow to run).

Within Typeform we can go to the “Connect” tab & then within that to the “Webhooks” subtab. We can paste our hooks URL into the Webhooks Destination URL as follows:

Switching back to the Clay interface, we’ll now see that we have a sample Test Event that’s come in from Typeform, and you’ll see that Clay now shows you what fields are available to bind to in the subsequent steps of your workflow. As we’ll see, the Clay data mapping interface inside will make it easy to pass values from one step to another in your workflows.

If you go to the Logs pane you’ll also be able to see the past runs of your Workflow, along with the Input Data & Output Data of each step. In this case we see the Workflow ran once and we can see the full structure of the JSON that we received to Typeform.

Step 3: Create a Clay Base to Save the Data Into

Using the “+” button in the Clay Workspace header, we can quickly create a “New Base”. You can also head back to the dashboard and head over to the Bases tab to create a Base from there.

I’m going to create a new Base and call it “Smart Calendar Signup Peeps”:

By default our Base comes pre-populated with a “People” table that has Name and Description text columns, and a URL column of URL type. Clay’s Bases have allow you to add basic column types like Text, Date, URL, and Checkboxes, but they also have a powerful feature called “computed columns” that are much more powerful versions of formulas in spreadsheets. These “computed columns” let you setup data workflows and connect to apps from within your Base.

To see how these computed columns work, let’s first go ahead and add a column called “email” that’s of type Text:

Next, head to the “Add Column” menu, select the type picker, and scroll down till you find the “Clearbit Enrichment” column type. Clearbit (https://clearbit.com) is a service that makes it easy to pull in rich profiles of people and companies based on their emails or URLs. The Clearbit service expects an email to lookup, and when we go to add this computed column type we’ll see that we need to bind the “email” input field the Clearbit column. We’ll call this column “Clearbit Enrichment” and we’ll map the “email” input field Clearbit expects to the email column we have in our table.

Now every time we enter an email in the email column we’ll see that the Clearbit function will go and pull down additional data that gets saved into the column as a JSON Object. When you click on a JSON Object type, the JSON viewer opens in the right hand pane, and from there, if you click on the little extract icon, you’ll get the ability to pull the fields you want to see from the JSON into their own columns. For example, below I pull the Clearbit Avatar into it’s own extracted column.

Use the Computed Column & Extracted Column features to customize how your table enriches & displays data.

Let’s add the rest of the columns we want in this Base, at the end we should have the following columns:

• Name: Email | Type: Text
• Name: Full Name | Type: Text
• Name: Company URL | Type: URL
• Name: Current Calendar Used | Type: Text

Our table should look something like this:

Step 4: Add a Function Step to the Workflow to Write the Typeform Signups into the Base

Now let’s head back to our Workflow and add the step that will actually write the Typeform events into the Base.

Right now, you’ve got to write a little bit of code to do this, though this should change in the coming weeks as we’re adding built-in apps including a “Base” app. For example, the pre-built Base connector will let you easily map data from previous workflow steps to the columns you want to write that data to inside of your Base.

For now though, we still need a bit of code, so let’s return to our Workflow and hit the “+ Add Action Step” button. We’ll select the Clay Function type and then we’ll go to “Create a New Function”. This will open up the New Function dialog, and I’d suggest naming your function something descriptive — I named mine: write-typeform-signups-to-base. If you don’t have pop-ups blocked in the browser, a new tab will open with the function’s code for you to edit (alternatively just hit the Edit Code option above the function’s name).

Now that we’ve got the function added, before we write any code, let’s go ahead and send a few more “Test Webhook” events from Typeform to see how the function receives them. Head over to Typeform and hit “Test Webhook” on the Webhooks page. Now in the Workflow logs you should see that your function has new runs recorded and they have multiple steps:

Right now our “write-typeform-signups-to-base” function doesn’t do anything other than just echo a generic message and what was passed into it back. Let’s go ahead and write the code for the function.

Configure Your Parameters, Environment Variables & NPM Requirements via package.json

First, we’ll want to add a parameter to receive the event data from Typeform. Let’s go to the function code editor and open the package.json file. This file is where we can add npm dependencies, as well as specify what inputs fields (parameters) a function expects, and any environment variables (e.g. API tokens) that we want to store securely and not expose in our code directly.

At the end our package.json should look something like this:

https://gist.github.com/nicolaerusan/54cb260a611636c4f611210f2abfe753

In particular, what you need to add to your package.json are the following:

"parameters":[     
   {       
      "name": "typeformEvent",       
      "description": "The event we're receiving from Typeform"     
   } 
]

We’ll also need to set our Base API key as an environment variable. We do that by adding the following “envs” option to our package.json

"envs": [     "BASE_PRIVATE_API_KEY" ],

Once you’ve added the parameters and environment variable, you should see that your right hand pane now shows the input parameter as well as the Environment Variables that you can populate.

We’ll add our Base Private API key which we can copy from the Base’s API Key modal, and now we will be able to reference this value in our code as process.env.BASE_PRIVATE_API_KEY

Lastly, we make sure to include the npm dependencies we need, which for this function is just the clay-base-sdk that makes it easy to interact with your Base’s API.

"dependencies": {     
   "clay-client": "*",     
   "clay-base-sdk": "^0.0.64"   
},

Note that as a convenience if you type any npm require statement in your code Clay will also prompt you to add the package to your package.json.

Map Data in Your Workflow Between Steps

Now that we’ve got our package.json configured, let’s head to our Workflow and make sure we’re correctly passing in the typeformEvent object into the function.

We’ll go ahead and pass in all the data coming from the Webhook trigger using the following syntax {{trigger}}(we could just pass in a subportion of the data, as Clay makes it easy to precisely map data across steps, but here we’ll take the approach of passing the entire event along).

Make sure to hit Save, and then let’s go ahead and now write our function code. In our function’s code, we’ll use the Clay Base SDK to write the object we receive from Typeform. We’ll have to slightly transform the data Typeform sends us the data so that the fields map to our Base columns.

Here’s the code for our index.js (and below for the package.json):

As you work on the function, you’ll likely want to head back to the Typeform Webhook panel to send more test events so that you can ensure your function is writing into the Base correctly. We’re currently working on an easy way to replay previous events you’ve seen to make it easier to debug your flow initially, but that’s not there yet so for now we’ll rely on Typeform’s Test Webhook feature:

Once you get it running, you should finally see some successful runs in your logs 👏

You’ll also see the results populated in our Base, with the Clearbit column error-ing out because the emails passed in are not returning any data.

Typeform Test Webhook data coming in.

Now, if you try to go and submit some actual answers in your Tyepform, you should see them auto-populate into your Base, like in the preview at the top of this post!

👋 Congrats on getting the entire workflow & Base setup!

Where To Go From Here

We’re early on building Clay, and always working to make it easier for both developers and non-developers to build these types of tools and workflows, and we’d love to hear feedback!

Clay’s Bases & Workflows should make it really easy to create flexible solutions across your different SaaS tools. As the number of specialized SaaS tools you use grows, you need an easy way to connect all these tools and build integrated tools around them — that’s where Clay fits in.

For our auto-enriching Typeform, Clearbit & Clay workflow, here’s a few ideas for how to continue making this workflow even better:

• Add a Scrape Website column to scrape the company page submitted via Typeform.
• Add a Slack step to the Workflow to receive a notification each time someone signs up.
• Add a Twitter column to pull in the users recent Tweets to be able to quickly see those at a glance.

And as a friendly reminder, if you have any issues getting up and running with Clay, just send us a ping on Clay’s Intercom chat or join our Slack at http://slack.clay.run and we’ll help you get setup!

🎉 ⚒ Happy Building!

Please 👏 if you enjoyed the post

• Follow us on Twitter https://twitter.com/clayrunhq for more examples of how to connect your apps and build awesome tools!