1. Home
  2. Integrations
  3. Webflow Integration

Webflow Integration

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.

create webhook

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”.

webhook sign-ups social proof

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”.

webhook webflow name social proof

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.

smart webhooks url social proof

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.

webflow form submission social proof

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).

webhook webflow social proof

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.

webhooks no data

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.

webflow social proof

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.

webflow sign-ups

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.

social proof kajabi edit

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.

webflow sign-ups

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.

webflow sign-up 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 fieldDescriptionImpact if missing
DateThe date we use to show in the Nudge how long ago the sign-up took placeWe use the moment the sign-up came through to Nudgify via the webhook as the "fallback" date
EmailThe email address of the user to identify that there has been a new sign-upRequired! We use the email address as identifier. Without the email, we can't show the sign-ups in Nudges
First NameThe first name of the user, to show in the NudgeWe do not display the user's name in the Nudge, unless you use the "Full Name" field
Last NameThe 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 NameThe name of the user, to show in the NudgeWe do not display the user's name in the Nudge, unless you use the First + Last Name fields
CityThe city of the user, which we show in the NudgeWe do not display the City in the Nudge, unless you use the IP Address field
StateThe 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
CountryThe 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 AddressThe ip address of the user, to show the location in case City/State/Country are not availableWe do not display the user's location in the Nudge, unless you use the City/State/Country fields
Updated on May 12, 2022

Was this article helpful?

Related Articles