Embeddable Forms

Embeddable forms let you capture leads directly on your own website. You build the form in Journeybee, add two lines of code to your page, and every submission arrives as a lead with the right partner and attribution already attached.

The form renders inside a sandboxed iframe that resizes itself to fit your page, so it works on any website (marketing site, landing page, partner microsite) with no server-side setup.

Where to find it: Go to Settings, then Forms, and open the Lead Capture - Embed tab.

Who can use this: Admins and Partnership Team members. Adding the code to your website needs someone who can edit your site's HTML.

Step 1: Create the form

Go to Settings, then Forms, and click New form.
Enter a Label. This is internal, so partners and visitors never see it.
Under Form hosting, choose Embeddable.
Under Form type, choose Partner Referral Form (prospects credited to a partner) or Campaign Lead Form (leads tied to a marketing campaign, which needs the Marketing module).
For a referral form, choose the Lead Direction: Received for leads coming in to you, or Sent for leads you are passing out to a partner. Most website forms are Received.
Click Create.

Step 2: Build the form

Click the form to open the edit sidebar. A live preview on the right shows exactly what visitors will see.

Form fields

Standard fields available on every form: First Name, Last Name, Email, Phone and Company Name. Toggle each one on or off.

Below those, use Add form fields to include any custom lead fields you have set up. Drag fields to reorder them, and click Add Section to group related fields under a heading.

If a custom field is marked internal, Journeybee warns you on the form, because visitors will not see it. Make the field shared or remove it from the form.

Routing and attribution

Available Partners: which partners the leads should be credited to. Choose specific partners or select all.
Campaign (campaign forms): the campaign these leads belong to.
Lead Source Tracking: attach an attribution label so you can report on which page or channel produced the lead.

Publish the form

Set the form status to Live. A form left in Draft will not render on your website.

Step 3: Copy the form ID

In the form list, click Copy Form ID on your published form. This is the form's UUID, and it is the only value your website needs.

The form ID is safe to put in public HTML. The form is a public landing surface by design, so there is no secret key to protect and nothing to keep server-side.

Step 4: Add the form to your website

Add an empty container where the form should appear, load the Journeybee script, and initialise the form with your ID:


<div id="jb-form"></div>

<script src="https://forms.journeybee.io/api/embed"></script>
<script>
  window.journeybee("init", "YOUR_FORM_ID", document.getElementById("jb-form"));
</script>

That is the whole integration. Replace YOUR_FORM_ID with the ID you copied. Calls made before the script finishes downloading are queued and replayed automatically, so the snippet works exactly as written.

You can place this on any page, and use the same form on several pages at once.

Reacting to a submission

Pass callbacks if you want to redirect, close a modal, or fire an analytics event when someone submits:


window.journeybee("init", "YOUR_FORM_ID", document.getElementById("jb-form"), {
  onSuccess: () => { window.location.href = "/thank-you"; },
  onError: (data) => console.error("submission failed", data),
});

Available callbacks are onReady, onSuccess, onError and onValidation. Add debug: true to log activity to the browser console while you are setting things up.

Prefilling fields

If you already know who the visitor is, because they arrived from an email or are signed in to your site, you can pre-populate fields:


window.journeybee("init", "YOUR_FORM_ID", document.getElementById("jb-form"), {
  prefill: {
    email: "jane@acme.com",
    first_name: "Jane",
    company_name: "Acme",
  },
});

Standard fields are keyed by name (email, first_name, last_name, company_name, phone_number). Custom fields are keyed by their field UUID, and only text, long text, email, website, phone and number fields can be prefilled. Empty values are ignored.

Matching your brand

Pass a customization object to restyle the form so it sits naturally in your page:


window.journeybee("init", "YOUR_FORM_ID", document.getElementById("jb-form"), {
  customization: {
    theme: {
      colors: { primary: "#4f46e5", background: "#ffffff", text: "#111827" },
      spacing: { padding: "24px", gap: "16px" },
      typography: { fontFamily: "'Inter', sans-serif" },
      borders: { radius: "md" },
      layout: { maxWidth: "480px" },
    },
    layout: { submitButton: { text: "Get started" } },
  },
});

You can set colours, spacing, font family and sizes, font weight, corner radius, maximum width and the submit button label. Every value is checked by Journeybee before it is applied, so formats matter:

Colours must be hex (#4f46e5), rgb(...) or rgba(...).
Sizes must include a unit: 24px, not 24.

A value that fails these checks is ignored rather than applied, which is the usual reason styling appears to do nothing.

The form mounts into whatever container you give it, so a pop-up is just a container that appears on demand:


function openFormModal() {
  document.getElementById("modal").style.display = "block";
  window.journeybee("init", "YOUR_FORM_ID", document.getElementById("modal-body"), {
    onSuccess: () => { document.getElementById("modal").style.display = "none"; },
  });
}

To remove a form again, when closing the modal or navigating away in a single-page app, call:


window.journeybee("destroy", "YOUR_FORM_ID");

To re-render with different options, destroy the form first and then initialise it again.

For your developers

The full technical reference, covering every option, the React pattern with proper cleanup, the postMessage contract and the security model, lives in the Journeybee developer documentation:

Embedding lead forms
Embedding the partner portal: for putting the whole partner portal inside your site, which is a separate feature with its own signing keys.

Hosted forms instead

If you do not want to touch your website's code, use a hosted form instead. Journeybee serves it at its own web address and you share the link by email, in a campaign, or as a button on your site.

Create one from the Lead Capture - Hosted tab, then copy the form link. Everything else (fields, sections, routing, attribution) works exactly the same way. See Forms.

Troubleshooting

The form does not appear

Check the form status is Live, not Draft.
Check the form ID matches the one from Copy Form ID.
Make sure the container element exists on the page before the init call runs. If your script is in the page <head>, move it below the container or wait for the page to load.

Styling has no effect

A value failed validation and was ignored. The two common causes are a colour without a # and a size without a unit.

A prefilled value does not appear

The value was empty, or the field is a type that cannot be prefilled. Only text, long text, email, website, phone and number custom fields accept prefill.

Submissions are not arriving as leads

Check that Available Partners is set on the form, because a referral form needs to know who to credit. Then check your Leads list, filtering by the attribution label you attached.

onSuccess never fires

Add debug: true to the init options and watch the browser console for the message traffic between your page and the form.

Good to know

Spam protection is built in: a hidden honeypot field and a minimum time-to-submit quietly drop automated submissions. You do not need to add a CAPTCHA.
Leads created from a form are attributed immediately, so partner credit and reporting work without any manual tidying.
Changes you make to a form's fields go live straight away. You do not need to update the code on your website.
Partner application forms are different: they are shown on your portal login page or shared as a link, not embedded with this script. See Forms.