{"_id":"@askloullc/leadform-embed","_rev":"3-acebecedc55f315b7dc1d8e2172c710a","name":"@askloullc/leadform-embed","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.0":{"name":"@askloullc/leadform-embed","version":"1.0.0","keywords":["lead-form","embed","widget","conversion"],"author":{"name":"Ask Lou LLC"},"license":"UNLICENSED","_id":"@askloullc/leadform-embed@1.0.0","maintainers":[{"name":"sambutton","email":"sam@asklou.co"}],"homepage":"https://github.com/askloullc/leadform-embed#readme","bugs":{"url":"https://github.com/askloullc/leadform-embed/issues"},"dist":{"shasum":"2e268d8af7a1fd73cd552523eccdea7f1eae6345","tarball":"https://registry.npmjs.org/@askloullc/leadform-embed/-/leadform-embed-1.0.0.tgz","fileCount":13,"integrity":"sha512-eEoEM1pfMzPS8qYf6pyXtl/nDQsrIIPLZSftvIo/6vOvZdtLtNzDL4gjkiMOqp9MpYsYpcPARHB3cN7fHxymAQ==","signatures":[{"sig":"MEUCIQDLb4sJmUeStf3F9stRrQn5HsXZOaqGERRRB44ImznRwAIgBwUM6IsDI0biQwlXW2Qs0l4el/2qtdRgQ3GcYBfuWQA=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":312736},"main":"dist/leadform.iife.min.js","type":"module","types":"dist/index.d.ts","module":"dist/leadform.esm.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/leadform.esm.js","require":"./dist/leadform.iife.min.js"},"./react":{"types":"./dist/react.d.ts","import":"./dist/react.esm.js","require":"./dist/react.cjs.js"},"./simple":{"types":"./dist/simple.d.ts","import":"./dist/simple.esm.js","require":"./dist/simple.cjs.js"}},"gitHead":"40c13f641227507e71bab4cdec26ca9c5388cc3e","private":false,"scripts":{"dev":"concurrently \"pnpm run dev:core\" \"pnpm run dev:simple\"","build":"pnpm run build:core && pnpm run build:simple","clean":"rm -rf dist","serve":"python3 -m http.server 3000","preview":"pnpm run build && open dev-server.html","dev:core":"tsup --config tsup.config.ts --watch","typecheck":"tsc --noEmit","build:core":"tsup --config tsup.config.ts","dev:simple":"tsup --config tsup.simple.config.ts --watch","build:simple":"tsup --config tsup.simple.config.ts"},"_npmUser":{"name":"sambutton","email":"sam@asklou.co"},"repository":{"url":"git+https://github.com/askloullc/leadform-embed.git","type":"git"},"_npmVersion":"10.9.3","description":"Embeddable lead capture form widget for websites","directories":{},"_nodeVersion":"22.18.0","_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.1.0","react":"^18.0.0","typescript":"^5.5.4","@types/react":"^18.0.0","concurrently":"^9.0.0"},"peerDependencies":{"react":">=16.8.0"},"_npmOperationalInternal":{"tmp":"tmp/leadform-embed_1.0.0_1761181425444_0.13450153155792965","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@askloullc/leadform-embed","version":"1.0.1","keywords":["lead-form","embed","widget","conversion"],"author":{"name":"Ask Lou LLC"},"license":"UNLICENSED","_id":"@askloullc/leadform-embed@1.0.1","maintainers":[{"name":"sambutton","email":"sam@asklou.co"}],"homepage":"https://github.com/askloullc/leadform-embed#readme","bugs":{"url":"https://github.com/askloullc/leadform-embed/issues"},"dist":{"shasum":"6dd9d7c92878802d3ddddb788c4b709803039193","tarball":"https://registry.npmjs.org/@askloullc/leadform-embed/-/leadform-embed-1.0.1.tgz","fileCount":13,"integrity":"sha512-hM4szJ9B0FDlBAslbHGRwITgQF8baQoI1ydtsaudXhJitv6DEB8kWaled750YbIzPHM7D171EfZRayIuvvHKfA==","signatures":[{"sig":"MEQCIGW/u1tmsTwMicepQLYYQJvbeJGbT57W8Oou+GO0CwixAiB2a2fuWLrwMW0zDXhJ7MIakKEpUiZFxh3yP2JxWgUdng==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":674248},"main":"dist/leadform.iife.min.js","type":"module","types":"dist/index.d.ts","module":"dist/leadform.esm.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/leadform.esm.js","require":"./dist/leadform.iife.min.js"},"./react":{"types":"./dist/react.d.ts","import":"./dist/react.esm.js","require":"./dist/react.cjs.js"}},"gitHead":"52d58f3b5e0d3a5cfda851bc8301c206f234a8f9","private":false,"scripts":{"dev":"pnpm run dev:core","build":"pnpm run build:core","clean":"rm -rf dist","serve":"python3 -m http.server 3000","preview":"pnpm run build && open dev-server.html","dev:core":"tsup --config tsup.config.ts --watch","typecheck":"tsc --noEmit","build:core":"tsup --config tsup.config.ts"},"_npmUser":{"name":"sambutton","email":"sam@asklou.co"},"repository":{"url":"git+https://github.com/askloullc/leadform-embed.git","type":"git"},"_npmVersion":"10.9.3","description":"Embeddable lead capture form widget for websites","directories":{},"_nodeVersion":"22.18.0","_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.1.0","react":"^18.0.0","typescript":"^5.5.4","@types/react":"^18.0.0","concurrently":"^9.0.0"},"peerDependencies":{"react":">=16.8.0"},"_npmOperationalInternal":{"tmp":"tmp/leadform-embed_1.0.1_1761182273977_0.4230864959192606","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@askloullc/leadform-embed","version":"1.0.2","private":false,"type":"module","main":"dist/index.iife.min.js","module":"dist/index.esm.js","types":"dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.iife.min.js"},"./react":{"types":"./dist/react.d.ts","import":"./dist/react.esm.js","require":"./dist/react.cjs.js"}},"scripts":{"build":"pnpm run build:core","build:core":"tsup --config tsup.config.ts","typecheck":"tsc --noEmit","dev":"pnpm run dev:core","dev:core":"tsup --config tsup.config.ts --watch","preview":"pnpm run build && open dev-server.html","serve":"python3 -m http.server 3000","clean":"rm -rf dist"},"devDependencies":{"@types/react":"^18.0.0","concurrently":"^9.0.0","react":"^18.0.0","tsup":"^8.1.0","typescript":"^5.5.4"},"peerDependencies":{"react":">=16.8.0"},"keywords":["lead-form","embed","widget","conversion"],"description":"Embeddable lead capture form widget for websites","repository":{"type":"git","url":"git+https://github.com/askloullc/leadform-embed.git"},"license":"UNLICENSED","author":{"name":"Ask Lou LLC"},"_id":"@askloullc/leadform-embed@1.0.2","gitHead":"5939e82cc1f3d9e15352acc41df30fc6ee88b9d4","bugs":{"url":"https://github.com/askloullc/leadform-embed/issues"},"homepage":"https://github.com/askloullc/leadform-embed#readme","_nodeVersion":"22.18.0","_npmVersion":"10.9.3","dist":{"integrity":"sha512-4X1gBaFnHi1nTUKNxtsx2HYmEHhKrwCckQwtnZtSvFOi/T4g2P87X6LqN/ok/MBCY6Sld1/wpu8EkSDjA69YQA==","shasum":"85a2b144188633f01ef25720df143815c5d45ae7","tarball":"https://registry.npmjs.org/@askloullc/leadform-embed/-/leadform-embed-1.0.2.tgz","fileCount":13,"unpackedSize":674236,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQD49d2bwhboa0IFTcWv2Ptx8Fj295EYLcW1TGvV1hlKCQIgcbvzL9pqYw5635G7aNn4Z8l1/sNIpY9noS29O2giRxY="}]},"_npmUser":{"name":"sambutton","email":"sam@asklou.co"},"directories":{},"maintainers":[{"name":"sambutton","email":"sam@asklou.co"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/leadform-embed_1.0.2_1761183812697_0.09377785953826079"},"_hasShrinkwrap":false}},"time":{"created":"2025-10-23T01:03:45.326Z","modified":"2025-10-23T01:43:33.087Z","1.0.0":"2025-10-23T01:03:45.678Z","1.0.1":"2025-10-23T01:17:54.229Z","1.0.2":"2025-10-23T01:43:32.888Z"},"bugs":{"url":"https://github.com/askloullc/leadform-embed/issues"},"author":{"name":"Ask Lou LLC"},"license":"UNLICENSED","homepage":"https://github.com/askloullc/leadform-embed#readme","keywords":["lead-form","embed","widget","conversion"],"repository":{"type":"git","url":"git+https://github.com/askloullc/leadform-embed.git"},"description":"Embeddable lead capture form widget for websites","maintainers":[{"name":"sambutton","email":"sam@asklou.co"}],"readme":"# LeadForm Embed Widget\n\nA lightweight, framework-agnostic lead capture form widget that can be embedded on any website. Built with TypeScript and includes both script-based embedding and a React component for easy integration.\n\n## 🚀 Quick Start\n\n- **For any website**: Use the [script-based embed](#script-embed) \n- **For React apps**: Use the [React component](#react-component)\n\n## Features\n\n- 🪶 **Lightweight**: Only 4.6KB gzipped\n- 🎨 **Customizable**: Multiple themes and configurations\n- 🔒 **Isolated**: Uses Shadow DOM to prevent style conflicts\n- 📱 **Responsive**: Works on desktop and mobile\n- ♿ **Accessible**: Built with accessibility in mind\n- 🌙 **Dark mode**: Automatic dark mode support\n- 🛡️ **Secure**: Built-in validation and CSRF protection\n\n## Installation & Usage\n\n### Script Embed\n\n#### CDN (Recommended)\n\nAdd this script tag to your website:\n\n```html\n<script\n  src=\"https://cdn.loubase.com/leadform/1.0.0/index.iife.min.js\"\n  integrity=\"sha384-PASTE_SRI_FROM_CI\"\n  crossorigin=\"anonymous\"\n  data-site-slug=\"YOUR_SITE_SLUG\"\n  data-site-public-key=\"YOUR_PUBLIC_KEY\"\n  data-mode=\"floating\"\n  data-theme=\"auto\"\n  data-position=\"bottom-right\"\n  data-fields=\"name,email,company,message\"\n  data-title=\"Get in touch\"\n  data-button-text=\"Contact us\"\n  data-success-message=\"Thanks — we'll reply ASAP.\"\n  data-require-consent=\"true\"\n></script>\n```\n\n#### NPM\n\n```bash\nnpm install @loubase/leadform-embed\n```\n\n```javascript\nimport { LeadFormWidget } from '@loubase/leadform-embed';\n\nnew LeadFormWidget({\n  siteSlug: 'your-site-slug',\n  sitePublicKey: 'your-public-key',\n  theme: 'auto',\n  position: 'bottom-right',\n  fields: ['name', 'email', 'company', 'message'],\n  title: 'Get in touch',\n  buttonText: 'Contact us',\n  successMessage: 'Thanks — we\\'ll reply ASAP.',\n  requireConsent: true\n});\n```\n\n### React Component\n\nFor React applications, use the React component:\n\n```bash\nnpm install @loubase/leadform-embed\n```\n\n```tsx\nimport { SimpleLeadForm } from '@loubase/leadform-embed/react'\n\nfunction App() {\n  return (\n    <SimpleLeadForm\n      siteSlug=\"your-site-slug\"\n      sitePublicKey=\"your-public-key\"\n      title=\"Contact Us\"\n      fields={['name', 'email', 'message']}\n      theme=\"auto\"\n      onSubmit={(data) => console.log('Form submitted:', data)}\n      onError={(error) => console.error('Form error:', error)}\n    />\n  )\n}\n```\n\n👉 **[See complete React documentation](./SIMPLE.md)**\n\n## Configuration Options\n\n| Option | Type | Default | Description |\n|--------|------|---------|-------------|\n| `siteSlug` | `string` | **Required** | Your unique site slug |\n| `sitePublicKey` | `string` | **Required** | Your site's public key |\n| `theme` | `'light' \\| 'dark' \\| 'auto'` | `'auto'` | Color theme |\n| `position` | `'bottom-right' \\| 'bottom-left' \\| 'top-right' \\| 'top-left' \\| 'center'` | `'bottom-right'` | Position of the form |\n| `fields` | `string[]` | `['name', 'email', 'message']` | Form fields to display |\n| `title` | `string` | `'Get in touch'` | Form title |\n| `buttonText` | `string` | `'Contact us'` | Submit button text |\n| `successMessage` | `string` | `'Thanks — we\\'ll reply ASAP.'` | Success message |\n| `requireConsent` | `boolean` | `false` | Show privacy consent checkbox |\n| `requireMarketingConsent` | `boolean` | `false` | Show marketing consent checkbox |\n| `accentColorHex` | `string` | `'#3b82f6'` | Primary color (hex format) |\n| `apiEndpoint` | `string` | `'https://api.loubase.com/leads'` | Custom API endpoint |\n\n## Available Fields\n\n- `name` - Full name (required)\n- `email` - Email address (required, validated)\n- `company` - Company name\n- `phone` - Phone number\n- `message` - Message textarea\n\n## Styling & Themes\n\nThe widget automatically adapts to your site's color scheme:\n\n- **Auto**: Follows system preference (light/dark)\n- **Light**: Always uses light theme\n- **Dark**: Always uses dark theme\n\nAll styles are encapsulated in Shadow DOM to prevent conflicts with your site's CSS.\n\n## Content Security Policy\n\nIf you use CSP, add these directives:\n\n```\nContent-Security-Policy:\n  script-src 'self' https://cdn.loubase.com 'sha384-PASTE_SRI_HASH';\n  connect-src 'self' https://api.loubase.com;\n  style-src 'self' 'unsafe-inline';\n```\n\n## API Endpoint\n\nThe widget submits form data to your configured endpoint with this payload:\n\n```json\n{\n  \"siteSlug\": \"your-site-slug\",\n  \"sitePublicKey\": \"your-public-key\",\n  \"formData\": {\n    \"name\": \"John Doe\",\n    \"email\": \"john@example.com\",\n    \"company\": \"Acme Corp\",\n    \"message\": \"Hello!\"\n  },\n  \"source\": \"embed\",\n  \"timestamp\": \"2024-01-01T00:00:00.000Z\",\n  \"url\": \"https://example.com/page\",\n  \"userAgent\": \"Mozilla/5.0...\"\n}\n```\n\nExpected response for success:\n\n```json\n{\n  \"success\": true,\n  \"id\": \"lead-123\"\n}\n```\n\n## Development\n\n```bash\n# Install dependencies\npnpm install\n\n# Development mode (watch)\npnpm run dev\n\n# Build for production\npnpm run build\n\n# Type checking\npnpm run typecheck\n```\n\n## Browser Support\n\n- Chrome 63+\n- Firefox 63+\n- Safari 11.1+\n- Edge 79+\n\n## License\n\nUNLICENSED - © Lou LLC\n\n\nold update embed\n\nconst config = getConfig();\n            const fields = config.fields.join(',');\n            const embedCode = `<script src=\"https://cdn.loubase.com/leadform/1.0.0/index.iife.min.js\" data-site-id=\"${config.siteId}\" data-mode=\"${config.mode}\" data-theme=\"${config.theme}\" data-position=\"${config.position}\" data-fields=\"${fields}\" data-title=\"${config.title}\" data-button-text=\"${config.buttonText}\" data-success-message=\"${config.successMessage}\" data-require-consent=\"${config.requireConsent}/></script>`;\n            document.getElementById('embedCode').textContent = embedCode;\n","readmeFilename":"README.md"}