Mockfjards Service - Widget Demo

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>
                        