Widget Embed Guide

Add LegalCals calculators to any website with a single script tag.

Quick Start

Paste this script into your page, then add a div wherever you want a calculator to appear.

<script src="https://legalcals.com/embed.js"></script>

<div
  data-legalcals-calculator="security-deposit"
  data-state="ca"
></div>

Configuration Options

Attribute	Required	Description
data-legalcals-calculator	Yes	Calculator slug, e.g. security-deposit
data-state	Yes (US)	Two-letter state code, e.g. ca
data-country	No	Country code: us or ca (default: us)
data-province	Yes (CA)	Province code for Canadian provinces (e.g. bc)
data-city	No	City slug for city-level overrides
data-theme	No	light or dark (default: light)
data-lang	No	Language code (default: en)
data-autosize	No	Auto-resize iframe (default: true)

Example Integrations

React

useEffect(() => {
  const script = document.createElement('script');
  script.src = 'https://legalcals.com/embed.js';
  script.async = true;
  document.body.appendChild(script);
  return () => document.body.removeChild(script);
}, []);

// In JSX (US):
<div data-legalcals-calculator="security-deposit" data-state="ca" />

// In JSX (Canada):
<div data-legalcals-calculator="bc-security-deposit" data-country="ca" data-province="bc" />

Vue

<template>
  <!-- US -->
  <div data-legalcals-calculator="security-deposit" data-state="ca" />

  <!-- Canada (BC) -->
  <div
    data-legalcals-calculator="bc-security-deposit"
    data-country="ca"
    data-province="bc"
  ></div>
</template>

<script setup>
import { onMounted } from 'vue';

onMounted(() => {
  const script = document.createElement('script');
  script.src = 'https://legalcals.com/embed.js';
  document.head.appendChild(script);
});
</script>

WordPress

<!-- Paste into Custom HTML block -->
<script src="https://legalcals.com/embed.js"></script>
<div data-legalcals-calculator="bc-security-deposit" data-country="ca" data-province="bc"></div>

Webflow

1. Add an Embed element to your page.
2. Paste the script + div code.
3. Publish your site.

Wix

1. Add an HTML iframe element.
2. Switch to "Code" mode.
3. Paste the script + div code.

Security & Isolation

Widgets run inside a Shadow DOM for style isolation.
The calculator is rendered in a sandboxed iframe.
No access to parent DOM or cookies.
Only API calls to LegalCals are permitted.
Resize events are sent via postMessage with origin validation.