Embeddable Property Visualization Widgets

Transform your contractor website with AI-powered visualization tools. Engage customers, generate leads, and showcase your expertise with interactive ADU and pool design widgets.

🚀 Get Started Free Live Demo

Choose Your Widget Type

Three powerful widgets designed for contractor success. Each optimized for specific business goals.

📧 Lead Capture Widget

Customizable contact forms that convert website visitors into qualified leads. Instant notifications and CRM integration.

Perfect for: All contractors
Learn More →

🛠️ Service Catalog Widget

Display your services beautifully and enable direct online booking. 24/7 appointment scheduling with smart availability.

Perfect for: Service businesses
Learn More →

🏡 3D Project Visualizer

AI-powered visualization tool for ADUs, pools, and renovations. Let customers see before they buy with 3D designs on their photos.

Perfect for: Project-based contractors
Learn More →

Why Choose ServiceFlow Pro Widgets?

Our embeddable widgets bring the power of AI-driven property visualization directly to your website. Increase engagement, capture more leads, and provide an interactive experience that sets you apart from the competition.

🎨 Custom Branding

Match your brand colors, fonts, and logo. Fully customizable to seamlessly integrate with your website design.

📱 Responsive Design

Works perfectly on desktop, tablet, and mobile devices. Optimized for all screen sizes and touch interactions.

🚀 Easy Integration

Simple embed code, WordPress plugin, or JavaScript SDK. Get up and running in minutes, not hours.

🎯 Lead Generation

Built-in lead capture forms, quote requests, and contact integration. Turn visitors into customers.

📊 Analytics & Insights

Track user engagement, popular designs, and conversion rates. Optimize your website performance.

🔧 No Maintenance

We handle updates, security, and performance. Focus on your business while we maintain the technology.

Live Widget Demo

Interactive ADU & Pool Visualizer

Upload a photo of your backyard and see how an ADU or pool would look!

This is a preview - actual widget includes full 3D visualization

Integration Options

Simple HTML Embed

The easiest way to add a widget to any website. Just copy and paste this code:

HTML 
<!-- ServiceFlow Pro Visualizer Widget -->
<div id="serviceflow-widget"></div>
<script src="https://widgets.serviceflow-pro.com/sdk/v1/widget.js"></script>
<script>
  ServiceFlowWidget.create('serviceflow-widget', {
    widgetId: 'your-widget-id',
    apiKey: 'your-api-key',
    features: {
      enableADU: true,
      enablePool: true,
      enablePricing: true
    },
    branding: {
      primaryColor: '#52c41a',
      secondaryColor: '#1890ff'
    }
  });
</script>

WordPress Plugin

Install our WordPress plugin for the easiest integration with your WordPress site:

Installation Steps:

  1. Download the ServiceFlow Pro Visualizer plugin
  2. Upload and activate in your WordPress admin
  3. Configure your API key in Settings → ServiceFlow Widgets
  4. Use shortcode: [serviceflow-visualizer id="your-widget-id"]
WordPress 
<!-- WordPress Shortcode -->
[serviceflow-visualizer id="your-widget-id" features="adu,pool" theme="light"]

<!-- Gutenberg Block -->
Add "ServiceFlow Visualizer" block in the block editor

JavaScript SDK

Full control with our JavaScript SDK for custom implementations:

JavaScript 
// Install via npm
npm install @serviceflow-pro/widget-sdk

// Import and initialize
import { ServiceFlowWidget } from '@serviceflow-pro/widget-sdk';

const widget = new ServiceFlowWidget({
  containerId: 'my-widget-container',
  widgetId: 'your-widget-id',
  apiKey: 'your-api-key',
  config: {
    features: {
      enableADU: true,
      enablePool: true,
      enablePricing: true,
      enableSaveLoad: true
    },
    layout: {
      width: '100%',
      height: '600px',
      responsive: true,
      theme: 'light'
    },
    branding: {
      primaryColor: '#52c41a',
      secondaryColor: '#1890ff',
      fontFamily: 'Inter, sans-serif'
    }
  }
});

// Event listeners
widget.on('designCreated', (design) => {
  console.log('New design created:', design);
});

widget.on('quoteRequested', (quote) => {
  console.log('Quote requested:', quote);
  // Handle lead capture
});

// Initialize the widget
widget.render();

React Component

Seamless integration with React applications:

React / JSX 
import React from 'react';
import { ServiceFlowVisualizerWidget } from '@serviceflow-pro/react-widgets';

function PropertyVisualizerPage() {
  const handleQuoteRequest = (quoteData) => {
    // Handle lead capture
    console.log('Quote requested:', quoteData);
  };

  const handleDesignSaved = (design) => {
    // Handle design save
    console.log('Design saved:', design);
  };

  return (
    <div className="visualizer-container">
      <h2>Design Your Dream Space</h2>
      
      <ServiceFlowVisualizerWidget
        widgetId="your-widget-id"
        apiKey="your-api-key"
        features={{
          enableADU: true,
          enablePool: true,
          enablePricing: true
        }}
        branding={{
          primaryColor: '#52c41a',
          secondaryColor: '#1890ff'
        }}
        onQuoteRequest={handleQuoteRequest}
        onDesignSaved={handleDesignSaved}
        style={{
          width: '100%',
          height: '600px',
          borderRadius: '8px'
        }}
      />
    </div>
  );
}

export default PropertyVisualizerPage;

💡 Implementation Examples

Choose the integration method that best fits your workflow. Each example includes complete, production-ready code.

Basic Embed (Page Load)

basic-embed.html

Load the widget immediately when page loads. Perfect for dedicated landing pages.

Button Click Trigger

button-click.html

Show widget when user clicks a button. Great for "Get Quote" or "Design Now" CTAs.

Modal Popup

modal-popup.html

Display widget in a modal overlay. Keeps users on your page while they design.

Slide-in Panel

slide-in-panel.html

Widget slides in from the side. Elegant, non-intrusive user experience.

Scroll Triggered

scroll-trigger.html

Auto-show widget when user scrolls to a specific section. Perfect for long pages.

Time Delayed Popup

time-delay.html

Show widget after a delay. Great for exit-intent or engagement triggers.

React Component

react-component.jsx

Full React integration with TypeScript support. For modern React applications.

WordPress Shortcode

wordpress.php

WordPress plugin integration. Add widgets anywhere with a simple shortcode.

🔗 Integration Options

Webhooks

Get real-time notifications for all widget events

Email Notifications

Receive lead alerts directly to your inbox

Event Tracking

Track user interactions with your analytics platform

Custom Redirects

Send users to custom pages after interactions

API Access

Full programmatic control over widget behavior

Customization Options

Visual Branding

  • Custom colors and fonts
  • Logo integration
  • Light/dark themes
  • Custom CSS support

Feature Control

  • Enable/disable ADU designs
  • Enable/disable pool designs
  • Show/hide pricing
  • Custom feature sets

Layout Options

  • Responsive sizing
  • Fixed dimensions
  • Full-screen mode
  • Embedded or popup

Integration Settings

  • Domain restrictions
  • Webhook notifications
  • Custom analytics
  • Lead capture forms

Configuration Example

JSON Configuration 
{
  "widgetId": "your-widget-id",
  "branding": {
    "logo": "https://yoursite.com/logo.png",
    "primaryColor": "#52c41a",
    "secondaryColor": "#1890ff",
    "fontFamily": "Inter, sans-serif",
    "customCSS": ".widget-header { border-radius: 12px; }"
  },
  "features": {
    "enableADU": true,
    "enablePool": true,
    "enablePricing": true,
    "enableSaveLoad": true,
    "enableAR": false,
    "showBranding": true
  },
  "layout": {
    "width": "100%",
    "height": "600px",
    "responsive": true,
    "theme": "light"
  },
  "integration": {
    "allowedOrigins": ["https://yoursite.com"],
    "webhookUrl": "https://yoursite.com/webhook/serviceflow",
    "customDomain": "visualizer.yoursite.com"
  },
  "analytics": {
    "enabled": true,
    "trackingId": "GA-XXXXXXXXX",
    "customEvents": ["design_started", "quote_requested"]
  }
}

Real-World Examples

🏗️ General Contractors

Showcase ADU capabilities on your services page. Let customers visualize additions before scheduling consultations.

View Visualizer Widget →

🏊 Pool Companies

Interactive pool designer on your homepage. Capture leads with instant visualizations and pricing estimates.

View Service Catalog →

🔧 HVAC & Plumbing

Display services with online booking. Let customers schedule maintenance, repairs, and emergency service 24/7.

View Service Catalog →

🌳 Landscaping

Capture design consultation requests with custom forms. Qualify leads with project type and budget questions.

View Lead Capture →

Getting Started

Ready to Transform Your Website?

Get your widget code and start engaging customers with interactive property visualizations.

1. Request Access

Contact our team to get your widget ID and API key.

2. Customize

Configure branding, features, and layout to match your site.

3. Integrate

Add the widget code to your website or install our plugin.

4. Generate Leads

Start capturing leads and engaging customers immediately.

Request Widget Access Schedule Demo

Pricing & Plans

Flexible pricing options to fit your business needs:

Starter Plan

$49/month

  • 1 widget configuration
  • 1,000 monthly interactions
  • Basic customization
  • Email support

Professional Plan

$149/month

  • 5 widget configurations
  • 10,000 monthly interactions
  • Full customization
  • Priority support
  • Analytics dashboard

Enterprise Plan

Custom Pricing

  • Unlimited widgets
  • Unlimited interactions
  • White-label options
  • Dedicated support
  • Custom integrations

Support & Resources

📚 Documentation

Comprehensive guides, API references, and integration tutorials.

Browse Docs →

💬 Community Support

Join our developer community for tips, tricks, and best practices.

Join Community →

🎯 Professional Services

Custom development and integration services available.

Contact Sales →

Code Example

Copy this code