1. Home
  2. Integrations
  3. Webflow Integration

Webflow Integration

Congrats for taking the first step to enhance conversions on your site!

Let’s install Social Proofy on your Webflow site.

Part 1 – Add your site on Social Proofy

Step 1-  Log in to your Social Proofy account, click on the button that says New Website and register your site.

Add Site Social Proofy

Step 2 – After adding your site, go to the top left corner of your Dashboard and click on the Red Dot next to “Pixel not active”.

Social Proofy Pixel Not Active

Step 3 – Select the “Add to your HTML” option.

Social Proofy Pixel HTML Snippet

Step 4 – Copy the code snippet. You’ll need this later.

Copy Social Proofy Pixel HTML Snippet

Part 2 -Add HTML Snippet to Webflow

Step 1 – Log in to your Webflow account.

Step 2 – Open the Designer for the site you wish to show Social Proofy on.

Step 3 – Click on the Webflow logo on the top left side and select Site Settings.

Select Site Settings - Webflow

Step 4 – Click on Custom Code.

Select Custom Code - Webflow

Step 5 – Paste the code snippet from Step 4 Part 1 inside the Head Code box and hit Save Changes.

Paste HTML Code Webflow

Step 6 – Go back to your Social Proofy Dashboard and click on the Red Dot next to “Pixel not active”, once again.

Social Proofy Pixel Not Active

Step 7 – Once there,  click on the Verify Pixel button.

Verify Pixel Button

If it shows Green, you’re all set. You have successfully installed the Social Proofy Pixel on your site.

Social Proofy Pixel Verified

The code will be added to all pages on your site and Social Proofy will start working.

If it does not show green? Click the chat bubble in the app so we can assist you 1-on-1 setting up your Pixel.

Now that you’ve added Social Proofy to your site, the fun part starts!

Part 3 – Webflow Webhook Integration

In Social Proofy, edit/create a notification that tracks “webhooks” and copy the Webhook URL (read more about it here)

Step 1 – To do this go into your Social Proofy Dashboard and click Notifications.

Notifications Social Proofy

Step 2 – Create a Notification (in this case we are using the Recent Sales Pop notification).

New Notification Social Proofy

Step 3 – Select the Webhook & Auto Capture tab option (more info here).

Select Webhook Social Proofy

Step 4 – Copy the URL for the Webhook Trigger.

Copy Webhook - Social Proofy

Step 5 – Complete the Notification Setup and hit Save.

Step 6 – Create a Zap with Webflow + Webhooks by Zapier Integrations.

Zapier Webhook Webflow

Step 7 – Select the Webflow Zap.

Webflow Zap

Step 8 – After selecting the Webflow Zap, connect your Webflow account under the Account tab.

Connect Webflow Zapier

Step 9 – Choose the site you wish to authorize from the popup. Then, click on Authorize App.

Authorize Connection Zapier

Step 10 – Once your Webflow site has been connected, select the “Form Name”  you wish to import from your Webflow site and Test it in the following tab.

Select Form Name Zapier

Step 11 – Once the Webflow to Zapier zap has been setup. Click on POST in Webhooks by Zapier.

Post Webhook Zapier

Step 12 – Go to the App & Event tab and select POST.

Event Selectiion Zapier

Step 13 – Go to the Action tab and paste the Webhook URL from step 4.

Webhook URL Zapier

Step 14 – Test the zap in the following tab. Then, go back to your Social Proofy Notification and click on Notification Data.

Notification Data Social Proofy

Step 15 – Once in the Notification Data tab, check if your Conversion Data was imported from Zapier. Click on it and check that the data is correct.

Conversion Data Social Proofy

Step 16 – If it’s working, Publish and then turn it ON.

Publish Zap Social Proofy

Activate Zap Social Proofy

Not working? Click the chat bubble in the app so we can assist you 1-on-1.

Updated on 16/07/2024

Was this article helpful?

Related Articles