Squarespace Installation

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

Prerequisites

Active Squarespace website
Squarespace Business plan or higher (required for custom code)
Notedis account with site key

Note: Custom code injection requires a Business, Commerce Basic, or Commerce Advanced plan. Personal plans cannot add 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 Code Injection

Log in to your Squarespace account
Go to Settings → Advanced → Code Injection
Scroll to the Footer section

Note: The Footer section ensures the widget loads after your page content.

Step 3: Add Notedis Widget Code

In the Footer code box, 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: Save and Test

Click Save at the top of the Code Injection page
Visit your live Squarespace site
Look for the feedback button in the bottom-right corner
Click it to test the widget

Note: Changes may take a few minutes to appear on your live site.

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

Available Positions:

bottom-right - Default, most common
bottom-left - Good for sites with right-side elements
top-right - Less common, stays visible when scrolling
top-left - Rare, use if other corners are occupied

Button Color

Match your Squarespace template colors:

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

Tips for Color Selection:

Use your brand's primary color
Extract colors from Squarespace Style Editor
Ensure good contrast with your background
Test on both light and dark sections of your site

See Configuration for all available options.

Squarespace-Specific Considerations

Plan Requirements

Business Plan Features:

Code injection in header and footer
Custom CSS
Third-party integrations
Remove Squarespace branding

Cannot Use Widget On:

Personal plans
Trial sites (upgrade required)

Squarespace 7.0 vs 7.1

The widget works on both Squarespace versions:

Squarespace 7.1:

Modern editor interface
Template-agnostic design
Easier code injection access

Squarespace 7.0:

Classic templates
More customization options
Same code injection method

Installation is identical for both versions.

Page-Specific Injection

To add the widget to specific pages only:

Go to the page you want to add it to
Click Settings (gear icon)
Select Advanced tab
Paste code in Page Header Code Injection
Click Save

Note: This requires Business plan or higher.

Template Compatibility

The Notedis widget works with all Squarespace templates:

Fully Compatible With:

All Squarespace 7.1 templates
All Squarespace 7.0 templates
Commerce templates
Portfolio templates
Blog templates
Business templates

Responsive Design:

Automatically adapts to mobile layouts
Works with Squarespace mobile styles
Respects template breakpoints

Verification

Test the Widget

After installation:

Clear your browser cache (Ctrl+F5 or Cmd+Shift+R)
Visit your live Squarespace site
Look for the feedback button in your chosen position
Click the button to open the feedback modal
Submit a test feedback with a screenshot
Check your Notedis dashboard to confirm it appears

Testing Tips:

Test on both desktop and mobile
Try different pages (home, blog, shop)
Test in different browsers
Check on actual mobile devices

Preview Mode Limitations

Important: The widget may not appear in Squarespace's preview mode.

Why:

Preview mode has limited JavaScript support
Some features are disabled for performance
Custom code may not execute fully

Always test on your live site after saving changes.

Troubleshooting

Widget Not Appearing

Check These First:

Verify Business Plan
- Confirm your Squarespace plan supports code injection
- Personal plans cannot use custom code
- Upgrade to Business plan if needed
Check Code Placement
- Ensure code is in Footer section
- Not in Header (may load before page)
- Footer ensures proper page load order
Verify Site Key
- Double-check your site key is correct
- No extra spaces before or after the key
- Key should start with site_
Clear Cache
- Clear browser cache completely
- Try in incognito/private browsing mode
- Hard refresh: Ctrl+F5 (Windows) or Cmd+Shift+R (Mac)
Check Browser Console
- Press F12 to open developer tools
- Click Console tab
- Look for JavaScript errors
- Common issues: CORS errors, 404 errors
Wait for Propagation
- Squarespace changes can take 2-5 minutes
- If just saved, wait a few minutes
- Try clearing CDN cache if available

Code Injection Not Saving

Possible Causes:

JavaScript syntax error in code
Missing closing tags
Conflicting scripts

Solutions:

Copy the code exactly as shown above
Don't modify script structure
Ensure all tags are properly closed
Remove any other custom scripts temporarily to test

Widget Appears Multiple Times

Cause: Code added in multiple places.

Solution:

Go to Settings → Advanced → Code Injection
Check Header section - remove Notedis code if present
Check Footer section - keep only one instance
Check individual pages - remove page-specific code if using site-wide
Save changes

Widget Conflicts with Other Elements

Common Conflicts:

Chat widgets (Intercom, Drift)
Newsletter popups
Cookie consent banners

Solutions:

Change Position:

position: 'bottom-left' // Move to different corner

Adjust via CSS (Advanced):

<style>
#notedis-feedback-button {
  bottom: 80px !important; /* Move up if conflicting with footer */
}
</style>

Common Squarespace Issues

Issue: Widget Hidden Behind Squarespace Elements

Symptom: Button is there but not clickable, or partially hidden.

Cause: Squarespace template elements have higher z-index.

Solution:
Add custom CSS in Design → Custom CSS:

#notedis-feedback-button {
  z-index: 99999 !important;
}

Issue: Widget Style Conflicts

Symptom: Widget button looks broken or unstyled.

Cause: Squarespace CSS overriding widget styles.

Solution:
This is rare, but contact Notedis support if styling looks broken. Include:

Your Squarespace template name
Screenshot of the issue
Browser and device information

Issue: Mobile Menu Overlap

Symptom: Widget button overlaps mobile navigation.

Solution:
Move widget to different position or add mobile-specific CSS:

@media (max-width: 768px) {
  #notedis-feedback-button {
    bottom: 100px !important; /* Move above mobile nav */
  }
}

Advanced Configuration

Exclude from Specific Pages

To hide the widget on certain pages:

Option 1: Conditional JavaScript

<script>
  // Only load widget if NOT 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>

Option 2: Page-Specific Injection

Remove code from site-wide Footer
Add code to individual pages via Page Settings → Advanced
More control but more maintenance

Match Squarespace Template Colors

Extract colors from your Squarespace template:

Go to Design → Site Styles
Note your theme colors
Use one in the widget config:

window.notedisConfig = {
  siteKey: 'YOUR_SITE_KEY_HERE',
  apiUrl: 'https://notedis.test',
  position: 'bottom-right',
  color: '#1A1A1A' // Match your template's accent color
};

Custom CSS Styling

Add custom styles in Design → Custom CSS:

/* Customize widget button */
#notedis-feedback-button {
  border-radius: 50px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}

/* Adjust position for specific template */
#notedis-feedback-button {
  bottom: 20px !important;
  right: 20px !important;
}

/* Mobile-specific adjustments */
@media (max-width: 768px) {
  #notedis-feedback-button {
    bottom: 80px !important;
  }
}

Performance Impact

Widget Performance:

Loads asynchronously with defer attribute
No impact on Squarespace page load speed
Minimal JavaScript payload (~50KB)
Won't affect Squarespace SEO

Best Practices:

Widget loads after page content
Doesn't block Squarespace rendering
Uses CDN for fast delivery
Optimized for performance

Removing the Widget

To remove the Notedis widget from your Squarespace site:

Go to Settings → Advanced → Code Injection
Find the Notedis code in the Footer section
Delete the entire code block
Click Save
Changes apply to live site within a few minutes

Also Check:

Individual page code injection (if used)
Any custom CSS related to Notedis
Remove from all locations where added

E-Commerce Integration

For Squarespace Commerce sites:

Widget Works On:

Product pages
Collection pages
Cart page
Checkout page (if Business plan)

Use Cases:

Product feedback
Checkout issues
Shipping questions
General store feedback

Tip: The widget captures the exact URL, so you'll know which product page feedback came from.

Multi-Language Sites

If your Squarespace site supports multiple languages:

Current Limitation:

Widget text is in English only
No built-in translation yet

Workaround:

Widget is primarily visual (screenshot-based)
Users can write feedback in any language
Most users understand the interface

Future Feature:

Multi-language support is on the roadmap
Contact support to request specific languages

Support for Squarespace Users

Getting Help

Documentation:

Squarespace-Specific Support:

Email: [email protected]
Include your Squarespace site URL
Mention your Squarespace version (7.0 or 7.1)
Template name (if known)
Screenshots of issues

Response Time:

Usually within 24 hours
Faster for Business plan subscribers

Next Steps

Configuration - Customize widget appearance
Customization - Advanced widget options
Features - Explore all Notedis features
Dashboard Guide - Learn the Notedis dashboard

Squarespace Plan Comparison

Feature	Personal	Business	Commerce
Code Injection	❌	✅	✅
Notedis Widget	❌	✅	✅
Custom CSS	Limited	✅	✅
Remove SS Branding	❌	✅	✅

Recommendation: Upgrade to Business plan (minimum) to use Notedis on your Squarespace site.

Tips for Success

Best Practices

Placement:

Bottom-right works best for most Squarespace templates
Consider mobile footer placement
Avoid overlapping with chat widgets

Color:

Match your brand colors
Use Squarespace color palette
Ensure good contrast
Test on different page backgrounds

Testing:

Test on all major pages
Check mobile responsiveness
Test with actual feedback submission
Verify screenshots capture correctly

Maintenance:

Check widget quarterly
Update if Squarespace template changes
Monitor feedback submissions
Keep Notedis site key secure

Frequently Asked Questions

Can I use Notedis on Squarespace Personal plan?

No, Personal plans don't support custom code injection. You need Business plan or higher.

Does it work on member-only pages?

Yes, the widget works on password-protected and member-only pages.

Will it slow down my Squarespace site?

No, the widget loads asynchronously and has no impact on page speed.

Can I hide it on mobile?

Yes, use custom CSS to hide on mobile:

@media (max-width: 768px) {
  #notedis-feedback-button {
    display: none !important;
  }
}

Does it work with Squarespace analytics?

Yes, the widget doesn't interfere with Squarespace analytics or tracking.