Business Context
Protecht is an insurtech company that provides embedded insurance products — allowing e-commerce sites to offer product protection at checkout. Their existing widget system was built as a monolithic React application that partners had to integrate via an iframe. This caused problems: the iframe added 800ms+ to checkout page load times, styling couldn't match the host site, and each new partner required custom integration work. Partners were churning because the widget felt like a foreign element in their checkout flow.
Technical Challenge
Build a framework-agnostic widget system that could be embedded natively into any e-commerce platform — React, Vue, Shopify, WooCommerce, and vanilla HTML sites — without iframes. The widgets needed to look and feel like part of the host site, load in under 200ms, and support different insurance products per partner. I led a team of 8 developers and also managed the migration from a datacenter to AWS.
Approach & Decisions
I architected the widgets as Web Components using Lit, with a thin adapter layer for each target framework. The Web Component encapsulated the insurance logic and UI, while the adapter handled framework-specific lifecycle integration (React refs, Vue directives, Shopify liquid tags). Each widget fetched its configuration from a DynamoDB-backed API (via Lambda), which defined which insurance products to show, pricing rules, and visual customization tokens. For styling, I implemented a CSS custom properties API: partners could theme the widget by setting CSS variables on the host page, and the Web Component inherited them through the shadow DOM boundary using ::part selectors. The datacenter-to-AWS migration ran in parallel — I set up Lambda functions behind API Gateway for the widget configuration API, with DynamoDB for partner configs and product catalogs.
Outcomes
Widget load time dropped 60% (from 800ms to under 200ms), partner integrations increased 12%, and deployment frequency improved by 40%. The CSS theming system eliminated the need for custom integration work — new partners could self-serve their integration using documentation and a live preview tool.
System Design
Key Technical Decisions
Widget Technology
Web Components via Lit with framework adapters
React with framework wrappers, Preact for size, Svelte compiled components
Web Components provided true framework agnosticism — the widget ran natively in any environment without requiring the host to load React or any other framework. Lit added a thin reactive layer (~5KB) while keeping the bundle minimal. Framework adapters were thin wrappers (~1KB each) that handled lifecycle integration.
Styling Integration
CSS Custom Properties with ::part selectors
Tailwind with JIT, Styled-components with theme prop, Inline styles API
CSS Custom Properties cross the shadow DOM boundary naturally, allowing partners to theme widgets using standard CSS without learning a custom API. ::part selectors gave additional control over specific widget sections. This was the only approach that worked consistently across all target frameworks.
Backend Architecture
Serverless (Lambda + API Gateway + DynamoDB)
Containerized Node.js on ECS, Existing datacenter infrastructure
Widget configuration requests are bursty (spikes during partner checkout hours) with unpredictable volume per partner. Serverless eliminated the need to provision for peak load and reduced costs by 70% compared to the always-on datacenter infrastructure.
Before & After
Widget Load Performance
iframe-based widget adding 800ms+ to checkout page load, loading a full React runtime.
Web Component loading in under 200ms with a 12KB bundle (Lit + insurance logic), no framework dependency on the host.
Partner Integration Time
2-3 weeks of custom integration work per partner, requiring dedicated engineering support.
Self-service integration in under 1 day using documented Web Component tags and CSS theming.
Want results like these
for your product?
Let's collaborate to build fast, accessible, and high-converting digital experiences that drive real business impact.
Let's Talk
Currently available for select consulting engagements and full-time roles.