Guides & tutorials

B2B sales pipeline flow with Clearbit & Calendly

Download this tutorial scenario and import it in your workspace
Table of contents

Learn how to build a contact form that automatically qualifies leads before allowing them to set the date and time of the meeting with a salesperson. 

This flow is specially designed to save coordination time for sales teams, since numerous studies indicate that it has a decisive influence on conversion and closing ratios.

Overview

It consists of a dynamic form with three steps, which are displayed or not depending on the qualification of the lead.

  • The first step of the form asks for a name and email. A flow is connected to it that sends the email to Clearbit, which checks if there is a company associated with it. 
  • The second step will vary depending on whether or not Clearbit finds a company associated with the email.
  • If a related company has been found, it goes forward to form step three, allowing the user to set the meeting. 
  • If a related company hasn’t been found, a step to ask for the name of the company and the job title of the user will be displayed.
  • The third step of the form displays a calendar that allows the user to set the day and time of the meeting.

Previous requirements

To build this use case you just need:

  • A Calendly account, to set the day and time of the meeting.
  • A Clearbit account, to enrich data from the user's email.
  • An Arengu account, to build the form and integrate the two previous services.

1. Create the form

First, go to Arengu and create a form from scratch. In the first step, add a ‘Text’ field to ask for the user’s name and an ‘Email’ field to ask for the email address. Click on each field to open its settings and configure them as follows:

  • ID: change them to ‘name’ and ‘email’ to make them easier to reference.
  • Required: enable this checkbox on each field to make them mandatory.

Add another step to the form by clicking on the green plus button. Include two ‘Text’ fields to it, to ask for the company name and the user’s job title, with these settings:

  • ID: change them to ‘company’ and ‘title’.
  • Required: enable this option on each field settings to make them mandatory.

Then, add a third step to the form and include in it a HTML block. We will use it to embed the calendar and to run a script that will submit the form automatically, once the user has chosen the date and time of the meeting.

To configure it, copy this code and paste it into the ‘Source code’ field of the HTML block:

<div class="calendly-inline-widget" style="min-width:320px;height:800px;" data-auto-load="false"></div>
<script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js"></script>
<script>
  Calendly.initInlineWidget({
    url: 'https://calendly.com/calendar-slug/discovery?hide_event_type_details=1',
    parentElement: document.querySelector('.calendly-inline-widget'),
    prefill: {
      name: '{{fields.name}}',
      email: '{{fields.email}}'
    }
  });
</script>
<script>
  function isCalendlyEvent(e) {
    return e.data.event && e.data.event.indexOf('calendly') === 0;
  };
  window.addEventListener(
    'message',
    function (e) {
      if (isCalendlyEvent(e) && e.data.event === 'calendly.event_scheduled') {
        $form.goForward();
      }
    }
  );
</script>

To start using your own Calendly account, simply replace the 'calendar-slug' string with your calendar’s slug. Here's how to get it.

2. Get your calendar’s slug

Login to Calendly and go to your dashboard. Just click on the ‘Copy link’ button of the proper calendar to get it.

You can edit the slug under Account > Account Settings > My link. Just remember that if you were using that slug somewhere, when you change it, it will stop working on them.

Finally, go back to Arengu and paste it in the source code of the HTML block.

3. Create a flow linked to the first step

Go to the ‘Flows’ tab — on the light menu — and create a flow linked to the first step of the form. Just click on the plus button to create a new one and give it a name.

Once the flow is created, publish the changes and open the flow on a new tab.

4. Configure the flow

It will have the following structure. First, include a ‘Find person and company by email’ action. Click on the plus button, to open the actions menu, and then search for Clearbit.

Click on the action to add it to the flow and configure it as follows:

  • ID: change it to ‘findPersonAndCompanyByEmail’.
  • Connection: If you already have a Clearbit connection, just select the one you want to use. To create a new one, click on the plus button and paste the Secret key of your Clearbit account. The new connection will be stored in the vault, so you can use it again whenever you want, in this workspace. 
  • Email: reference the {{input.body.email}} variable from the form. You can get it by simply clicking on the plus button of the field.

Next, include a ‘If/then condition’ action to create two branches and trigger different actions depending on whether or not Clearbit has found a company related to the email.

To configure this action:

  • Condition: reference the {{findPersonAndCompanyByEmail.body.person.employment.name}} variable from the outputs of the previous action and select ‘is not null’ as the condition. You can get the variable from the autocomplete menu, after an execution of the flow. 

In the ‘False’ branch, add a ‘Go to the next step of the form’ action, which doesn’t need to be configured. This way, if Clearbit doesn’t find a company linked to the email, the second step of the form will be displayed to ask the user for the company name and job title.

In the ‘True’ branch, include a ‘Store state variable’ action. It allows us to save flow data in the form of state variables and use them later. In this case, we will use it to save the company name and the job title found by Clearbit.

To configure this action:

  • Data fields: give the new state variables a name in the left column. In this case, we are going to call them 'company' and 'title', like the same data in the first form step. 
  • In the right column, reference the {{findPersonAndCompanyByEmail.body.person.employment.name}} and the {{findPersonAndCompanyByEmail.body.person.employment.title}} variables from the outputs of the Clearbit action. Get them by clicking on the plus button after an execution of the flow. 

Close the ‘True’ branch with a ‘Jump to a form step’ action. This way, If Clearbit has found a company linked to the user's email, the form will go directly to the calendar step, avoiding asking the user for the data that Clearbit has already found.

To configure this action:

  • Form: select the form to which we have just created and to which this flow is connected.
  • Step: select the step in which the calendar is embedded. In this case, form step 3.

Once everything is set up, publish the changes.

5. Trigger custom after-submission actions

You can configure custom actions after form submission by simply connecting an after-submission flow to the form. For example, you can send custom notifications to a Slack channel and also create a contact to your CRM.

6. Preview, test and debug it

Go back to the form editor, click on the ‘Preview’ button and test it.

Then you can check if everything is working properly, action by action, on the ‘Executions’ tab of each flow linked to the form7. Embed it anywhere7. Embed it anywhere

7. Embed it anywhere

You can get the code to embed it in any stack in the 'Embed' tab of the form editor. Just choose if you want to embed it inline or as a popup and follow the instructions.

You can also change the design in the ‘Design’ tab using color pickers. If you have CSS skills, you can use all these styling variables to perfectly adapt the form to your brand.

Haven’t you tried Arengu yet? Sign up free or schedule a demo with our team to help you to fully adapt it to your business needs.

You might like to read

See more tutorials

Getting started with Arengu

Arengu allows you to build all your user flows connected to your current stack, and avoids coding all the UI, complex integrations, validations or logic from scratch. Try it for free and start building faster and scaling your application needs as they grow.