How to Collect Visual Feedback on Your Webflow Site with Notedis

Managing client feedback on Webflow projects shouldn't feel like herding cats. Between email threads, screenshot attachments, vague descriptions ("the thing at the top doesn't look right"), and trying to figure out which version of the site they're even looking at—it's exhausting.

If you're a Webflow designer or agency tired of playing feedback detective, there's a better way.

The Webflow Feedback Problem

You've been there: A client emails you saying "the button doesn't work" without specifying which button, on which page, or what "doesn't work" actually means. You spend 20 minutes investigating only to discover they meant the contact form—and they were on mobile, in Safari, after scrolling halfway down the page.

Common frustrations with traditional feedback:

• Vague descriptions - "It looks weird" (What looks weird? Where? On which device?)
• Lost context - Screenshots sent via email with no URL or page info
• Version confusion - Feedback on staging vs. production vs. old cached version
• Scattered conversations - Feedback across email, Slack, phone calls, sticky notes
• Mobile issues - Nearly impossible for clients to describe mobile-specific problems
• Time wasted - Hours spent reproducing issues instead of fixing them

What if your clients could just click a button, circle exactly what they're talking about, and send it to you with all the context you need?

Enter Notedis: Visual Feedback for Webflow

Notedis is a feedback widget that embeds directly into your Webflow site. It lets clients report issues and suggestions by taking screenshots, annotating them with arrows and highlights, and sending everything to your dashboard—with the exact URL, browser info, and device details attached.

Think of it as:

• A "report a bug" button built into your Webflow site
• Screenshot annotation tool for clients (no Loom or technical skills needed)
• Centralized feedback dashboard (goodbye email threads)
• Context capture system (URL, device, browser—all automatic)

Why Notedis Works Perfectly with Webflow

Webflow is a visual platform—your clients care about how things look and feel. Notedis matches that visual workflow:

1. Visual Feedback for Visual Projects

Webflow designers work visually in the Designer. Your clients should give feedback visually too. With Notedis, they can:

• Click the feedback button on any page
• Automatically capture a screenshot of the entire page
• Draw arrows to point at specific elements
• Highlight sections that need attention
• Add text annotations directly on the screenshot
• Describe the issue in their own words

No more "the thing in the middle-left-ish area around the header-ish" descriptions.

2. Works on All Webflow Page Types

Whether you're building static pages, CMS-driven blogs, or full e-commerce sites, Notedis captures feedback on everything:

• Static pages - Home, About, Contact, Services
• CMS Collection pages - Blog posts, portfolio items, case studies
• E-commerce pages - Products, collections, cart, checkout
• Dynamic pages - Any CMS-powered template

The widget automatically captures the exact URL, so you know if they're reporting an issue on "Blog Post #42" versus the homepage.

3. No Webflow Designer Changes Required

You don't need to modify your Webflow project structure. Just add a small code snippet to your site's custom code settings, publish, and you're done. The widget:

• Loads after your Webflow site is ready (no performance impact)
• Doesn't interfere with Webflow Interactions or animations
• Works with Webflow's CDN and hosting
• Respects your Webflow breakpoints for responsive design

4. Perfect for Client Projects and Agencies

If you're building sites for clients or running a Webflow agency:

• During development - Get clear feedback during review cycles
• Post-launch - Let clients report issues after going live
• Maintenance - Ongoing feedback for updates and changes
• Multiple clients - Separate dashboard per client/project

How to Install Notedis on Your Webflow Site

Installing Notedis on Webflow takes less than 5 minutes. Here's exactly how to do it:

Prerequisites

Before you start, make sure you have:

• Active Webflow account with a published site
• Paid Webflow site plan (Starter, CMS, Business, or Enterprise)
  • Note: Free staging sites can't publish with custom code
• Notedis account with a site key (sign up free)

Step 1: Get Your Notedis Site Key

1. Sign up for Notedis at notedis.com/register
2. Create your first site in the dashboard
3. Copy your Site Key (starts with site_)
4. Keep this handy—you'll need it in a moment

Step 2: Open Webflow Custom Code Settings

1. Log into your Webflow account
2. Open your project in the Designer
3. Click the Settings icon (gear) in the left toolbar
4. Navigate to the Custom Code tab
5. Scroll down to the Footer Code section

Why footer code? Footer code ensures the widget loads after your page content is ready, so it doesn't slow down your site or interfere with Webflow Interactions.

Step 3: Add the Notedis Widget Code

Paste this code into the Footer Code section:

<!-- Notedis Feedback Widget -->
<script>
  window.notedisConfig = {
    siteKey: 'YOUR_SITE_KEY_HERE',
    apiUrl: 'https://notedis.com',
    position: 'bottom-right',
    color: '#3B82F6'
  };
</script>
<script src="https://notedis.com/js/widget.js" defer></script>

Important: Replace YOUR_SITE_KEY_HERE with your actual site key from Step 1.

Step 4: Publish Your Site

1. Click Save Settings in Webflow
2. Click Publish in the top-right corner
3. Select Publish to selected domains
4. Wait for publishing to complete

Step 5: Test the Widget

Custom code only works on published sites—not in the Webflow Designer preview. To test:

1. Visit your live Webflow site URL (not Designer)
2. Look for the feedback button in the bottom-right corner
3. Click it to open the feedback modal
4. Take a screenshot and submit test feedback
5. Check your Notedis dashboard to confirm it arrived

Pro tip: Hard refresh your browser (Ctrl+F5 on Windows, Cmd+Shift+R on Mac) to clear cache and see the widget immediately.

Customizing the Widget for Your Webflow Design

The default widget looks great out of the box, but you might want to match it to your Webflow design system.

Change the Button Position

The widget supports four positions:

window.notedisConfig = {
  siteKey: 'your-site-key',
  apiUrl: 'https://notedis.com',
  position: 'bottom-right', // Options: bottom-right, bottom-left, top-right, top-left
  color: '#3B82F6'
};

Position recommendations:

• bottom-right - Default, works for most sites
• bottom-left - Good if you have a chat widget or CTA in bottom-right
• top-right - Stays visible when scrolling (useful for long pages)
• top-left - Use if all other corners are occupied

Match Your Brand Colors

Extract your brand color from Webflow's Style Manager and use it for the feedback button:

window.notedisConfig = {
  siteKey: 'your-site-key',
  apiUrl: 'https://notedis.com',
  position: 'bottom-right',
  color: '#FF6B35' // Your brand's primary color
};

Color tips:

• Use your primary brand color for consistency
• Ensure good contrast with your page backgrounds
• Test on both light and dark sections of your site
• Consider using your CTA button color

Advanced Styling with Custom CSS

Want complete control? Add custom CSS to match your Webflow design perfectly.

In Settings → Custom Code → Head Code, add:

<style>
/* Custom widget button styling */
#notedis-feedback-button {
  border-radius: 50px !important;
  box-shadow: 0 8px 16px rgba(0,0,0,0.1) !important;
  padding: 12px 24px !important;
  font-family: 'Your Webflow Font', sans-serif !important;
}

/* Hover effects */
#notedis-feedback-button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 24px rgba(0,0,0,0.15) !important;
}

/* Mobile adjustments */
@media (max-width: 767px) {
  #notedis-feedback-button {
    padding: 10px 20px !important;
    font-size: 14px !important;
  }
}
</style>

This ensures the widget feels like a natural part of your Webflow design.

Real-World Use Cases for Webflow + Notedis

Here's how Webflow designers and agencies are using Notedis to streamline feedback:

1. Client Review Cycles

The old way:

• Email: "The hero section doesn't look right"
• You: "Can you be more specific?"
• Email: "The image is too big"
• You: "Which image? On desktop or mobile?"
• Email: Screenshot.jpg (1.5 MB attachment)
• You spend 30 minutes figuring out they meant the About page, not the homepage

With Notedis:

• Client clicks feedback button on About page
• Draws arrow on hero image
• Types "This image feels too large on desktop"
• Submits feedback
• You see exact page, screenshot with annotation, browser/device info
• You fix it in 5 minutes

Time saved: 25 minutes per feedback item

2. Post-Launch Bug Reports

Your client's site is live. A visitor finds a broken link on the blog. Instead of the visitor leaving silently (or worse, leaving a negative comment), they:

1. Click the feedback button
2. Take a screenshot showing the broken link
3. Submit: "This link goes to a 404 page"
4. You get notified via email
5. You fix the link and close the feedback
6. The visitor feels heard and helped

3. E-Commerce Feedback

For Webflow e-commerce sites, Notedis captures feedback on:

• Product images ("This photo doesn't match the product")
• Checkout flow ("Payment button doesn't work on mobile")
• Cart issues ("Can't remove items from cart")
• Shipping questions ("Delivery time isn't showing")

The screenshot automatically shows the exact product page, cart state, or checkout step—context you'd never get from an email.

4. CMS Content Issues

Managing a Webflow CMS blog or portfolio? Notedis helps catch:

• Formatting issues on specific blog posts
• Image sizing problems in collection items
• Typography inconsistencies
• Broken internal links

Since the widget captures the exact collection item URL, you know precisely which blog post or portfolio piece needs attention.

5. Multi-Page Webflow Sites

For complex Webflow sites with dozens of pages, Notedis becomes your client's quality assurance tool:

• They browse the site naturally
• When they spot something off, they click feedback
• You get a curated list of issues, organized by page
• No more "somewhere on the site" vague descriptions

Troubleshooting Common Webflow Issues

Widget Not Appearing?

Check these first:

1. Verify you have a paid Webflow plan

   • Free staging sites cannot publish with custom code
   • You need Starter plan or higher
   • Check Webflow Settings → Site Plan

2. Confirm you published your site

   • Custom code doesn't work in Designer preview
   • Click Publish and wait for completion
   • Test on your live URL, not in Designer

3. Ensure code is in Footer Code

   • Open Settings → Custom Code
   • Check Footer Code section (not Header)
   • Code should be at the site level, not page level (unless intentional)

4. Double-check your site key

   • Site key should start with site_
   • No extra spaces or quotes
   • Copy directly from Notedis dashboard

5. Clear your browser cache

   • Hard refresh: Ctrl+F5 (Windows) or Cmd+Shift+R (Mac)
   • Or try incognito/private browsing mode

Widget Behind Your Navbar?

If your Webflow site has a fixed navbar covering the widget button, add this to Head Code:

<style>
#notedis-feedback-button {
  z-index: 999999 !important;
}
</style>

This ensures the widget always appears on top.

Widget Conflicts with Webflow Interactions?

Webflow Interactions (IX) can sometimes affect third-party widgets. If you notice the feedback button animating unexpectedly:

<style>
#notedis-feedback-button,
#notedis-overlay {
  will-change: auto !important;
  z-index: 999999 !important;
}
</style>

Add this to Head Code to prevent interaction conflicts.

Performance: Does It Slow Down Your Webflow Site?

Short answer: No.

Longer answer: The widget is designed for zero performance impact:

• Loads asynchronously - Uses defer attribute, doesn't block page rendering
• Minimal JavaScript - Tiny payload (~15 KB gzipped)
• Loads after Webflow - Initializes after your Webflow site is ready
• No SEO impact - Doesn't affect Lighthouse scores or Core Web Vitals
• CDN-friendly - Works perfectly with Webflow's fast CDN

In testing:

• Webflow sites with Notedis: 90+ Lighthouse performance score
• No increase in Time to Interactive (TTI)
• No impact on First Contentful Paint (FCP)

Your Webflow site will be just as fast with Notedis as without it.

Webflow Pricing: Which Plan Do You Need?

Here's a quick reference for Webflow plans and Notedis compatibility:

Webflow Plan	Custom Code?	Notedis Widget?	Best For
Free Staging	❌	❌	Testing designs only
Starter	✅	✅	Personal sites, portfolios
CMS	✅	✅	Blogs, content-heavy sites
Business	✅	✅	Client projects, agencies
Enterprise	✅	✅	Large organizations

Minimum requirement: Webflow Starter plan ($14/month when billed annually)

Best Practices for Webflow + Notedis

After helping hundreds of Webflow designers implement Notedis, here are the proven best practices:

1. Use Site-Wide Installation

Do this:

• Add code to Settings → Custom Code → Footer Code
• Widget appears on every page
• Consistent experience for users

Don't do this:

• Adding code to individual pages (unless you have a specific reason)
• Using Page Settings → Custom Code for every page
• Creates maintenance headaches

2. Match Your Webflow Style Guide

Do this:

• Extract brand colors from Webflow Style Manager
• Use your primary CTA color for the widget
• Add custom fonts to match your typography
• Test on all Webflow breakpoints

Don't do this:

• Leave default blue if your brand is completely different
• Ignore mobile styling
• Forget to test on tablet breakpoint

3. Test After Every Publish

Do this:

• Test widget after publishing Webflow changes
• Clear cache and check on actual device
• Verify widget still works after template updates
• Check on mobile (iOS Safari specifically)

Don't do this:

• Assume it still works after major changes
• Test only in Desktop view
• Skip mobile testing

4. Position Strategically

Do this:

• Check for conflicts with existing elements
• Consider your most common viewport
• Test with your client on their typical device
• Place where users expect to find help

Don't do this:

• Cover important CTAs
• Hide behind fixed elements
• Choose bottom-right by default without testing

5. Keep Your Site Key Secure

Do this:

• Store site key in Webflow project settings
• Use separate sites in Notedis for staging vs production
• Regenerate key if exposed publicly

Don't do this:

• Share site key in public repositories
• Use same key across multiple unrelated projects

Advanced: Conditional Loading for Specific Pages

Want to show the widget only on certain pages? Use this advanced technique:

<script>
  // Only load on specific paths
  const allowedPaths = ['/contact', '/support', '/help'];
  const currentPath = window.location.pathname;

  if (allowedPaths.some(path => currentPath.includes(path))) {
    window.notedisConfig = {
      siteKey: 'your-site-key',
      apiUrl: 'https://notedis.com',
      position: 'bottom-right',
      color: '#3B82F6'
    };

    const script = document.createElement('script');
    script.src = 'https://notedis.com/js/widget.js';
    script.defer = true;
    document.head.appendChild(script);
  }
</script>

Or hide on specific pages:

<script>
  // Don't load on thank-you or checkout pages
  const excludedPaths = ['/thank-you', '/checkout'];
  const currentPath = window.location.pathname;

  if (!excludedPaths.some(path => currentPath.includes(path))) {
    window.notedisConfig = {
      siteKey: 'your-site-key',
      apiUrl: 'https://notedis.com',
      position: 'bottom-right',
      color: '#3B82F6'
    };

    const script = document.createElement('script');
    script.src = 'https://notedis.com/js/widget.js';
    script.defer = true;
    document.head.appendChild(script);
  }
</script>

Managing Feedback in Your Dashboard

Once clients start submitting feedback through your Webflow site, you'll receive it all in your Notedis dashboard:

What You'll See

Each feedback submission includes:

• Screenshot with annotations - Exactly what they circled/highlighted
• URL - The exact Webflow page they were on
• Browser & Device - "Safari on iPhone 13" or "Chrome on MacBook"
• Timestamp - When they submitted it
• Category - Bug, feature request, improvement, question
• Priority - Low, medium, high, urgent
• Message - Their written description

How to Organize Feedback

By Status:

• Open → In Progress → Resolved → Closed
• Track what needs attention vs what's done

By Category:

• Bugs → Fix immediately
• Features → Add to roadmap
• Improvements → Batch for future updates
• Questions → Respond quickly

By Priority:

• Urgent → Critical bugs affecting everyone
• High → Important but not breaking
• Medium → Nice to fix soon
• Low → Future considerations

Email Notifications

You'll get notified when:

• New feedback arrives
• Client adds a comment
• Feedback is marked urgent

Configure notification settings in your Notedis dashboard.

Webflow Agencies: Managing Multiple Client Sites

If you're a Webflow agency managing multiple client sites, Notedis has features specifically for you:

Workspaces

Create separate workspaces for each client:

• Client A workspace - All Client A's Webflow sites
• Client B workspace - All Client B's sites
• Keeps feedback organized per client

Team Permissions

Invite team members with different roles:

• Owners - Full access, billing, settings
• Editors - Can manage feedback, no billing access
• Guests - View-only access for clients

Multiple Sites Per Workspace

Track feedback across multiple Webflow projects for the same client:

• Production site
• Staging site
• Development site
• Marketing site

Each gets its own site key, but feedback is organized under one client workspace.

Pricing: How Much Does Notedis Cost?

Notedis offers a 14-day free trial with no credit card required. After that:

Free Plan:

• 1 workspace
• 1 site
• Basic features
• Perfect for testing or personal projects

Starter Plan:

• Multiple workspaces
• Unlimited sites
• Team collaboration
• Priority support
• Best for freelancers and small agencies

Pro Plan:

• Everything in Starter
• Advanced analytics
• Custom branding
• Dedicated support
• Best for agencies managing many clients

View full pricing details

Real Results from Webflow Designers

"Before Notedis, client feedback took 2-3 email exchanges to clarify. Now it's instant and clear. I've cut revision time in half." — Sarah, Freelance Webflow Designer

"Managing feedback for 20+ Webflow clients was chaos. Notedis gave us one place for everything. Game changer for our agency." — Mike, Agency Owner

"Clients love how easy it is. They click, circle, send. No screenshots to email, no lengthy explanations. Just works." — Jessica, UX Designer

Common Questions

Does it work with Webflow CMS?

Yes! The widget works perfectly on CMS collection pages, blog posts, and any dynamic content.

Can I use it on exported Webflow sites?

Yes, the code exports with your site and works on self-hosted Webflow projects.

Will it work in the Webflow Designer?

No, custom code only executes on published sites. Test on your live URL, not in Designer preview.

Does it work on mobile?

Absolutely. The widget is fully responsive and optimized for touch devices. Works great on iOS Safari, Chrome Mobile, and all mobile browsers.

Can I customize the widget appearance?

Yes, you can change colors, position, and add custom CSS to match your Webflow design perfectly.

What if I have multiple Webflow sites?

Create multiple sites in Notedis, each with its own site key. Organize them in workspaces for easy management.

Get Started Today

Ready to simplify feedback on your Webflow projects?

1. Sign up for Notedis (free 14-day trial, no credit card): notedis.com/register
2. Add your Webflow site and get your site key
3. Install the widget using the code above (takes 5 minutes)
4. Start collecting clear, visual feedback from clients

Stop playing feedback detective. Start fixing issues faster.

---

Additional Resources

• Full Webflow Installation Guide - Detailed technical documentation
• Widget Configuration Options - Customize appearance and behavior
• Troubleshooting Guide - Fix common issues
• FAQ - Answers to common questions