Webflow allows anyone to create a website, without coding skills. By connecting Nudgify with Webflow, you can create Social Proof notifications that show recent form submissions on your website.
You can easily connect your Webflow form submissions to Nudgify by creating a Smart Webhook in your Nudgify account. In this article, you read how to show your Webflow sign-ups in Social Proof Nudges via a Smart Webhook. Read more about what webhooks are
Create A Smart Webhook for Webflow
Follow the steps below to create a Smart Webhook to connect Webflow to Nudgify.
Step 1: Create a new Smart Webhook
In your Nudgify dashboard, navigate to Integrations > Smart Webhooks and click the Create Smart Webhook button. This takes you through the Smart Webhook creation flow.
Step 2: Select data type
Select the data type you’d like to connect via your Smart Webhook. To connect Webflow form submissions to Nudgify, select “Sign-ups”.
Step 3: Name your Smart Webhook
Give your Smart Webhook a name. We recommend naming it after the app that you are connection, so in this case e.g. “Webflow sign-ups”.
Step 4: Copy your Webhook URL
You now see the unique Webhook URL for the Smart Webhook you’re creating. You need to copy this Webhook URL and paste it in the Webhook URL field in Webflow. With this Webhook URL, Webflow will know to send each new form submission to your Nudgify account via your Smart Webhook.
Step 5: Paste your webhook in Webflow
- In your Webflow dashboard, navigate to Project Settings > Integrations.
- Scroll down to the Webhooks section and click Add Webhook.
- Select the Trigger Type: Form submission from the drop down.
- Paste the Nudgify Webhook URL you copied in the Webhook URL field.
- Click Add Webhook.
Now, Webflow has your Smart Webhook’s unique URL. This means that every time a new form submission is made on your Webflow site, it is sent to Nudgify, including relevant data, such as the name of the person who submitted the form.
Step 5: Send sample data to your Smart Webhook
Now it’s time to make a test form submission (or wait for a new for submission to be made), so that we can see an example of the information that Webflow sends Nudgify via the webhook. This is an important step in the set-up of your Smart Webhook, because it lets you “map” which bits of information you want to display in the Sign-up Nudge.
- Do a test form submission of your form in Webflow
- Click the Check for data button in Nudgify.
Nudgify should now be able to find the test form submission. If this was successful, then you will see a success message that says “Data Received!”, and below, you will see all the data that from the test submission (such as the name of the person who submitted the form).
If no data was found, this means that you have not made a test form submission yet, or that you have not saved the Webhook URL correctly in the right place. You can double check and adjust your set-up, and then click Check for data again.
Step 6: Map your sample data
Once your test data has been found, it’s time to tell Nudgify which pieces of data to use in your Nudge. Which bit of sample data is the name? Which bit is the name of the city they are from? And so on. You use the drop downs to select the right bit of sample data for each field.
Mapping the data is something you do one time. Once you have “mapped” the sample data for your Smart Webhook, any new form submissions that your Webhook sends to Nudgify will show the correct bits of data in the correct places of the Nudge.
Step 7: Save your Smart Webhook
In this last step, you see an overview of your Smart Webhook: the name of your Smart Webhook, its data type, the Webhook URL, and your data mapping.
To save your webhook, click “Save”. You can always return to this overview and make changes to the set-up of this Smart Webhook by clicking the pencil icon on the Smart Webhooks page.
Show your Webflow form submissions in Sign-up Nudges
Congratulations, you have created a Smart Webhook to connect your Webflow form submissions to Nudgify! On your Data Feeds page, you can see the submissions that have been send to Nudgify via your Smart Webhook in the “sign-ups” tab.
You can now display these sign-ups in Sign-up Nudges by selecting your Webflow webhook as the data source when you set up the Nudge. For example, if you named your Smart Webhook “Webflow sign-ups”, this Smart Webhook now appears in the dropdown among the Data Sources you can select for this Nudge.
When you select it as the data source, the Nudge will display the Webflow form submissions that come through to Nudgify via your Webflow webhook.
That’s it! All your new Webflow form submissions will now be turned into powerful Social Proof automatically and display in Sign-up Nudges on your site.
What if not all the bits of data are there?
Depending on your Webflow set-up, not all the bits of information (e.g. name and location of subscriber) are sent to Nudgify via the Smart Webhook. This does not have to be a problem.
As a general rule, Nudgify is not able to show any data that is not there. So if Webflow does not send the location of the subscriber along via the webhook, then we are unfortunately not able to display the location in the Nudge. Below, you find an overview of the impact if different bits of data are missing:
|Data field||Description||Impact if missing|
|Date||The date we use to show in the Nudge how long ago the sign-up took place||We use the moment the sign-up came through to Nudgify via the webhook as the "fallback" date|
|The email address of the user to identify that there has been a new sign-up||Required! We use the email address as identifier. Without the email, we can't show the sign-ups in Nudges|
|First Name||The first name of the user, to show in the Nudge||We do not display the user's name in the Nudge, unless you use the "Full Name" field|
|Last Name||The last name of the user, to show in the Nudge (we only show the initial of the last name)||We do not display the user's name in the Nudge, unless you use the Full Name field|
|Full Name||The name of the user, to show in the Nudge||We do not display the user's name in the Nudge, unless you use the First + Last Name fields|
|City||The city of the user, which we show in the Nudge||We do not display the City in the Nudge, unless you use the IP Address field|
|State||The state of the user, which we show in the Nudge (for US)||We do not display the State in the Nudge, unless you use the IP Address field|
|Country||The country of the user, which we show in the Nudge (note for the US we use State instead)||We do not display the Country in the Nudge, unless you use the IP Address field|
|IP Address||The ip address of the user, to show the location in case City/State/Country are not available||We do not display the user's location in the Nudge, unless you use the City/State/Country fields|