Configuration

Customize the Notedis widget to match your brand and workflow.

Basic Configuration

All configuration is done through the notedisConfig object:

window.notedisConfig = {
  siteKey: 'your-unique-site-key',  // Required
  apiUrl: 'https://notedis.com',    // Required (don't change)
  position: 'bottom-right',          // Optional
  color: '#3B82F6',                  // Optional
};

Required Options

siteKey

Your unique site identifier. Get this from your dashboard.

siteKey: 'site_1234567890abcdef'

apiUrl

The Notedis server endpoint. Always use https://notedis.com.

apiUrl: 'https://notedis.com'

Position Options

Control where the feedback button appears on your site.

position

Type: string
Default: 'bottom-right'
Options: 'bottom-right', 'bottom-left', 'top-right', 'top-left'

// Bottom right corner (default)
position: 'bottom-right'

// Bottom left corner
position: 'bottom-left'

// Top right corner
position: 'top-right'

// Top left corner
position: 'top-left'

Appearance Options

color

Type: string (hex color)
Default: '#3B82F6' (blue)

Customize the button and modal accent color to match your brand.

// Blue (default)
color: '#3B82F6'

// Green
color: '#10b981'

// Purple
color: '#8b5cf6'

// Red
color: '#ef4444'

// Orange
color: '#f97316'

// Custom brand color
color: '#FF6B35'

Advanced Configuration

Note: The widget currently supports the four core options above (siteKey, apiUrl, position, color). Additional customization options may be available in future updates.

For advanced styling and behavior customization, see the Customization guide.

// Your custom button
document.getElementById('my-feedback-btn').addEventListener('click', function() {
  window.notedisWidget.open();
});

See Customization for more details.

autoCapture

Type: boolean
Default: false

Automatically capture a screenshot when the widget opens.

// Manual screenshot (default)
autoCapture: false

// Auto-capture screenshot on open
autoCapture: true

Note: Some users may find auto-capture intrusive. Use sparingly.

Callback Functions

Execute custom code when widget events occur.

onOpen

Type: function
Default: undefined

Called when the feedback modal opens.

onOpen: function() {
  console.log('Feedback modal opened');

  // Track with analytics
  gtag('event', 'feedback_opened');
}

onClose

Type: function
Default: undefined

Called when the feedback modal closes.

onClose: function() {
  console.log('Feedback modal closed');

  // Track with analytics
  gtag('event', 'feedback_closed');
}

onSubmit

Type: function
Parameters: feedback object
Default: undefined

Called when feedback is successfully submitted.

onSubmit: function(feedback) {
  console.log('Feedback submitted:', feedback);

  // Show thank you message
  alert('Thank you for your feedback!');

  // Track with analytics
  gtag('event', 'feedback_submitted', {
    category: feedback.category,
    priority: feedback.priority
  });
}

Complete Example

window.notedisConfig = {
  // Required
  siteKey: 'your-unique-site-key-here',
  apiUrl: 'https://notedis.com',

  // Position & Appearance
  position: 'bottom-left',
  color: '#10b981',
  buttonText: 'Send Feedback',
  buttonIcon: true,

  // Behavior
  autoCapture: false,
  hideButton: false,

  // Callbacks
  onOpen: function() {
    console.log('Widget opened');
    gtag('event', 'feedback_opened');
  },

  onClose: function() {
    console.log('Widget closed');
  },

  onSubmit: function(feedback) {
    console.log('Feedback submitted');
    alert('Thanks for your feedback!');
    gtag('event', 'feedback_submitted');
  }
};

Environment-Specific Configuration

Development vs Production

// Detect environment
const isDev = window.location.hostname === 'localhost' ||
              window.location.hostname.includes('staging');

window.notedisConfig = {
  siteKey: isDev ? 'site_dev_key' : 'site_prod_key',
  apiUrl: 'https://notedis.com',
  position: 'bottom-right',

  // Show different color in dev
  color: isDev ? '#ef4444' : '#3B82F6',

  // Different button text in dev
  buttonText: isDev ? '🚧 Dev Feedback' : 'Feedback'
};

Per-Page Configuration

// Get current page path
const currentPath = window.location.pathname;

// Custom config based on page
let buttonText = 'Feedback';
if (currentPath.includes('/checkout')) {
  buttonText = 'Checkout Issue?';
} else if (currentPath.includes('/pricing')) {
  buttonText = 'Questions?';
}

window.notedisConfig = {
  siteKey: 'your-site-key',
  apiUrl: 'https://notedis.com',
  buttonText: buttonText
};

Configuration Validation

The widget will log warnings to the console if configuration is invalid:

// Missing site key
window.notedisConfig = {
  apiUrl: 'https://notedis.com'
};
// Console: "Notedis: Missing siteKey in configuration"

// Invalid position
window.notedisConfig = {
  siteKey: 'site_123',
  position: 'middle-center'  // Invalid
};
// Console: "Notedis: Invalid position. Use bottom-right, bottom-left, top-right, or top-left"

Check your browser console (F12) for configuration errors.

Next Steps

SquarespaceCustomization