@product7/feedback-sdk 1.1.0 → 1.1.4

package/dist/feedback-sdk.js

@@ -79,19 +79,45 @@
 		}
 	}
 
+	const MOCK_CONFIG = {
+		primaryColor: '#155EEF',
+		backgroundColor: '#ffffff',
+		textColor: '#1F2937',
+		boardId: 'feature-requests',
+		size: 'medium',
+		displayMode: 'modal',
+	};
+
+	// Environment URLs
+	const ENV_URLS = {
+		production: {
+			base: 'https://api.product7.io/api/v1',
+			withWorkspace: (workspace) => `https://${workspace}.api.product7.io/api/v1`,
+		},
+		staging: {
+			base: 'https://staging.api.product7.io/api/v1',
+			withWorkspace: (workspace) => `https://${workspace}.staging.api.product7.io/api/v1`,
+		},
+	};
+
 	class APIService {
 		constructor(config = {}) {
 			this.workspace = config.workspace;
 			this.sessionToken = null;
 			this.sessionExpiry = null;
 			this.userContext = config.userContext || null;
+			this.mock = config.mock || false;
+			this.env = config.env || 'production'; // 'production' or 'staging'
 
 			if (config.apiUrl) {
+				// Custom API URL takes precedence
 				this.baseURL = config.apiUrl;
-			} else if (this.workspace) {
-				this.baseURL = `https://${this.workspace}.staging.api.product7.io/api/v1`;
 			} else {
-				this.baseURL = 'https://staging.api.product7.io/api/v1';
+				// Use environment-based URL
+				const envConfig = ENV_URLS[this.env] || ENV_URLS.production;
+				this.baseURL = this.workspace
+					? envConfig.withWorkspace(this.workspace)
+					: envConfig.base;
 			}
 
 			this._loadStoredSession();
@@ -111,6 +137,18 @@
 				throw new APIError(400, error);
 			}
 
+			// Mock mode - return fake session
+			if (this.mock) {
+				this.sessionToken = 'mock_session_' + Date.now();
+				this.sessionExpiry = new Date(Date.now() + 3600 * 1000);
+				this._storeSession();
+				return {
+					sessionToken: this.sessionToken,
+					config: MOCK_CONFIG,
+					expiresIn: 3600,
+				};
+			}
+
 			const payload = {
 				workspace: this.workspace,
 				user: this.userContext,
@@ -152,6 +190,20 @@
 				throw new APIError(401, 'No valid session token available');
 			}
 
+			// Mock mode - simulate success
+			if (this.mock) {
+				await new Promise(resolve => setTimeout(resolve, 500));
+				return {
+					success: true,
+					data: {
+						id: 'mock_post_' + Date.now(),
+						title: feedbackData.title,
+						content: feedbackData.content,
+					},
+					message: 'Feedback submitted successfully!',
+				};
+			}
+
 			const payload = {
 				board: feedbackData.board_id || feedbackData.board || feedbackData.boardId,
 				title: feedbackData.title,
@@ -588,8 +640,12 @@
 			this.options = {
 				container: null,
 				position: this.sdk.config.position,
-				theme: this.sdk.config.theme,
 				boardId: this.sdk.config.boardId,
+				displayMode: options.displayMode || 'panel', // 'panel' or 'modal'
+				size: options.size || 'medium', // 'small', 'medium', 'large'
+				primaryColor: options.primaryColor || '#155EEF',
+				backgroundColor: options.backgroundColor || '#ffffff',
+				textColor: options.textColor || '#1F2937',
 				autoShow: false,
 				showBackdrop: true,
 				customStyles: {},
@@ -604,6 +660,7 @@
 
 			this.state = {
 				isOpen: false,
+				isLoading: false,
 				isSubmitting: false,
 				title: '',
 				content: '',
@@ -658,18 +715,65 @@
 
 		openPanel() {
 			this.state.isOpen = true;
-			this._renderPanel();
-			
+
+			if (this.options.displayMode === 'modal') {
+				this._showLoadingModal();
+				// Simulate loading delay then show form
+				setTimeout(() => {
+					this._hideLoadingModal();
+					this._renderPanel();
+					requestAnimationFrame(() => {
+						if (this.panelElement) {
+							this.panelElement.classList.add('open');
+						}
+						if (this.backdropElement) {
+							this.backdropElement.classList.add('show');
+						}
+					});
+				}, 600);
+			} else {
+				this._renderPanel();
+				requestAnimationFrame(() => {
+					if (this.panelElement) {
+						this.panelElement.classList.add('open');
+					}
+					if (this.backdropElement) {
+						this.backdropElement.classList.add('show');
+					}
+				});
+			}
+		}
+
+		_showLoadingModal() {
+			this.state.isLoading = true;
+
+			// Create backdrop
+			this.backdropElement = document.createElement('div');
+			this.backdropElement.className = 'feedback-panel-backdrop';
+			document.body.appendChild(this.backdropElement);
+
+			// Create loading modal
+			this.loadingElement = document.createElement('div');
+			this.loadingElement.className = `feedback-loading-modal theme-${this.options.theme}`;
+			this.loadingElement.innerHTML = `
+			<div class="feedback-loading-spinner"></div>
+		`;
+			document.body.appendChild(this.loadingElement);
+
 			requestAnimationFrame(() => {
-				if (this.panelElement) {
-					this.panelElement.classList.add('open');
-				}
-				if (this.backdropElement) {
-					this.backdropElement.classList.add('show');
-				}
+				this.backdropElement.classList.add('show');
+				this.loadingElement.classList.add('show');
 			});
 		}
 
+		_hideLoadingModal() {
+			this.state.isLoading = false;
+			if (this.loadingElement) {
+				this.loadingElement.remove();
+				this.loadingElement = null;
+			}
+		}
+
 		closePanel() {
 			if (this.panelElement) {
 				this.panelElement.classList.remove('open');
@@ -774,7 +878,7 @@
 		_renderPanel() {
 			if (this.panelElement) return;
 
-			if (this.options.showBackdrop) {
+			if (this.options.showBackdrop && !this.backdropElement) {
 				this.backdropElement = document.createElement('div');
 				this.backdropElement.className = 'feedback-panel-backdrop';
 				document.body.appendChild(this.backdropElement);
@@ -782,8 +886,13 @@
 				this.backdropElement.addEventListener('click', this.closePanel);
 			}
 
+			const modeClass = this.options.displayMode === 'modal' ? 'feedback-modal' : 'feedback-panel';
+			const sizeClass = `size-${this.options.size}`;
 			this.panelElement = document.createElement('div');
-			this.panelElement.className = `feedback-panel theme-${this.options.theme}`;
+			this.panelElement.className = `${modeClass} ${sizeClass}`;
+			this.panelElement.style.setProperty('--primary-color', this.options.primaryColor);
+			this.panelElement.style.setProperty('--bg-color', this.options.backgroundColor);
+			this.panelElement.style.setProperty('--text-color', this.options.textColor);
 			this.panelElement.innerHTML = this._getPanelHTML();
 
 			document.body.appendChild(this.panelElement);
@@ -1158,6 +1267,509 @@
 		}
 	}
 
+	class SurveyWidget extends BaseWidget {
+		constructor(options) {
+			super({ ...options, type: 'survey' });
+
+			this.surveyOptions = {
+				surveyType: options.surveyType || 'nps', // 'nps', 'csat', 'ces', 'custom'
+				position: options.position || 'bottom-right', // 'bottom-right', 'bottom-left', 'center', 'bottom'
+				title: options.title || null,
+				description: options.description || null,
+				lowLabel: options.lowLabel || null,
+				highLabel: options.highLabel || null,
+				customQuestions: options.customQuestions || [],
+				theme: options.theme || 'light',
+				onSubmit: options.onSubmit || null,
+				onDismiss: options.onDismiss || null,
+			};
+
+			this.surveyState = {
+				score: null,
+				feedback: '',
+				customAnswers: {},
+				isVisible: false,
+			};
+		}
+
+		_render() {
+			// Survey widget doesn't render a trigger button, it's shown programmatically
+			const container = document.createElement('div');
+			container.className = 'feedback-survey-container';
+			container.style.display = 'none';
+			return container;
+		}
+
+		_attachEvents() {
+			// Events are attached when survey is shown
+		}
+
+		show() {
+			this._renderSurvey();
+			this.surveyState.isVisible = true;
+			this.sdk.eventBus.emit('survey:shown', { widget: this, type: this.surveyOptions.surveyType });
+			return this;
+		}
+
+		hide() {
+			this._closeSurvey();
+			return this;
+		}
+
+		_renderSurvey() {
+			// Remove any existing survey
+			this._closeSurvey();
+
+			const config = this._getSurveyConfig();
+			const positionStyles = this._getPositionStyles();
+			const themeStyles = this.surveyOptions.theme === 'dark'
+				? 'background: #1a1a1a; color: #fff;'
+				: 'background: #fff; color: #1d1d1f;';
+
+			// Create backdrop for center position
+			if (this.surveyOptions.position === 'center') {
+				this.backdropElement = document.createElement('div');
+				this.backdropElement.className = 'feedback-survey-backdrop';
+				document.body.appendChild(this.backdropElement);
+				this.backdropElement.addEventListener('click', () => this._handleDismiss());
+			}
+
+			this.surveyElement = document.createElement('div');
+			this.surveyElement.className = `feedback-survey feedback-survey-${this.surveyOptions.position} theme-${this.surveyOptions.theme}`;
+			this.surveyElement.style.cssText = `position: fixed; ${positionStyles} z-index: 10000; ${themeStyles} border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,0.3); padding: 24px; min-width: 320px; max-width: 400px; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;`;
+
+			this.surveyElement.innerHTML = `
+			<button class="feedback-survey-close" style="position: absolute; top: 12px; right: 12px; background: none; border: none; font-size: 20px; cursor: pointer; color: ${this.surveyOptions.theme === 'dark' ? '#888' : '#86868b'}; line-height: 1;">&times;</button>
+			<h3 class="feedback-survey-title" style="margin: 0 0 8px 0; font-size: 18px; font-weight: 600; padding-right: 24px;">${config.title}</h3>
+			<p class="feedback-survey-description" style="color: ${this.surveyOptions.theme === 'dark' ? '#aaa' : '#86868b'}; margin: 0 0 20px 0; font-size: 14px;">${config.description}</p>
+			<div class="feedback-survey-content">${config.html}</div>
+			<div class="feedback-survey-feedback" style="margin-top: 16px;">
+				<textarea class="feedback-survey-textarea" placeholder="Any additional feedback? (optional)" style="width: 100%; padding: 12px; border: 1px solid ${this.surveyOptions.theme === 'dark' ? '#333' : '#d2d2d7'}; border-radius: 8px; font-size: 14px; resize: none; height: 80px; background: ${this.surveyOptions.theme === 'dark' ? '#2a2a2a' : '#fff'}; color: ${this.surveyOptions.theme === 'dark' ? '#fff' : '#1d1d1f'}; font-family: inherit; box-sizing: border-box;"></textarea>
+			</div>
+			<button class="feedback-survey-submit" style="width: 100%; margin-top: 12px; padding: 12px; background: #007aff; color: white; border: none; border-radius: 8px; font-size: 14px; font-weight: 500; cursor: pointer; font-family: inherit;">Submit</button>
+		`;
+
+			document.body.appendChild(this.surveyElement);
+			this._attachSurveyEvents();
+
+			// Animate in
+			requestAnimationFrame(() => {
+				this.surveyElement.style.opacity = '1';
+				this.surveyElement.style.transform = this.surveyOptions.position === 'center'
+					? 'translate(-50%, -50%) scale(1)'
+					: 'translateY(0)';
+			});
+		}
+
+		_getSurveyConfig() {
+			const configs = {
+				nps: {
+					title: this.surveyOptions.title || 'How likely are you to recommend us?',
+					description: this.surveyOptions.description || 'On a scale of 0-10, how likely are you to recommend our product to a friend or colleague?',
+					html: `
+					<div class="feedback-survey-nps" style="display: flex; justify-content: space-between; gap: 4px;">
+						${[...Array(11).keys()].map(n => `
+							<button class="feedback-survey-nps-btn" data-score="${n}" style="width: 28px; height: 36px; border: 1px solid ${this.surveyOptions.theme === 'dark' ? '#444' : '#d2d2d7'}; border-radius: 6px; background: ${this.surveyOptions.theme === 'dark' ? '#2a2a2a' : '#f8f9fa'}; cursor: pointer; font-size: 12px; color: ${this.surveyOptions.theme === 'dark' ? '#fff' : '#1d1d1f'}; transition: all 0.15s;">${n}</button>
+						`).join('')}
+					</div>
+					<div style="display: flex; justify-content: space-between; margin-top: 8px; font-size: 11px; color: ${this.surveyOptions.theme === 'dark' ? '#888' : '#86868b'};">
+						<span>${this.surveyOptions.lowLabel || 'Not likely'}</span>
+						<span>${this.surveyOptions.highLabel || 'Very likely'}</span>
+					</div>
+				`
+				},
+				csat: {
+					title: this.surveyOptions.title || 'How satisfied are you?',
+					description: this.surveyOptions.description || 'How would you rate your overall satisfaction with our product?',
+					html: `
+					<div class="feedback-survey-csat" style="display: flex; justify-content: center; gap: 16px;">
+						${['😞', '😕', '😐', '🙂', '😄'].map((emoji, i) => `
+							<button class="feedback-survey-csat-btn" data-score="${i + 1}" style="background: none; border: none; cursor: pointer; font-size: 36px; transition: transform 0.15s; padding: 8px;">${emoji}</button>
+						`).join('')}
+					</div>
+					<div style="display: flex; justify-content: space-between; margin-top: 8px; font-size: 11px; color: ${this.surveyOptions.theme === 'dark' ? '#888' : '#86868b'};">
+						<span>${this.surveyOptions.lowLabel || 'Very dissatisfied'}</span>
+						<span>${this.surveyOptions.highLabel || 'Very satisfied'}</span>
+					</div>
+				`
+				},
+				ces: {
+					title: this.surveyOptions.title || 'How easy was it?',
+					description: this.surveyOptions.description || 'How easy was it to accomplish your task today?',
+					html: `
+					<div class="feedback-survey-ces" style="display: flex; justify-content: space-between; gap: 8px;">
+						${['Very Difficult', 'Difficult', 'Neutral', 'Easy', 'Very Easy'].map((label, i) => `
+							<button class="feedback-survey-ces-btn" data-score="${i + 1}" style="flex: 1; padding: 12px 8px; border: 1px solid ${this.surveyOptions.theme === 'dark' ? '#444' : '#d2d2d7'}; border-radius: 8px; background: ${this.surveyOptions.theme === 'dark' ? '#2a2a2a' : '#f8f9fa'}; cursor: pointer; font-size: 11px; color: ${this.surveyOptions.theme === 'dark' ? '#fff' : '#1d1d1f'}; transition: all 0.15s;">${label}</button>
+						`).join('')}
+					</div>
+				`
+				},
+				custom: {
+					title: this.surveyOptions.title || 'Quick Feedback',
+					description: this.surveyOptions.description || 'Help us improve by answering a few questions.',
+					html: this._renderCustomQuestions()
+				}
+			};
+
+			return configs[this.surveyOptions.surveyType] || configs.nps;
+		}
+
+		_renderCustomQuestions() {
+			if (!this.surveyOptions.customQuestions || this.surveyOptions.customQuestions.length === 0) {
+				// Default custom questions
+				return `
+				<div style="margin-bottom: 16px;">
+					<label style="display: block; margin-bottom: 6px; font-size: 13px; font-weight: 500;">What feature do you use most?</label>
+					<select class="feedback-survey-select" data-question="feature" style="width: 100%; padding: 10px; border: 1px solid ${this.surveyOptions.theme === 'dark' ? '#444' : '#d2d2d7'}; border-radius: 8px; font-size: 14px; background: ${this.surveyOptions.theme === 'dark' ? '#2a2a2a' : '#fff'}; color: ${this.surveyOptions.theme === 'dark' ? '#fff' : '#1d1d1f'};">
+						<option value="">Select a feature</option>
+						<option value="feedback">Feedback Collection</option>
+						<option value="surveys">Surveys</option>
+						<option value="analytics">Analytics</option>
+						<option value="integrations">Integrations</option>
+					</select>
+				</div>
+				<div>
+					<label style="display: block; margin-bottom: 6px; font-size: 13px; font-weight: 500;">How often do you use it?</label>
+					<div class="feedback-survey-frequency" style="display: flex; gap: 8px;">
+						${['Daily', 'Weekly', 'Monthly', 'Rarely'].map(freq => `
+							<button class="feedback-survey-freq-btn" data-freq="${freq}" style="flex: 1; padding: 10px; border: 1px solid ${this.surveyOptions.theme === 'dark' ? '#444' : '#d2d2d7'}; border-radius: 8px; background: ${this.surveyOptions.theme === 'dark' ? '#2a2a2a' : '#f8f9fa'}; cursor: pointer; font-size: 12px; color: ${this.surveyOptions.theme === 'dark' ? '#fff' : '#1d1d1f'}; transition: all 0.15s;">${freq}</button>
+						`).join('')}
+					</div>
+				</div>
+			`;
+			}
+
+			return this.surveyOptions.customQuestions.map((q, index) => `
+			<div style="margin-bottom: 16px;">
+				<label style="display: block; margin-bottom: 6px; font-size: 13px; font-weight: 500;">${q.label}</label>
+				${this._renderQuestionInput(q, index)}
+			</div>
+		`).join('');
+		}
+
+		_renderQuestionInput(question, index) {
+			switch (question.type) {
+				case 'select':
+					return `
+					<select class="feedback-survey-select" data-question="${question.id || index}" style="width: 100%; padding: 10px; border: 1px solid ${this.surveyOptions.theme === 'dark' ? '#444' : '#d2d2d7'}; border-radius: 8px; font-size: 14px; background: ${this.surveyOptions.theme === 'dark' ? '#2a2a2a' : '#fff'}; color: ${this.surveyOptions.theme === 'dark' ? '#fff' : '#1d1d1f'};">
+						<option value="">${question.placeholder || 'Select an option'}</option>
+						${question.options.map(opt => `<option value="${opt.value}">${opt.label}</option>`).join('')}
+					</select>
+				`;
+				case 'text':
+					return `
+					<input type="text" class="feedback-survey-input" data-question="${question.id || index}" placeholder="${question.placeholder || ''}" style="width: 100%; padding: 10px; border: 1px solid ${this.surveyOptions.theme === 'dark' ? '#444' : '#d2d2d7'}; border-radius: 8px; font-size: 14px; background: ${this.surveyOptions.theme === 'dark' ? '#2a2a2a' : '#fff'}; color: ${this.surveyOptions.theme === 'dark' ? '#fff' : '#1d1d1f'}; box-sizing: border-box;">
+				`;
+				default:
+					return '';
+			}
+		}
+
+		_getPositionStyles() {
+			const positions = {
+				'bottom-right': 'bottom: 24px; right: 24px; opacity: 0; transform: translateY(20px); transition: all 0.3s ease;',
+				'bottom-left': 'bottom: 24px; left: 24px; opacity: 0; transform: translateY(20px); transition: all 0.3s ease;',
+				'center': 'top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.95); opacity: 0; transition: all 0.3s ease;',
+				'bottom': 'bottom: 0; left: 0; right: 0; border-radius: 16px 16px 0 0; max-width: none; opacity: 0; transform: translateY(20px); transition: all 0.3s ease;'
+			};
+			return positions[this.surveyOptions.position] || positions['bottom-right'];
+		}
+
+		_attachSurveyEvents() {
+			if (!this.surveyElement) return;
+
+			// Close button
+			const closeBtn = this.surveyElement.querySelector('.feedback-survey-close');
+			closeBtn.addEventListener('click', () => this._handleDismiss());
+
+			// Submit button
+			const submitBtn = this.surveyElement.querySelector('.feedback-survey-submit');
+			submitBtn.addEventListener('click', () => this._handleSubmit());
+
+			// Feedback textarea
+			const textarea = this.surveyElement.querySelector('.feedback-survey-textarea');
+			textarea.addEventListener('input', (e) => {
+				this.surveyState.feedback = e.target.value;
+			});
+
+			// Survey type specific events
+			this._attachTypeSpecificEvents();
+
+			// Escape key
+			this._escapeHandler = (e) => {
+				if (e.key === 'Escape') {
+					this._handleDismiss();
+				}
+			};
+			document.addEventListener('keydown', this._escapeHandler);
+		}
+
+		_attachTypeSpecificEvents() {
+			const type = this.surveyOptions.surveyType;
+
+			if (type === 'nps') {
+				this.surveyElement.querySelectorAll('.feedback-survey-nps-btn').forEach(btn => {
+					btn.addEventListener('click', () => this._selectNPS(parseInt(btn.dataset.score)));
+					btn.addEventListener('mouseenter', () => {
+						if (this.surveyState.score !== parseInt(btn.dataset.score)) {
+							btn.style.borderColor = '#007aff';
+						}
+					});
+					btn.addEventListener('mouseleave', () => {
+						if (this.surveyState.score !== parseInt(btn.dataset.score)) {
+							btn.style.borderColor = this.surveyOptions.theme === 'dark' ? '#444' : '#d2d2d7';
+						}
+					});
+				});
+			}
+
+			if (type === 'csat') {
+				this.surveyElement.querySelectorAll('.feedback-survey-csat-btn').forEach(btn => {
+					btn.addEventListener('click', () => this._selectCSAT(parseInt(btn.dataset.score)));
+					btn.addEventListener('mouseenter', () => {
+						btn.style.transform = 'scale(1.1)';
+					});
+					btn.addEventListener('mouseleave', () => {
+						if (this.surveyState.score !== parseInt(btn.dataset.score)) {
+							btn.style.transform = 'scale(1)';
+						}
+					});
+				});
+			}
+
+			if (type === 'ces') {
+				this.surveyElement.querySelectorAll('.feedback-survey-ces-btn').forEach(btn => {
+					btn.addEventListener('click', () => this._selectCES(parseInt(btn.dataset.score)));
+					btn.addEventListener('mouseenter', () => {
+						if (this.surveyState.score !== parseInt(btn.dataset.score)) {
+							btn.style.borderColor = '#007aff';
+						}
+					});
+					btn.addEventListener('mouseleave', () => {
+						if (this.surveyState.score !== parseInt(btn.dataset.score)) {
+							btn.style.borderColor = this.surveyOptions.theme === 'dark' ? '#444' : '#d2d2d7';
+						}
+					});
+				});
+			}
+
+			if (type === 'custom') {
+				// Frequency buttons
+				this.surveyElement.querySelectorAll('.feedback-survey-freq-btn').forEach(btn => {
+					btn.addEventListener('click', () => this._selectFrequency(btn.dataset.freq));
+				});
+
+				// Select inputs
+				this.surveyElement.querySelectorAll('.feedback-survey-select').forEach(select => {
+					select.addEventListener('change', (e) => {
+						this.surveyState.customAnswers[select.dataset.question] = e.target.value;
+					});
+				});
+
+				// Text inputs
+				this.surveyElement.querySelectorAll('.feedback-survey-input').forEach(input => {
+					input.addEventListener('input', (e) => {
+						this.surveyState.customAnswers[input.dataset.question] = e.target.value;
+					});
+				});
+			}
+		}
+
+		_selectNPS(score) {
+			this.surveyState.score = score;
+			this.surveyElement.querySelectorAll('.feedback-survey-nps-btn').forEach(btn => {
+				const btnScore = parseInt(btn.dataset.score);
+				if (btnScore === score) {
+					btn.style.background = '#007aff';
+					btn.style.borderColor = '#007aff';
+					btn.style.color = '#fff';
+				} else {
+					btn.style.background = this.surveyOptions.theme === 'dark' ? '#2a2a2a' : '#f8f9fa';
+					btn.style.borderColor = this.surveyOptions.theme === 'dark' ? '#444' : '#d2d2d7';
+					btn.style.color = this.surveyOptions.theme === 'dark' ? '#fff' : '#1d1d1f';
+				}
+			});
+		}
+
+		_selectCSAT(score) {
+			this.surveyState.score = score;
+			this.surveyElement.querySelectorAll('.feedback-survey-csat-btn').forEach(btn => {
+				const btnScore = parseInt(btn.dataset.score);
+				btn.style.transform = btnScore === score ? 'scale(1.2)' : 'scale(1)';
+			});
+		}
+
+		_selectCES(score) {
+			this.surveyState.score = score;
+			this.surveyElement.querySelectorAll('.feedback-survey-ces-btn').forEach(btn => {
+				const btnScore = parseInt(btn.dataset.score);
+				if (btnScore === score) {
+					btn.style.background = '#007aff';
+					btn.style.borderColor = '#007aff';
+					btn.style.color = '#fff';
+				} else {
+					btn.style.background = this.surveyOptions.theme === 'dark' ? '#2a2a2a' : '#f8f9fa';
+					btn.style.borderColor = this.surveyOptions.theme === 'dark' ? '#444' : '#d2d2d7';
+					btn.style.color = this.surveyOptions.theme === 'dark' ? '#fff' : '#1d1d1f';
+				}
+			});
+		}
+
+		_selectFrequency(freq) {
+			this.surveyState.customAnswers.frequency = freq;
+			this.surveyElement.querySelectorAll('.feedback-survey-freq-btn').forEach(btn => {
+				if (btn.dataset.freq === freq) {
+					btn.style.background = '#007aff';
+					btn.style.borderColor = '#007aff';
+					btn.style.color = '#fff';
+				} else {
+					btn.style.background = this.surveyOptions.theme === 'dark' ? '#2a2a2a' : '#f8f9fa';
+					btn.style.borderColor = this.surveyOptions.theme === 'dark' ? '#444' : '#d2d2d7';
+					btn.style.color = this.surveyOptions.theme === 'dark' ? '#fff' : '#1d1d1f';
+				}
+			});
+		}
+
+		async _handleSubmit() {
+			const type = this.surveyOptions.surveyType;
+
+			// Validate
+			if ((type === 'nps' || type === 'csat' || type === 'ces') && this.surveyState.score === null) {
+				this._showError('Please select a rating');
+				return;
+			}
+
+			const response = {
+				type: type,
+				score: this.surveyState.score,
+				feedback: this.surveyState.feedback,
+				customAnswers: this.surveyState.customAnswers,
+				timestamp: new Date().toISOString(),
+			};
+
+			// Call onSubmit callback if provided
+			if (this.surveyOptions.onSubmit) {
+				this.surveyOptions.onSubmit(response);
+			}
+
+			// Submit to API if not in mock mode
+			if (!this.sdk.config.mock) {
+				try {
+					await this.apiService.submitSurveyResponse(response);
+				} catch (error) {
+					console.error('[SurveyWidget] Failed to submit survey:', error);
+				}
+			}
+
+			this.sdk.eventBus.emit('survey:submitted', { widget: this, response });
+
+			this._closeSurvey();
+			this._showSuccessNotification();
+		}
+
+		_handleDismiss() {
+			if (this.surveyOptions.onDismiss) {
+				this.surveyOptions.onDismiss();
+			}
+			this.sdk.eventBus.emit('survey:dismissed', { widget: this });
+			this._closeSurvey();
+		}
+
+		_showError(message) {
+			// Simple error display - could be enhanced
+			const existing = this.surveyElement.querySelector('.feedback-survey-error');
+			if (existing) existing.remove();
+
+			const error = document.createElement('div');
+			error.className = 'feedback-survey-error';
+			error.style.cssText = 'color: #ef4444; font-size: 13px; margin-top: 8px; text-align: center;';
+			error.textContent = message;
+
+			const submitBtn = this.surveyElement.querySelector('.feedback-survey-submit');
+			submitBtn.parentNode.insertBefore(error, submitBtn);
+
+			setTimeout(() => error.remove(), 3000);
+		}
+
+		_showSuccessNotification() {
+			const notification = document.createElement('div');
+			notification.className = 'feedback-survey-success';
+			notification.style.cssText = `
+			position: fixed;
+			top: 24px;
+			right: 24px;
+			background: #10b981;
+			color: white;
+			padding: 16px 24px;
+			border-radius: 12px;
+			font-size: 14px;
+			font-weight: 500;
+			z-index: 10001;
+			box-shadow: 0 10px 40px rgba(0,0,0,0.2);
+			font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+		`;
+			notification.innerHTML = `
+			<div style="display: flex; align-items: center; gap: 8px;">
+				<span style="font-size: 18px;">✓</span>
+				<span>Thank you for your feedback!</span>
+			</div>
+		`;
+			document.body.appendChild(notification);
+
+			setTimeout(() => {
+				notification.style.opacity = '0';
+				notification.style.transition = 'opacity 0.3s ease';
+				setTimeout(() => notification.remove(), 300);
+			}, 3000);
+		}
+
+		_closeSurvey() {
+			if (this._escapeHandler) {
+				document.removeEventListener('keydown', this._escapeHandler);
+				this._escapeHandler = null;
+			}
+
+			// Capture references to avoid race conditions with setTimeout
+			const surveyEl = this.surveyElement;
+			const backdropEl = this.backdropElement;
+
+			if (surveyEl) {
+				surveyEl.style.opacity = '0';
+				surveyEl.style.transform = this.surveyOptions.position === 'center'
+					? 'translate(-50%, -50%) scale(0.95)'
+					: 'translateY(20px)';
+				setTimeout(() => {
+					if (surveyEl && surveyEl.parentNode) {
+						surveyEl.parentNode.removeChild(surveyEl);
+					}
+				}, 300);
+				this.surveyElement = null;
+			}
+
+			if (backdropEl) {
+				backdropEl.style.opacity = '0';
+				setTimeout(() => {
+					if (backdropEl && backdropEl.parentNode) {
+						backdropEl.parentNode.removeChild(backdropEl);
+					}
+				}, 300);
+				this.backdropElement = null;
+			}
+
+			this.surveyState = {
+				score: null,
+				feedback: '',
+				customAnswers: {},
+				isVisible: false,
+			};
+		}
+
+		destroy() {
+			this._closeSurvey();
+			super.destroy();
+		}
+	}
+
 	class TabWidget extends BaseWidget {
 		constructor(options) {
 			super({ ...options, type: 'tab' });
@@ -1227,6 +1839,7 @@
 			['button', ButtonWidget],
 			['tab', TabWidget],
 			['inline', InlineWidget],
+			['survey', SurveyWidget],
 		]);
 
 		static register(type, WidgetClass) {
@@ -1293,6 +1906,8 @@
 				apiUrl: this.config.apiUrl,
 				workspace: this.config.workspace,
 				userContext: this.config.userContext,
+				mock: this.config.mock,
+				env: this.config.env,
 			});
 
 			this._bindMethods();
@@ -1306,8 +1921,9 @@
 			try {
 				const initData = await this.apiService.init(this.config.userContext);
 
+				// Merge backend config as base, local config overrides
 				if (initData.config) {
-					this.config = deepMerge(this.config, initData.config);
+					this.config = deepMerge(initData.config, this.config);
 				}
 
 				this.initialized = true;
@@ -1356,6 +1972,44 @@
 			return this.widgets.get(id);
 		}
 
+		/**
+		 * Show a survey widget
+		 * @param {Object} options - Survey options
+		 * @param {string} options.surveyType - Type of survey: 'nps', 'csat', 'ces', 'custom'
+		 * @param {string} options.position - Position: 'bottom-right', 'bottom-left', 'center', 'bottom'
+		 * @param {string} options.theme - Theme: 'light', 'dark'
+		 * @param {string} options.title - Custom title
+		 * @param {string} options.description - Custom description
+		 * @param {string} options.lowLabel - Low end label
+		 * @param {string} options.highLabel - High end label
+		 * @param {Function} options.onSubmit - Callback when survey is submitted
+		 * @param {Function} options.onDismiss - Callback when survey is dismissed
+		 * @returns {SurveyWidget} The survey widget instance
+		 */
+		showSurvey(options = {}) {
+			if (!this.initialized) {
+				throw new SDKError('SDK must be initialized before showing surveys. Call init() first.');
+			}
+
+			const surveyWidget = this.createWidget('survey', {
+				surveyType: options.surveyType || options.type || 'nps',
+				position: options.position || 'bottom-right',
+				theme: options.theme || this.config.theme || 'light',
+				title: options.title,
+				description: options.description,
+				lowLabel: options.lowLabel,
+				highLabel: options.highLabel,
+				customQuestions: options.customQuestions,
+				onSubmit: options.onSubmit,
+				onDismiss: options.onDismiss,
+			});
+
+			surveyWidget.mount();
+			surveyWidget.show();
+
+			return surveyWidget;
+		}
+
 		getAllWidgets() {
 			return Array.from(this.widgets.values());
 		}
@@ -1454,6 +2108,8 @@
 				boardId: 'general',
 				autoShow: true,
 				debug: false,
+				mock: false,
+				env: 'production', // 'production' or 'staging'
 			};
 
 			const mergedConfig = deepMerge(deepMerge(defaultConfig, existingConfig), newConfig);
@@ -1566,6 +2222,24 @@
   left: 20px;
 }
 
+.feedback-widget-button.position-bottom-center {
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.feedback-widget-button.position-top-center {
+  top: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.feedback-widget-button.position-center {
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
 /* Circular button design with white bg and blue border */
 .feedback-trigger-btn {
   width: 56px;
@@ -1609,6 +2283,99 @@
   color: #ffffff;
 }
 
+/* Loading Modal */
+.feedback-loading-modal {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%) scale(0.9);
+  z-index: 1000001;
+  opacity: 0;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.feedback-loading-modal.show {
+  opacity: 1;
+  transform: translate(-50%, -50%) scale(1);
+}
+
+.feedback-loading-spinner {
+  width: 48px;
+  height: 48px;
+  border: 4px solid rgba(255, 255, 255, 0.3);
+  border-top-color: #155EEF;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+.theme-dark .feedback-loading-spinner {
+  border-color: rgba(255, 255, 255, 0.2);
+  border-top-color: #155EEF;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+/* Modal Styles (centered) */
+.feedback-modal {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%) scale(0.9);
+  width: 480px;
+  max-width: 90vw;
+  max-height: 85vh;
+  z-index: 1000000;
+  opacity: 0;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  font-family: inherit;
+}
+
+.feedback-modal.open {
+  opacity: 1;
+  transform: translate(-50%, -50%) scale(1);
+}
+
+.feedback-modal .feedback-panel-content {
+  max-height: 85vh;
+  overflow-y: auto;
+}
+
+/* Size variants */
+.feedback-modal.size-small {
+  width: 360px;
+}
+
+.feedback-modal.size-medium {
+  width: 480px;
+}
+
+.feedback-modal.size-large {
+  width: 600px;
+}
+
+.feedback-panel.size-small {
+  width: 320px;
+}
+
+.feedback-panel.size-medium {
+  width: 420px;
+}
+
+.feedback-panel.size-large {
+  width: 520px;
+}
+
+/* Adjust textarea height for sizes */
+.size-small .feedback-form-group textarea {
+  min-height: 120px;
+}
+
+.size-large .feedback-form-group textarea {
+  min-height: 280px;
+}
+
 /* Side Panel Styles */
 .feedback-panel {
   position: fixed;
@@ -1632,7 +2399,7 @@
   left: 0;
   right: 0;
   bottom: 0;
-  background: rgba(0, 0, 0, 0.1);
+  background: rgba(0, 0, 0, 0.5);
   opacity: 0;
   transition: opacity 0.3s ease;
   pointer-events: none;
@@ -1645,43 +2412,31 @@
 }
 
 .feedback-panel-content {
-  background: white;
+  background: var(--bg-color, #ffffff);
+  color: var(--text-color, #1F2937);
   height: 100%;
   display: flex;
   flex-direction: column;
   border-radius: 16px;
-  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
               0 10px 10px -5px rgba(0, 0, 0, 0.04),
               0 0 0 1px rgba(0, 0, 0, 0.05);
 }
 
-.feedback-panel.theme-dark .feedback-panel-content {
-  background: #1F2937;
-  color: white;
-}
-
 .feedback-panel-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 24px;
-  border-bottom: 1px solid #E5E7EB;
+  padding: 16px 20px;
+  border-bottom: 1px solid rgba(128, 128, 128, 0.2);
   flex-shrink: 0;
 }
 
-.feedback-panel.theme-dark .feedback-panel-header {
-  border-bottom-color: #374151;
-}
-
 .feedback-panel-header h3 {
   margin: 0;
   font-size: 18px;
   font-weight: 600;
-  color: #111827;
-}
-
-.feedback-panel.theme-dark .feedback-panel-header h3 {
-  color: white;
+  color: var(--text-color, #111827);
 }
 
 .feedback-panel-close {
@@ -1689,7 +2444,8 @@
   border: none;
   font-size: 24px;
   cursor: pointer;
-  color: #6B7280;
+  color: var(--text-color, #6B7280);
+  opacity: 0.6;
   padding: 4px;
   width: 32px;
   height: 32px;
@@ -1701,28 +2457,19 @@
 }
 
 .feedback-panel-close:hover {
-  background: #F3F4F6;
-  color: #111827;
+  opacity: 1;
+  background: rgba(128, 128, 128, 0.1);
 }
 
 .feedback-panel-close:focus-visible {
-  outline: 2px solid #155EEF;
+  outline: 2px solid var(--primary-color, #155EEF);
   outline-offset: 2px;
 }
 
-.feedback-panel.theme-dark .feedback-panel-close {
-  color: #9CA3AF;
-}
-
-.feedback-panel.theme-dark .feedback-panel-close:hover {
-  background: #374151;
-  color: white;
-}
-
 .feedback-panel-body {
   flex: 1;
   overflow-y: auto;
-  padding: 24px;
+  padding: 16px 20px;
 }
 
 .feedback-form {
@@ -1746,23 +2493,21 @@
   font-size: 14px;
   font-weight: 500;
   line-height: 1.25;
-  color: #374151;
-}
-
-.feedback-panel.theme-dark .feedback-form-group label {
-  color: #D1D5DB;
+  color: var(--text-color, #374151);
+  opacity: 0.8;
 }
 
 .feedback-form-group input {
   height: 44px;
   width: 100%;
   border-radius: 8px;
-  border: 1px solid #D1D5DB;
+  border: 1px solid rgba(128, 128, 128, 0.3);
+  background: rgba(128, 128, 128, 0.05);
   padding: 10px 14px;
   font-size: 15px;
   font-weight: 400;
   line-height: 1.5;
-  color: #1F2937;
+  color: var(--text-color, #1F2937);
   font-family: inherit;
   outline: none;
   transition: all 0.2s ease;
@@ -1770,11 +2515,12 @@
 
 .feedback-form-group input::placeholder {
   font-size: 15px;
-  color: #9CA3AF;
+  color: var(--text-color, #9CA3AF);
+  opacity: 0.5;
 }
 
 .feedback-form-group input:focus {
-  border-color: #155EEF;
+  border-color: var(--primary-color, #155EEF);
   box-shadow: 0 0 0 3px rgba(21, 94, 239, 0.1);
 }
 
@@ -1787,12 +2533,13 @@
   width: 100%;
   resize: vertical;
   border-radius: 8px;
-  border: 1px solid #D1D5DB;
+  border: 1px solid rgba(128, 128, 128, 0.3);
+  background: rgba(128, 128, 128, 0.05);
   padding: 10px 14px;
   font-size: 15px;
   font-weight: 400;
   line-height: 1.5;
-  color: #1F2937;
+  color: var(--text-color, #1F2937);
   font-family: inherit;
   outline: none;
   transition: all 0.2s ease;
@@ -1800,11 +2547,12 @@
 
 .feedback-form-group textarea::placeholder {
   font-size: 15px;
-  color: #9CA3AF;
+  color: var(--text-color, #9CA3AF);
+  opacity: 0.5;
 }
 
 .feedback-form-group textarea:focus {
-  border-color: #155EEF;
+  border-color: var(--primary-color, #155EEF);
   box-shadow: 0 0 0 3px rgba(21, 94, 239, 0.1);
 }
 
@@ -1812,18 +2560,6 @@
   outline: none;
 }
 
-.feedback-panel.theme-dark .feedback-form-group input,
-.feedback-panel.theme-dark .feedback-form-group textarea {
-  background: #374151;
-  border-color: #4B5563;
-  color: white;
-}
-
-.feedback-panel.theme-dark .feedback-form-group input::placeholder,
-.feedback-panel.theme-dark .feedback-form-group textarea::placeholder {
-  color: #6B7280;
-}
-
 .feedback-btn {
   position: relative;
   display: inline-flex;
@@ -1852,38 +2588,29 @@
 }
 
 .feedback-btn-submit {
-  background: #155EEF;
+  background: var(--primary-color, #155EEF);
   color: white;
   width: 100%;
 }
 
 .feedback-btn-submit:hover:not(:disabled) {
-  background: #1A56DB;
+  background: var(--primary-color, #155EEF);
+  filter: brightness(0.9);
 }
 
 .feedback-btn-submit:active:not(:disabled) {
-  background: #1E429F;
+  background: var(--primary-color, #155EEF);
+  filter: brightness(0.8);
 }
 
 .feedback-btn-cancel {
   background: transparent;
-  color: #6B7280;
-  border: 1px solid #D1D5DB;
+  color: var(--text-color, #6B7280);
+  border: 1px solid rgba(128, 128, 128, 0.3);
 }
 
 .feedback-btn-cancel:hover:not(:disabled) {
-  background: #F9FAFB;
-  border-color: #9CA3AF;
-  color: #374151;
-}
-
-.feedback-panel.theme-dark .feedback-btn-cancel {
-  color: #D1D5DB;
-  border-color: #4B5563;
-}
-
-.feedback-panel.theme-dark .feedback-btn-cancel:hover:not(:disabled) {
-  background: #374151;
+  background: rgba(128, 128, 128, 0.1);
 }
 
 .feedback-form-actions {
@@ -2090,6 +2817,70 @@
     display: none !important;
   }
 }
+
+/* Survey Widget Styles */
+.feedback-survey-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 9999;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.feedback-survey-backdrop.show {
+  opacity: 1;
+}
+
+.feedback-survey {
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+.feedback-survey-csat-btn:hover {
+  transform: scale(1.1) !important;
+}
+
+.feedback-survey-nps-btn:hover,
+.feedback-survey-ces-btn:hover,
+.feedback-survey-freq-btn:hover {
+  border-color: #007aff !important;
+}
+
+@media (max-width: 768px) {
+  .feedback-survey {
+    left: 16px !important;
+    right: 16px !important;
+    max-width: none !important;
+    min-width: auto !important;
+  }
+
+  .feedback-survey.feedback-survey-center {
+    width: calc(100% - 32px) !important;
+  }
+
+  .feedback-survey-nps {
+    flex-wrap: wrap;
+    justify-content: center !important;
+  }
+
+  .feedback-survey-nps-btn {
+    width: 32px !important;
+    height: 32px !important;
+    font-size: 11px !important;
+  }
+
+  .feedback-survey-ces {
+    flex-direction: column !important;
+  }
+
+  .feedback-survey-ces-btn {
+    flex: none !important;
+    width: 100% !important;
+  }
+}
 `;
 
 	function injectStyles() {
@@ -2167,6 +2958,7 @@
 		ButtonWidget,
 		TabWidget,
 		InlineWidget,
+		SurveyWidget,
 		WidgetFactory,
 		EventBus,
 		APIService,
@@ -2250,6 +3042,7 @@
 	exports.FeedbackSDK = FeedbackSDK;
 	exports.InlineWidget = InlineWidget;
 	exports.SDKError = SDKError;
+	exports.SurveyWidget = SurveyWidget;
 	exports.TabWidget = TabWidget;
 	exports.ValidationError = ValidationError;
 	exports.WidgetError = WidgetError;