Mockfjards Service

Embeddable AI-powered window advisor widgets. Each component can be used independently or together on any website.

Production URL: https://ai-demo-portal.3kit.com/projects/mockfjards-service/mockfjards-service.js

Photo Analyzer Widget

AI-powered building analysis. Upload a photo to detect building type, window count, and get recommendations.

Live Preview

Embed Code

<!-- Add container where you want the widget --> <div id="mf-photo-analyzer"></div> <!-- Load the service script --> <script src="mockfjards-service.js"></script> <script> MockfjardsService.init({ language: 'sv', onPhotoAnalyzed: function(analysis) { console.log('Photo analyzed:', analysis); } }); </script>

Quiz Widget

Multi-step window recommendation quiz that helps customers find the perfect windows for their needs.

Live Preview

Embed Code

<div id="mf-quiz-widget"></div> <script src="mockfjards-service.js"></script> <script> MockfjardsService.init({ language: 'sv', onConfigurationComplete: function(data) { console.log('Recommendation:', data.recommendation); } }); </script>

Configurator Widget

Interactive window configurator with real-time SVG preview and visualization on uploaded photos.

Live Preview

Embed Code

<!-- Specify default product with data attribute --> <div id="mf-configurator" data-product="ultimat"></div> <script src="mockfjards-service.js"></script> <script> MockfjardsService.init({ language: 'sv', onQuoteRequest: function(config) { // Handle quote request - send to your CRM, etc. console.log('Quote requested:', config); }, onVisualizationGenerated: function(data) { console.log('Visualization ready:', data.imageUrl); } }); </script>

Visualizer Widget

AI-powered photo editing that applies window configurations to building photos using GPT-Image-1.5.

Live Preview

Embed Code

<div id="mf-visualizer"></div> <script src="mockfjards-service.js"></script> <script> MockfjardsService.init({ language: 'sv', onVisualizationGenerated: function(data) { console.log('Visualization ready:', data.imageUrl); } }); </script>

Tip: The visualizer automatically uses photo and configuration from other widgets via shared state.

Products Widget

Product catalog with filtering by category. Click to configure.

Live Preview

Embed Code

<!-- Full catalog --> <div id="mf-products"></div> <!-- Single product card --> <div id="mf-product-card" data-product="ultimat"></div>

Lead Capture & Session Tracking

Modal for capturing quotes/PDF downloads. Session tracking runs automatically in background.

Lead Capture Demo

Click buttons to open lead capture modals:

Embed Code

// Show quote modal MockfjardsService.getWidget('lead-capture') .showQuoteModal(function(data) { console.log('Lead submitted:', data); }); // Session tracking is automatic // Access session data: MockfjardsService.getWidget('session-tracker') .getSessionData();

Chat Widget

AI-powered chat assistant. Can be floating (fixed position) or embedded inline.

Floating Mode (see bottom-right corner)

The chat widget is automatically added as a floating button in the bottom-right corner of the page. Click it to open the chat panel.

<!-- No container needed for floating mode --> <script src="mockfjards-service.js"></script> <script> MockfjardsService.init({ widgets: ['chat'], // Explicitly request chat language: 'sv', onChatMessage: function(data) { console.log('User asked:', data.userMessage); } }); </script>

Embedded Mode

<!-- Provide container for embedded mode --> <div id="mf-chat-widget"></div>