v1.0.0

Mockfjards Service SDK

AI-powered window advisor widgets. Embed photo analysis, product recommendations, configurators, and visualization into any website.

Photo Analyzer Configurator Visualizer Products Quiz Chat PDF Generator Lead Capture

Quick Start

<!-- 1. Add container -->
<div id="mf-configurator"></div>

<!-- 2. Load SDK -->
<script src="https://ai-demo-portal.3kit.com/projects/mockfjards-service/mockfjards-service.js"></script>

<!-- 3. Initialize -->
<script>
  MockfjardsService.init({
    apiEndpoint: 'https://ai-demo-portal.3kit.com',
    language: 'sv'
  });
</script>

Photo Analyzer Threekit AI Vision

Upload a building photo to detect window count, building type, style, and get AI recommendations. Results are stored in shared state for other widgets.

Live Preview
Embed Code
<div id="mf-photo-analyzer"></div> <script> MockfjardsService.init({ apiEndpoint: 'https://your-api.com', onPhotoAnalyzed: function(analysis) { // analysis.buildingType, windowCount, etc. console.log(analysis); } }); </script>
Tip: Photo analysis results are automatically shared with the Configurator and Visualizer widgets.

Window Configurator Interactive

Full window configurator with product selection, colors from real product data, muntins, glazing, and dimensions. Includes photo upload if no photo available.

Live Preview
Basic Embed
<!-- Set default product with data attribute --> <div id="mf-configurator" data-product="ultimat"></div>
With Callbacks
MockfjardsService.init({ onConfigurationChange: function(config) { // config.product, exteriorColor, muntins... }, onQuoteRequest: function(config) { // Send to your CRM } });

AI Visualizer Threekit AI

Replaces windows in uploaded photos with configured products. Uses AI to maintain photorealism while applying exact color and muntin patterns.

Live Preview
Embed Code
<div id="mf-visualizer"></div> <script> MockfjardsService.init({ onVisualizationGenerated: function(data) { // data.imageUrl - base64 result image // data.config - configuration used } }); </script>
Tip: The visualizer uses the photo from Photo Analyzer and configuration from Configurator automatically via shared state.

Product Catalog Data-Driven

Display all window product families from products.json. Clicking a product opens the configurator with that product selected.

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

AI Chat Assistant Threekit AI

Floating or embedded chat widget. Answers questions about windows, helps with product selection, and has context of current configuration.

Embedded Mode
Embed Code
<!-- Floating mode (no container needed) --> MockfjardsService.init({ widgets: ['chat'] }); <!-- Embedded mode --> <div id="mf-chat-widget"></div>
Floating: Chat appears as a button in the bottom-right corner. Click the blue chat bubble below to try it.

Lead Capture & PDF Generator

Capture leads when users request quotes or download PDFs. Session tracking runs automatically in background.

Demo

Click to open lead capture modals:

Usage
// Show quote modal const leadCapture = MockfjardsService.getWidget('lead-capture'); leadCapture.showQuoteModal(function(data) { // data.name, email, phone, message }); // Generate PDF const pdfGen = MockfjardsService.getWidget('pdf-generator'); pdfGen.generatePdf();

API Reference

Core methods and shared state for integrating widgets into your application.

MockfjardsService Methods

Method Description
init(options) Initialize the service with configuration options
getWidget(name) Get a widget instance by name (e.g., 'configurator', 'visualizer')
setLanguage(lang) Switch language ('sv' or 'en')
getState(key) Get shared state value (e.g., 'uploadedPhoto', 'photoAnalysis', 'configuration')
setState(key, value) Set shared state value
on(event, callback) Listen to events ('widgetReady', 'stateChange', 'languageChange')
getProducts() Get loaded products data
getColorPalette() Get color palette from products

Initialization Options

Option Type Description
apiEndpoint string Base URL for API calls (required for AI features)
language 'sv' | 'en' Default language (default: 'sv')
widgets string[] Widgets to initialize (e.g., ['chat', 'configurator'])
onPhotoAnalyzed function Callback when photo is analyzed
onConfigurationChange function Callback when configuration changes
onQuoteRequest function Callback when user requests a quote
onVisualizationGenerated function Callback when AI visualization completes

Shared State Keys

Key Description
uploadedPhoto Base64 string of uploaded building photo
photoAnalysis AI analysis result (buildingType, windowCount, style, etc.)
configuration Current window configuration from configurator
userPreferences User preferences from quiz/preferences widget
visualization Base64 string of AI-generated visualization
recommendation AI product recommendation