Connect

No-code embed

Sync the people who sign up to your website or app into Leads - with no code. Paste one script and every signup or form submission flows in automatically. Or let Zoye render a ready-made form for you. Both work with just a publishable key, no backend or build step.

Option 1: Sync your signed-up users (one script)

This is the simplest path, and the one most people want: capture everyone who signs up to your website or app - through your signup or registration page, a waitlist, or any contact form you already have. Paste this one script and Zoye captures those submissions automatically. You do not change your page, your markup, or your styling.

Paste once, before </body>

HTML

<script src="https://api.zoye.io/embed/v1/capture.js"
        data-zoye-key="zk_pub_YOUR_KEY"></script>

When someone submits your signup or contact form, the script reads the standard fields (it matches by input type, name, placeholder, and label), sends a copy to Zoye in the background, and lets your form submit exactly as before. It never reads password, card, or one-time-code fields, so it is safe on a signup page.

Signing users up from a custom app that does not use a real HTML form (a React/Vue flow that calls an API on a button click)? The same script still works - call the one-line helper from your signup handler. See custom app with no form just below.

Capture options

data-forms="#contact, .signup" - limit capture to forms matching a CSS selector. Default: every form on the page.
data-source="website-form" - the source chip applied to each captured lead.
data-type="company" - create company leads instead of person leads.
data-capture-logins="true" - also capture login-looking forms. Off by default so logins do not create leads.

Custom app with no form element

If your signup is a custom app that does not use a real <form> (for example a React component that calls fetch on a button click), the script still loads a small global helper. Call it from your own submit handler - one line:

JavaScript

// after the user submits, in your own handler:
zoye.capture({
  email: "lead@example.com",
  name: "Jane Doe",
  company: "Northwind",
});

Which option should I use?

Use capture when you already have a form or a custom signup flow and just want it to sync. Use the embed form below when you do not have a form yet and want Zoye to render one for you.

Option 2: Embed a ready-made form

Paste this into your website's HTML at the exact spot where you want the form to appear. The empty div is the mount point; the script finds it via data-target and renders the form inside it.

Paste where the form should appear

HTML

<div id="zoye-contact-form"></div>
<script src="https://api.zoye.io/embed/v1/contact-form.js"
        data-zoye-key="zk_pub_YOUR_KEY"
        data-target="#zoye-contact-form"
        data-fields="name,email,phone,company"
        data-source="website-form"
        data-success="Thanks! We'll be in touch."></script>

Where everything goes

Where to paste it: directly in your page's HTML, in the spot the form should show up. On most site builders this is a "custom HTML" or "embed code" block. On a hand-coded site, put it inside the <body> where the form belongs.
Where the key goes: in the data-zoye-key attribute. Use a publishable key (zk_pub_...) here. It is designed to be visible in page source.

Publishable keys are browser-safe by design

A publishable key can only create contacts. It cannot read, search, or edit your data, and it cannot write privileged routing fields. So even though it appears in your page source, the worst a bad actor can do is submit contacts, just like the form already allows. Never put a secret key (zk_live_...) in an embed.

Choosing which fields to show

Use data-fields with a comma-separated list. The form shows those inputs in that order. For example, a short form:

HTML

<script src="https://api.zoye.io/embed/v1/contact-form.js"
        data-zoye-key="zk_pub_YOUR_KEY"
        data-target="#zoye-contact-form"
        data-fields="name,email"></script>

Available fields

These standard field names are recognised in `data-fields`:

name, email, phone, company, position
website, address, city, country
linkedIn, twitter, notes

Any field name that is not in this list is sent as a custom field, resolved by its label against your workspace's custom fields. So data-fields="name,email,Budget" renders a Budget input and maps it to your Budget custom field.

Person vs company leads

By default submissions create person leads. Add data-type="company" to create company leads instead, which land in the Companies section of your Leads page.

HTML

<script src="https://api.zoye.io/embed/v1/contact-form.js"
        data-zoye-key="zk_pub_YOUR_KEY"
        data-target="#zoye-contact-form"
        data-type="company"
        data-fields="company,website,email"></script>

Attribute reference

Attribute	Required	Description
data-zoye-key	Yes	Your publishable key (zk_pub_...). Safe to expose in page source.
data-target	Yes	CSS selector of the element the form renders into, e.g. #zoye-contact-form.
data-fields	No	Comma-separated list of fields to show. Defaults to name,email. Order is preserved.
data-type	No	Set to company to create Company leads instead of person leads.
data-theme	No	light, dark, or auto (default). Auto matches the visitor's browser color scheme, so the form looks native on light and dark sites.
data-source	No	Label stored on each lead's source field, e.g. website-form. Helps you segment later.
data-success	No	Message shown after a successful submission.

Want more control over styling or validation? Build your own form and post to the REST API instead. The embed is the fastest path; the API is the flexible one.

Connect

No-code embed

Option 1: Sync your signed-up users (one script)

Paste once, before </body>

HTML

<script src="https://api.zoye.io/embed/v1/capture.js"
        data-zoye-key="zk_pub_YOUR_KEY"></script>

Capture options

data-forms="#contact, .signup" - limit capture to forms matching a CSS selector. Default: every form on the page.
data-source="website-form" - the source chip applied to each captured lead.
data-type="company" - create company leads instead of person leads.
data-capture-logins="true" - also capture login-looking forms. Off by default so logins do not create leads.

Custom app with no form element

JavaScript

// after the user submits, in your own handler:
zoye.capture({
  email: "lead@example.com",
  name: "Jane Doe",
  company: "Northwind",
});

Which option should I use?

Use capture when you already have a form or a custom signup flow and just want it to sync. Use the embed form below when you do not have a form yet and want Zoye to render one for you.

Option 2: Embed a ready-made form

Paste this into your website's HTML at the exact spot where you want the form to appear. The empty div is the mount point; the script finds it via data-target and renders the form inside it.

Paste where the form should appear

HTML

<div id="zoye-contact-form"></div>
<script src="https://api.zoye.io/embed/v1/contact-form.js"
        data-zoye-key="zk_pub_YOUR_KEY"
        data-target="#zoye-contact-form"
        data-fields="name,email,phone,company"
        data-source="website-form"
        data-success="Thanks! We'll be in touch."></script>

Where everything goes

Where to paste it: directly in your page's HTML, in the spot the form should show up. On most site builders this is a "custom HTML" or "embed code" block. On a hand-coded site, put it inside the <body> where the form belongs.
Where the key goes: in the data-zoye-key attribute. Use a publishable key (zk_pub_...) here. It is designed to be visible in page source.

Publishable keys are browser-safe by design

Choosing which fields to show

Use data-fields with a comma-separated list. The form shows those inputs in that order. For example, a short form:

HTML

<script src="https://api.zoye.io/embed/v1/contact-form.js"
        data-zoye-key="zk_pub_YOUR_KEY"
        data-target="#zoye-contact-form"
        data-fields="name,email"></script>

Available fields

These standard field names are recognised in `data-fields`:

name, email, phone, company, position
website, address, city, country
linkedIn, twitter, notes

Person vs company leads

By default submissions create person leads. Add data-type="company" to create company leads instead, which land in the Companies section of your Leads page.

HTML

<script src="https://api.zoye.io/embed/v1/contact-form.js"
        data-zoye-key="zk_pub_YOUR_KEY"
        data-target="#zoye-contact-form"
        data-type="company"
        data-fields="company,website,email"></script>

Attribute reference

Attribute	Required	Description
data-zoye-key	Yes	Your publishable key (zk_pub_...). Safe to expose in page source.
data-target	Yes	CSS selector of the element the form renders into, e.g. #zoye-contact-form.
data-fields	No	Comma-separated list of fields to show. Defaults to name,email. Order is preserved.
data-type	No	Set to company to create Company leads instead of person leads.
data-theme	No	light, dark, or auto (default). Auto matches the visitor's browser color scheme, so the form looks native on light and dark sites.
data-source	No	Label stored on each lead's source field, e.g. website-form. Helps you segment later.
data-success	No	Message shown after a successful submission.

Want more control over styling or validation? Build your own form and post to the REST API instead. The embed is the fastest path; the API is the flexible one.