Webflow Installation

Learn how to install the Notedis feedback widget on your Webflow website.

Prerequisites

Active Webflow site
Webflow site plan (Starter, CMS, Business, or Enterprise)
Notedis account with site key

Note: Custom code requires a paid site plan. Free staging sites cannot publish with custom code.

Installation Steps

Step 1: Get Your Site Key

Log in to your Notedis dashboard
Navigate to Sites
Click the Edit button on your site (or create a new one)
Copy your Site Key (starts with site_)

Step 2: Access Custom Code Settings

Log in to your Webflow account
Open your project in the Designer
Click the Settings icon (gear) in the left toolbar
Select Custom Code tab
Scroll to the Footer Code section

Why Footer? The footer ensures the widget loads after your page content is ready.

Step 3: Add Notedis Widget Code

In the Footer Code section, paste:

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

Replace YOUR_SITE_KEY_HERE with your actual site key from Step 1.

Step 4: Publish Your Site

Click Publish in the top-right corner
Select Publish to selected domains
Wait for publishing to complete
Visit your live site
Look for the feedback button in the bottom-right corner

Important: Custom code only works on published sites, not in Webflow Designer preview.

Configuration Options

Customize the widget by modifying the notedisConfig object:

Position

Choose where the button appears:

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

Position Recommendations:

bottom-right - Default, most common
bottom-left - Good for right-side CTAs
top-right - Stays visible when scrolling
top-left - Use if other corners are occupied

Button Color

Match your Webflow design system:

window.notedisConfig = {
  siteKey: 'YOUR_SITE_KEY_HERE',
  apiUrl: 'https://notedis.test',
  position: 'bottom-right',
  color: '#FF6B35' // Any hex color code
};

Color Tips:

Extract colors from Webflow Style Manager
Match your brand's primary color
Ensure good contrast with page backgrounds
Test on both light and dark sections

See Configuration for all available options.

Webflow-Specific Considerations

Site Plan Requirements

Paid Plans Support Custom Code:

Starter - Basic hosting, custom code supported ✅
CMS - Dynamic content, custom code supported ✅
Business - Advanced features, custom code supported ✅
Enterprise - Full control, custom code supported ✅

Free Staging:

Cannot publish with custom code ❌
Upgrade to any paid plan to use widget

Designer vs Published Site

Important Distinction:

Webflow Designer:

Preview mode only
Custom code doesn't execute
Widget won't appear

Published Site:

Live, production site
Custom code executes normally
Widget appears and functions

Always test on your published site, not in Designer preview.

Page-Specific Installation

To add the widget to specific pages only:

Open the page in Webflow Designer
Click Page Settings (gear icon in top-left)
Select Custom Code tab
Paste code in Before tag section
Click Save
Publish the page

Note: Site-wide (Settings → Custom Code) is recommended for consistency.

CMS and Dynamic Pages

The widget works on all Webflow page types:

Static Pages:

Home page ✅
About page ✅
Contact page ✅
Custom pages ✅

CMS Collection Pages:

Blog posts ✅
Product pages ✅
Portfolio items ✅
Any CMS template ✅

Dynamic Behavior:

Widget automatically captures current URL
Feedback shows exact collection item URL
Works with dynamic content loading

Verification

Test the Widget

After publishing:

Clear cache: Ctrl+F5 (Windows) or Cmd+Shift+R (Mac)
Visit your live Webflow site URL
Look for feedback button in your chosen position
Click to open the feedback modal
Test screenshot capture and annotation
Submit test feedback
Check Notedis dashboard to confirm receipt

Testing Checklist

✅ Desktop browsers (Chrome, Firefox, Safari, Edge)
✅ Mobile devices (iOS Safari, Chrome Mobile)
✅ Different pages (home, CMS, static)
✅ Screenshot capture works
✅ Feedback appears in dashboard

Troubleshooting

Widget Not Appearing

Check These:

Verify Paid Plan
- Confirm you have Starter plan or higher
- Free staging sites cannot use custom code
- Check your plan in Webflow settings
Check Code Placement
- Code should be in Footer Code (site-wide)
- Or Before tag (page-specific)
- Not in Header Code (loads too early)
Verify Site Key
- Double-check site key is correct
- Should start with site_
- No extra spaces or quotes around key
Publish Required
- Save custom code in settings
- Click Publish button
- Wait for publishing to complete
- Custom code only works on published site
Clear Cache
- Browser cache can show old version
- Hard refresh: Ctrl+F5 or Cmd+Shift+R
- Try incognito/private browsing mode
Check Console Errors
- Press F12 to open developer tools
- Click Console tab
- Look for JavaScript errors
- Common: CORS errors, 404 errors, syntax errors

Widget in Designer Preview

Issue: Widget doesn't show in Webflow Designer.

This is normal:

Designer preview doesn't execute custom code
Preview is for design work only
Widget only works on published site

Solution:

Publish your site
Test on live URL
Don't expect widget in Designer

Multiple Widgets Appearing

Cause: Code added in multiple places.

Solution:

Check Settings → Custom Code → Footer Code
Check individual Page Settings → Custom Code
Remove duplicate code, keep only one instance
Publish site

Widget Conflicts with Webflow IX

Issue: Webflow Interactions (IX) affecting widget.

Symptoms:

Button animating unexpectedly
Widget hidden by interactions
Z-index conflicts

Solution:
Add custom CSS to exclude widget from interactions:

<style>
#notedis-feedback-button,
#notedis-overlay {
  /* Prevent Webflow IX from affecting widget */
  will-change: auto !important;
  z-index: 999999 !important;
}
</style>

Add this in Settings → Custom Code → Head Code.

Common Webflow Issues

Issue: Widget Behind Navbar

Symptom: Fixed navbar covers widget button.

Solution:
Adjust z-index in Settings → Custom Code → Head Code:

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

Issue: Widget Position with Fixed Elements

Symptom: Widget overlaps with fixed sidebar or footer.

Solution:
Adjust position with custom CSS:

<style>
#notedis-feedback-button {
  bottom: 80px !important; /* Move up if needed */
  right: 20px !important; /* Adjust horizontal position */
}

/* Mobile adjustments */
@media (max-width: 767px) {
  #notedis-feedback-button {
    bottom: 90px !important;
  }
}
</style>

Issue: CMS Filter Interactions

Symptom: Widget reloads when CMS filters change.

This is normal:

Webflow CMS filters may reload page sections
Widget reinitializes automatically
No action needed

Advanced Configuration

Exclude from Specific Pages

Hide widget on certain pages using conditional logic:

<script>
  // Don't load on thank-you page
  if (!window.location.pathname.includes('/thank-you')) {
    window.notedisConfig = {
      siteKey: 'YOUR_SITE_KEY_HERE',
      apiUrl: 'https://notedis.test',
      position: 'bottom-right',
      color: '#3B82F6'
    };

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

Match Webflow Style Guide

Extract colors from your Webflow Style Manager:

Open Style Manager (paintbrush icon)
Note your brand colors
Copy hex color code
Use in widget config:

window.notedisConfig = {
  siteKey: 'YOUR_SITE_KEY_HERE',
  apiUrl: 'https://notedis.test',
  position: 'bottom-right',
  color: '#4353FF' // Your brand color
};

Custom Styling

Add custom styles in Settings → Custom Code → Head Code:

<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;
}

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

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

/* Tablet-specific */
@media (min-width: 768px) and (max-width: 991px) {
  #notedis-feedback-button {
    right: 15px !important;
    bottom: 15px !important;
  }
}
</style>

Webflow Interactions Compatibility

Widget with Page Transitions

If using page transition interactions:

The widget:

Persists across transitions ✅
Doesn't reload unnecessarily ✅
Maintains state ✅

No special configuration needed.

Widget with Scroll Animations

If you have scroll-triggered animations:

The widget:

Won't interfere with scroll animations ✅
Fixed positioning stays consistent ✅
Loads after animations are ready ✅

E-Commerce Integration

For Webflow E-Commerce sites:

Widget Works On:

Product pages ✅
Collection pages ✅
Cart page ✅
Checkout page ✅

Use Cases:

Product feedback ("This image is wrong")
Checkout issues ("Payment failed")
Shipping questions
General store feedback

Benefits:

URL capture shows exact product
Screenshot captures product details
Helps improve conversion rates

Responsive Design

The widget is fully responsive on Webflow:

Desktop (992px+):

Full-size button
Complete modal interface
All annotation tools available

Tablet (768px - 991px):

Slightly smaller button
Adapted modal layout
Touch-optimized controls

Mobile (< 768px):

Mobile-optimized button
Full-screen modal
Touch-friendly interface
Simplified annotation tools

Webflow Breakpoints:

Widget respects Webflow breakpoints
Automatically adjusts layout
No custom media queries needed (unless customizing)

Performance Impact

Widget Performance on Webflow:

Loads asynchronously with defer
No impact on Webflow page speed
Minimal JavaScript payload
Doesn't affect Lighthouse scores
Won't hurt SEO

Webflow-Specific Benefits:

Loads after Webflow's interactions
Doesn't block page rendering
Compatible with Webflow's CDN
Works with lazy loading

Removing the Widget

To remove Notedis from your Webflow site:

Go to Settings → Custom Code
Find Notedis code in Footer Code section
Delete the entire code block
Click Save Settings
Click Publish

Also Remove:

Any page-specific code (check Page Settings)
Custom CSS if added (in Head Code)
Check all pages if using page-specific installation

Webflow Hosting Compatibility

The widget works with all Webflow hosting options:

Webflow Hosting:

Standard hosting ✅
CMS hosting ✅
E-commerce hosting ✅

External Hosting:

Exported sites ✅ (code exports with site)
Self-hosted ✅ (ensure JavaScript enabled)

CDN:

Works with Webflow's CDN ✅
Fast global delivery ✅

Multi-Language Sites

For Webflow sites with multiple languages:

Current Support:

Widget UI is English only
Users can write feedback in any language
Primarily screenshot-based (visual)

Workaround:

Visual feedback transcends language
Screenshot shows the issue clearly
Users can describe in their language

Coming Soon:

Multi-language support on roadmap
Contact support for specific language requests

Webflow Template Compatibility

The widget works with all Webflow templates:

Template Types:

Business templates ✅
Portfolio templates ✅
E-commerce templates ✅
Landing page templates ✅
Blog templates ✅
One-page templates ✅

Marketplace Templates:

All marketplace templates ✅
Premium templates ✅
Free templates ✅

Custom Templates:

Custom-built sites ✅
Client projects ✅

Webflow University Resources

Helpful Webflow Docs:

Custom Code - Official guide to custom code
Publishing - How to publish sites
Site Plans - Compare plans

External Resources:

Configuration Guide - Notedis configuration
Customization Guide - Advanced options
Troubleshooting - Common issues

Support for Webflow Users

Getting Help

Documentation:

Configuration - Basic setup
Customization - Advanced features
Troubleshooting - Fix issues
FAQ - Common questions

Webflow-Specific Support:

Email: [email protected]
Include your Webflow site URL
Mention if using CMS or E-commerce
Share screenshots of issues
Specify which plan you're on

Response Time:

Usually within 24 hours
Faster for urgent issues
Include error messages for quicker resolution

Next Steps

Configuration - Customize appearance
Customization - Advanced options
Features - Explore all features
Dashboard Guide - Manage feedback

Webflow Plan Comparison

Feature	Free Staging	Starter	CMS	Business	Enterprise
Custom Code	❌	✅	✅	✅	✅
Notedis Widget	❌	✅	✅	✅	✅
Published Site	❌	✅	✅	✅	✅
CMS Collections	❌	Limited	✅	✅	✅

Recommendation: Minimum Starter plan required for Notedis widget.

Tips for Success

Best Practices

Installation:

Use site-wide Footer Code (most common)
Test on published site, not Designer
Clear cache when testing changes
Verify site key is correct

Configuration:

Match brand colors from Style Manager
Choose position that doesn't conflict
Test on all breakpoints
Consider fixed elements

Maintenance:

Check after template updates
Test after publishing changes
Monitor feedback submissions
Keep site key secure

Performance:

Widget loads asynchronously
No impact on page speed
Works with Webflow optimizations
Compatible with lazy loading

Frequently Asked Questions

Does it work on free Webflow sites?

No, you need a paid site plan (Starter or higher) to publish with custom code.

Will it show in the Webflow Designer?

No, custom code only executes on published sites, not in Designer preview.

Does it work with Webflow CMS?

Yes, the widget works perfectly on CMS collection pages and dynamic content.

Can I style it to match my Webflow design?

Yes, use custom CSS in Head Code to fully customize the widget appearance.

Does it affect my Webflow site's performance?

No, the widget loads asynchronously and has no impact on performance or SEO.

Can I hide it on specific CMS items?

Yes, use conditional logic with CMS fields to show/hide on specific items.