Shadow DOM Partner Web Widget (`widget.js`)

The HiTech Insurance Partner Web Widget is a lightweight, zero-dependency, embeddable JavaScript client designed for automotive dealerships, freight brokers, commercial equipment lenders, and affiliate partners. Hosted as a static asset at /widget.js, it delivers high-conversion insurance quote lead funnels directly on third-party host websites while guaranteeing 100% CSS style encapsulation and host protection via the Web Components Shadow DOM API.

1. Architectural Tenets & Style Encapsulation

External partner websites run widely diverse styling environments—from legacy Bootstrap 3 to Tailwind CSS, heavy WordPress themes, and aggressive global CSS resets (* { box-sizing: content-box; margin: 0; }). Standard inline snippets frequently suffer from font clobbering, unexpected line-height collapses, or broken button dimensions.

To eliminate integration friction:

Open Shadow DOM Root: The widget invokes element.attachShadow({ mode: "open" }). All typography, CSS variables, keyframe animations, and flexbox layouts are isolated within the Shadow Root. Host styles cannot penetrate inward, and widget styles cannot leak outward.
Zero Dependencies: Pure vanilla ES5/ES6 JavaScript. No external libraries (React, jQuery, Lodash) are required.
Dynamic Script Origin Detection: The widget automatically detects the host origin from document.currentScript.src. If loaded from a staging domain, CDN, or production (https://hitechinsurance.ai), all internal asset URLs (such as /widget-mark.png) resolve correctly without hardcoding.
Idempotent Single Execution: Guarded by window.__HITECH_WIDGET_LOADED__ to prevent duplicate initialization when scripts are included across multiple template partials.

2. Integration Modes

Partners can deploy the widget through three supported methods:

Method A: Target Container (Recommended)

Place a target <div> in the desired page layout and include the script at the bottom of the page or in the site <head>:

<!-- Partner Page HTML -->
<div 
  id="hitech-insurance-widget" 
  data-theme="dark" 
  data-variant="card" 
  data-utm="dealer_valley_ford" 
  data-cta="Get Auto Quote" 
  data-tagline="Special Commercial & Personal Vehicle Coverage">
</div>

<script src="https://hitechinsurance.ai/widget.js" async></script>

The script queries the document for any matching selector:

#hitech-insurance-widget
[data-hitech-widget]
.hitech-widget

Method B: Zero-Config Auto-Insertion

If no target container exists, the widget automatically creates an inline wrapper and inserts itself immediately preceding the <script> tag:

<script 
  src="https://hitechinsurance.ai/widget.js" 
  data-theme="light" 
  data-variant="pill" 
  data-utm="freight_loadboard_banner"
  async>
</script>

Method C: Floating Docked Badge

To display a persistent, non-intrusive floating badge docked in the bottom-right corner of the host site:

<script 
  src="https://hitechinsurance.ai/widget.js" 
  data-floating="true" 
  data-theme="dark" 
  data-utm="logistics_portal_floating"
  async>
</script>

When data-floating="true" is configured, the widget mounts a fixed container (position: fixed; bottom: 24px; right: 24px; z-index: 999999;) with an entrance slide-up animation (cubic-bezier(0.16, 1, 0.3, 1)).

3. Configuration Attributes Reference

All attributes are read directly from either the target container element or the script tag:

HTML Attribute	Accepted Values	Default	Functional Description
`data-theme`	`dark` \| `light`	`dark`	Visual theme palette. `dark` applies a deep slate gradient (`#0b1120` to `#0f172a`), while `light` applies a clean snow gradient (`#ffffff` to `#f8fafc`).
`data-variant`	`card` \| `pill` \| `floating`	`card`	Layout presentation. `card` renders a full feature block with branding and tagline; `pill` renders a rounded badge; `floating` docks at the screen corner.
`data-utm`	`string` (alphanumeric, dashes, underscores)	`partner_widget`	UTM source tracking key. Passed into query params for partner lead attribution and commission tracking.
`data-cta`	`string`	`Get Free Quote`	Text displayed within the interactive gradient action button.
`data-tagline`	`string`	`Smart Coverage for Every Need • Auto, Commercial & Life`	Explanatory subheadline displayed beneath the verified branding header.
`data-floating`	`true` \| `false`	`false`	When enabled on script tag, injects the fixed bottom-right floating badge.

4. UI Components & Visual Layout

The widget renders a structured card inside the Shadow Root:

+---------------------------------------------------------------------------------------+
|  [Logo]  HiTech Insurance [Verified Badge]                   [ Get Free Quote -> ]    |
|          Smart Coverage for Every Need • Auto, Commercial & Life                      |
+---------------------------------------------------------------------------------------+

Layout Specifications

Brand Group: Displays the official HiTech shield icon (/widget-mark.png, 24x24 px) in a rounded container with 1px border.
Title Row: Bold brand header (HiTech Insurance, font size 14px, weight 700) flanked by a pill-shaped Verified badge (#ff763c orange with translucent backdrop).
Tagline: Truncated responsive subline (font-size: 11px, #94a3b8 in dark, #64748b in light).
Action Button: Eye-catching call-to-action button featuring HiTech's signature orange gradient (linear-gradient(135deg, #ff763c 0%, #ff5722 100%)), elevation shadow, and hover micro-interaction (transform: scale(1.02); translateY(-2px);).
Responsive Breakpoint: At screen widths below 580px, the flex layout shifts to vertical stacking (flex-direction: column; align-items: flex-start;), expanding the CTA button to full width (100%) for mobile tap ergonomics.

5. Single Page Application (SPA) Programmatic API

Modern frontend applications built with React, Vue, Angular, or Svelte dynamically render DOM nodes after the initial DOMContentLoaded event. To support dynamic initialization:

// Exposes the global HiTechWidget namespace
window.HiTechWidget = {
  init: function() { /* re-scans DOM and renders uninitialized targets */ },
  version: "1.0.0"
};

React / Next.js Integration Hook

import { useEffect } from 'react';

export function PartnerInsuranceCard({ partnerId }: { partnerId: string }) {
  useEffect(() => {
    // Dynamically inject script if not present
    if (!document.querySelector('script[src*="widget.js"]')) {
      const script = document.createElement('script');
      script.src = 'https://hitechinsurance.ai/widget.js';
      script.async = true;
      document.body.appendChild(script);
    } else if (window.HiTechWidget) {
      window.HiTechWidget.init();
    }
  }, []);

  return (
    <div
      className="hitech-widget"
      data-theme="dark"
      data-variant="card"
      data-utm={partnerId}
      data-cta="Compare Commercial Rates"
    />
  );
}

6. Target URL & Referral Attribution

When clicked, the widget opens a new browser tab (target="_blank" rel="noopener noreferrer") targeting:

https://hitechinsurance.ai/?utm_source={data-utm}&utm_medium=embed_widget&utm_campaign=partner_referral

This ensures that the visitor's initial session logs the UTM source in MongoDB telemetry (VisitorJourney and PartnerReferral), linking any subsequent quote completion or policy purchase back to the partner's account.

1. Architectural Tenets & Style Encapsulation​

2. Integration Modes​

Method A: Target Container (Recommended)​

Method B: Zero-Config Auto-Insertion​

Method C: Floating Docked Badge​

3. Configuration Attributes Reference​

4. UI Components & Visual Layout​

Layout Specifications​

5. Single Page Application (SPA) Programmatic API​

React / Next.js Integration Hook​

6. Target URL & Referral Attribution​