Proof

How to integrate Proof with Webflow

Social proof notifications transform static websites into dynamic experiences that showcase real customer activity. While Proof doesn't offer an official Webflow app, you can implement it through the Social Proof Sales app for quick setup, embed Proof's Code Embeds for direct integration, or build custom workflows using Webflow's APIs to create advanced, automated proof campaigns based on your specific business logic.

Use Social Proof Sales app

The Social Proof Sales app enables Webflow merchants to display real-time sales notifications, leveraging social proof to increase trust and drive conversions.

This app lets you showcase recent purchases, customize notification content, and control display settings, all natively within Webflow. It is especially effective for e-commerce sites aiming to boost credibility and create urgency around popular or slow-moving products.

The app is fully responsive and customizable, ensuring seamless integration with your site's branding and user experience.

Key capabilities:

• Sales notification banners show recent purchases with customizable messages

• Product selection controls let you highlight specific items or promotions

• Visitor name editing maintains privacy while showing authentic activity

• Mobile optimization ensures notifications work seamlessly across all devices

Implementation:

1. Install the Social Proof Sales app. Open your Webflow project, navigate to the Apps panel, and search for 'Social Proof Sales.' Click 'Install' to add the app to your site.

2. Connect and authorize the app. Follow the on-screen prompts to connect the app to your Webflow store and grant necessary permissions for accessing sales and product data.

3. Configure notification settings. In the app dashboard, customize notification banners: select which products to highlight, edit visitor names for privacy, set display frequency, notification count, and adjust visual styling to match your brand.

4. Preview and activate notifications. Preview notifications on both desktop and mobile to ensure correct display. Once satisfied, activate the notifications to go live on your site.

Use Code embeds and custom code

Integrate a third-party social proof notification widget (such as Proof, Fomo, or Nudgify) into your Webflow site by embedding a JavaScript snippet. This approach maximizes control and compatibility, allowing you to manage campaigns directly from your proof provider's dashboard. The integration can be applied site-wide or to specific pages or elements, depending on your campaign needs.

Implementation:

1. Register and configure your proof platform. Sign up for your chosen social proof provider (e.g., Proof, Fomo, Nudgify). Complete any required onboarding and set up your notification campaigns as instructed by the provider.

2. Obtain the JavaScript embed code. From your proof provider’s dashboard, locate and copy the JavaScript snippet intended for website integration. Ensure you have the correct script for your campaign and domain.

3. Embed the script in Webflow. Decide where to place the script. For sitewide notifications, place the script in your footer code. For page-specific notifications, use Webflow’s custom code section. For element-specific notifications, use a Code Embed element and paste the script inside.

4. Publish and verify integration. Publish your Webflow site. Visit the live site to confirm the notification widget displays and functions as expected. If issues occur, review the provider’s troubleshooting documentation or check for script placement errors.

For GDPR compliance, enable cookie consent delays in your proof platform to prevent tracking before user permission.

Build with Webflow and Proof APIs

API integration unlocks capabilities beyond standard embeds, enabling automated proof campaigns, custom data sources, and synchronized notifications across multiple touchpoints. This approach suits businesses needing dynamic social proof based on CMS data, form submissions, or e-commerce activity.

Core API capabilities include programmatic notification creation, real-time event tracking, and advanced targeting based on user behavior. You'll need server-side infrastructure or serverless functions to securely handle API authentication and data transformation between Webflow and your proof platform.

Automate proof from form submissions

Automatically display dynamic Proof notifications when visitors submit Webflow forms by integrating webhooks, serverless processing, and the Proof API.

Implementation:

1. Configure and test Webflow.** Webhook** Set up a webhook in Webflow Project Settings to capture form submissions. Publish your site and send a test submission to verify webhook connectivity and field mapping.

2. Process submission data securely. Use a serverless function (e.g., Netlify Functions or AWS Lambda) to receive webhook payloads, validate data, and extract relevant fields (name, email, etc.). Ensure proper error handling and security checks.

3. Send event to Proof API. Format the extracted data and send it to the Proof API endpoint (e.g., /events/new) using secure HTTP requests. Confirm successful event creation via API response.

4. Display real-time notifications. Ensure your Proof widget is embedded on your site. Configure it to automatically display notifications using the event data received from the Proof API.

The Webflow Data API provides form submission access, while Proof's event API accepts custom activity data for real-time display.

Sync CMS content for testimonials

Automate the display of up-to-date testimonials and reviews from your Webflow CMS on Proof notifications, ensuring content is always fresh and relevant.

Implementation:

1. Set up and structure the Testimonials collection. In Webflow, create a 'Testimonials' collection with fields for name, company, review text, image, and optional rating. Design a dynamic testimonial section using a Collection List, and connect it to your collection for automatic population.

2. **Fetch and filter *Collection Items* via API**. Use the Webflow API /collections/{collection_id}/items endpoint to fetch testimonial items. Apply filters (e.g., by tag or page context) to retrieve only relevant testimonials for each Proof notification.

3. Transform and format CMS data for proof. Map and format the fetched CMS data to match Proof’s notification schema, including fields like name, company, review, image, and rating. Ensure data is sanitized and ready for display.

4. Automate updates and sync to proof. Set up scheduled syncs using cron jobs, webhooks, or Proof triggers to keep testimonials current. Ensure error handling and logging for reliable automation.

This approach works particularly well for B2B sites showcasing client success stories or SaaS platforms displaying user achievements.

Track e-commerce conversions

Monitor, process, and display purchase events as real-time social proof notifications using Proof. Ensure privacy, accuracy, and targeted delivery to maximize conversion impact.

Implementation:

1. **Configure *webhooks* for order completion events**. Set up e-commerce platform webhooks to trigger on successful order completion. Ensure webhook payload includes essential order details (product, amount, customer location, timestamp).

2. Extract and anonymize order data. Parse webhook payload to extract product name, purchase amount, and customer location. Anonymize all personal data to comply with privacy regulations before further processing.

3. Send anonymized data to Proof API. Transmit the anonymized order data to the Proof API endpoint. Validate API responses and log errors for troubleshooting. Ensure data is formatted according to Proof's requirements.

4. Segment and display notifications on relevant product pages. Use Proof's segmentation features to target notifications to specific product or category pages. Test notification appearance and placement to ensure optimal visibility and user experience.

The Webflow Ecommerce API provides order data access for creating authentic purchase notifications.

What you can build

Integrating Proof with Webflow opens possibilities for dynamic social experiences that convert visitors into customers.