Increase engagement on your typeform using social proof
I might not be a professional marketer, but I understood the concept of “Social Proof” quickly when I got exposed to it the first time. And you already have been exposed to it when you were browsing the web, so don’t worry 😉
The idea is to showcase to a user that they are not alone, someone else is looking at the same hotel they want to book for their honeymoon, or that someone just scored two front row seats for the Avengers premiere.
Those little things create both trust and urgency, leading to more conversions. For a while, you needed a whole team of engineers to dedicate to build your own “social proof” project to implement inspired by what Booking, Hotwire, and others have been doing.
But it became suddenly way easier when tools like Proof started to appear.
At Typeform, we’ve seen much use of our tools that could benefit from a social proof tool, especially since we launched our new “Respondent access” feature. With it, you can decide to close a typeform after x number of responses or at a specific date.
People that use typeform to run contests or applications for programs need to create that sense of urgency.
So for this Friday hack project, I wanted to show you how I was able to integrate Proof on my typeform and use their social proof feature.
Pre-requisites 🗒
- A Proof account, create one here (14-days free trial)
- A Typeform account with PRO subscription, create one here
- A typeform you want to use to test social proof
- A Google Tag Manager account, learn more here
Overview of the project 🗺
Proof displays a bubble on your website to your visitors. To make it work you need to install their pixel code, it’s a piece of Javascript, on your website.
To be able to add this Javascript to a typeform, we need to use the Google Tag Manager integration.
We also need to push information to Proof, to tell them when a new conversion occurred. We will be using Typeform webhooks and a piece of custom code.
Setup Proof ⚙️
We will be starting with a basic campaign on Proof, showcasing recent activity on the form.
Step 1: Create Campaign and Goal 💰
On your Proof account, under the Campaigns section, create a new campaign, I called mine“Early access campaign.”
After creating the campaign, you have to create a goal; it helps put a value for each user acquired through this campaign.
I created one called “interest in join beta,” with an arbitrary value of $10 conversion value, and the completion URL pointing to my typeform.
Step 2: Design the notification 👋
At that stage, you get to decide which type of notification you want to show and how often.
For this tutorial, I picked the simple Recent Activity notification that will be shown to 95% of my visitors.
Step 3: Capture data — create a webhook 🔧
Now, this is where you tell Proof where they should get the data from. They can auto-detect email field on a regular form, or via Zapier. But for typeform, we need to select Webhook > Custom Webhook.
Give it the name of your choice, and keep the URL handy.
Step 4: Where will you display Proof notification 🏹
On this last step, you get to decide where you will show the Proof bubble. Could be on your website, or directly on your typeform.
Publish 🎉
Click the Publish Changes button on top, and we are done with the basic Proof settings.
On the Typeform side 📃
Now that we are done with setting things up on Proof side, let’s connect everything on our typeform.
Step 1: Prepare your typeform 📝
In your typeform, you might be asking a lot of questions, but only a few will be relevant for our social proof tool.
To pass those fields correctly, we need to change their reference .
On the Create panel of your form, select the field that corresponds to the first name.
On the setting panel on the left, you should see a Question reference field at the bottom, click on the edit button and change it to first_name .
Repeat this step for each other field you may have in your typeform. Proof could receive data aboutfirst_name , email , city , state or country . Note thatfirst_name and email are mandatory.
Step 2: Add Google Tag Manager 🏷
If you want to display Proof bubble on your typeform, you will need the Google Tag Manager (GTM). There are great tutorials already, don’t need to add more to it.
Instructions on how to add Proof to GTM
Instructions to add GTM to a typeform
Step 3: Create a web app to receive Typeform webhook 🛠
This final step closes the loop with Proof; it will send the data collected on the typeform there.
To make your life easier, I created a Glitch project you can re-use for your own need.
First, remix this project on your Glitch account.
Then in the .env file, paste the URL of the Proof Webhook we created earlier into the PROOF_HOOK_URL variable. The TYPEFORM_WEBHOOK_SECRET one is used to sign our webhook payload and add security.
In the code, by default, we only send first_name and email , to send other fields you would need to uncomment lines 33–35 and 45–47 on server.js .
On Glitch, get the URL of your project by clicking on the Show button. Keep it handy we will need it just now.
Step 4: Add webhook to typeform 👉
We now have a live app ready to receive webhook requests from our typeform.
On your typeform under Connect > Webhooks, create a new webhook.
The endpoint should be pointing to your Glitch project and be of the form: https://{glitch_funky_name}.glitch.me/hook .
If you have set up in the previous step a secret for security, don’t forget to add it by clicking on the Edit button.
Try it and Rejoice 🎉
Everything is now connected! You should see a Proof bubble on your typeform, displaying activities of the latest people who filled the form. Take a look at my live typeform.
If you want to go further, you can add new types of notifications, and create different versions of it and see which one performs better.
I hope this tutorial was helpful, really curious to hear what you will be building.
