Lead capture, made simple

A better way to ask.

Magnet is a small, dependency-free JavaScript library for timely, on-brand lead capture modals.

View in GitHub

One script. No framework, no account, no fuss.

A collection of customizable Magnet lead capture modals

What it does

Everything you need, with room to make it yours.

Magnet handles the small details so you can focus on making a useful offer and a clear next step.

Smart triggers

Show a modal after a delay, at a chosen scroll depth, or when a visitor is about to leave.

Zero dependencies

Pure JavaScript with no framework lock-in. Add one script tag and you’re ready to go.

Fits your brand

Control the copy, colors, images, placement, layout, and backdrop so it looks at home.

Helpful validation

Email validation and friendly, configurable errors are included from the first interaction.

Multiple modals

Run independent campaigns on one page, each with its own audience, trigger, and goal.

Flexible handoff

Send FormData or JSON to any webhook or API, with custom fields for campaign context.

Three trigger types

The right moment is a little more human.

Time

Time-based

Reach readers who have spent a little time getting to know your content.

Scroll

Scroll depth

Offer the next step when visitors are actively exploring what you have to say.

Exit

Exit intent

Leave a thoughtful final invitation when a desktop visitor is ready to move on.

example.js

// A useful offer, right before they leave
new Magnet({
  trigger: { type: 'exit' },
  submit: {
    url: 'https://hooks.example.com',
    format: 'json'
  },
  design: {
    imageUrl: '/guide-cover.jpg',
    layout: 'left',
    ctaColor: '#d84c3e'
  },
  content: {
    title: 'Take the guide with you',
    buttonText: 'Send me a copy'
  }
});

Installation

Up and running in a minute.

Use npm or add the script directly. Either way, Magnet stays out of your way.

NPM

$npm install @aldoalfaro/magnet

CDN

cdn.jsdelivr.net/npm/@aldoalfaro/magnet

quick-start.html

<!-- 1. Include the script -->
<script src="https://cdn.jsdelivr.net/npm/@aldoalfaro/magnet@latest/dist/magnet.min.js"></script>

<!-- 2. Choose a moment and endpoint -->
<script>
  new Magnet({
    trigger: { type: 'time', value: 3 },
    submit: { url: 'https://your-webhook-url.com' }
  });
</script>

Configuration

The useful options, clearly documented.

Start with a trigger and an endpoint, then shape the rest around your campaign.

Parameter	Values	Default	What it controls
trigger.type	'time' \| 'scroll' \| 'exit'	'time'	When to show the modal
trigger.value	Number	3	Seconds for time, or a percentage for scroll
submit.url	String	''	The webhook or API endpoint for submissions
submit.format	'formdata' \| 'json'	'formdata'	The submission payload format
design.position	'centered' \| 'bottom-right' \| …	'centered'	Where the modal appears on the screen
design.backdrop	true \| false	true	Whether a backdrop appears behind the modal
design.imageUrl	String (URL)	''	An optional image in the modal
design.layout	'top' \| 'left' \| 'right'	'top'	Image placement relative to the content
design.ctaColor	Hex color	'#007bff'	The submit button color
content.title	String	''	The main message
content.buttonText	String	'Submit'	The label on the submit button
customFields	Object	{}	Extra fields sent with every submission

Make every invitation count.

Use Magnet to give the right people a simple, well-timed next step.

View on GitHub