Journeybee forms can be embedded into any website or application while maintaining full functionality and customization options.

​
Quick Start

Add Journeybee forms to your website in three steps:

<!-- 1. Add the embed script -->
<script src="https://forms.journeybee.io/api/embed"></script>

<!-- 2. Add a container -->
<div id="form-container"></div>

<!-- 3. Initialize the form -->
<script>
  journeybee(
    "init",
    "your-form-uuid",
    document.getElementById("form-container")
  );
</script>

​
Installation Options

<script src="https://forms.journeybee.io/api/embed"></script>

​
Configuration

The journeybee() function accepts the following parameters:

​
formUuid
string
required

Your form’s unique identifier

​
container
HTMLElement
required

The container element where the form will be rendered

​
options
object

Configuration options for the form

​
Customization

​
Embedding Methods

const openForm = () => {
  journeybee("init", "form-uuid", modal, {
    onSuccess: (data) => {
      console.log("Form submitted:", data);
      closeModal();
    },
  });
};

​
Inline Form

<div class="my-form-container">
  <div id="inline-form"></div>
</div>

<script>
  document.addEventListener("DOMContentLoaded", () => {
    journeybee("init", "form-uuid", document.getElementById("inline-form"), {
      customization: {
        theme: {
          colors: {
            primary: "#0066cc",
          },
        },
      },
    });
  });
</script>

​
Events

​
Form Lifecycle Events

journeybee("init", "form-uuid", container, {
  // Form is ready to receive input
  onReady: () => {
    console.log("Form is ready");
  },

  // Form validation status
  onValidation: (data) => {
    console.log("Validation:", data.isValid, data.errors);
  },

  // Form submitted successfully
  onSuccess: (data) => {
    console.log("Form submitted:", data);
  },

  // Form encountered an error
  onError: (error) => {
    console.error("Form error:", error);
  },
});

​
Communication API

// Get form instance
const form = journeybee("init", "form-uuid", container);

// Update form customization
form.updateCustomization({
  theme: {
    colors: {
      primary: "#00ff00",
    },
  },
});

// Update form data
form.setFormData({
  email: "new@example.com",
});

// Update styles
form.setStyle({
  ".form-input": "border-color: #0066cc;",
});

// Cleanup
form.destroy();

​
Advanced Usage

​
Pre-filling Form Data

journeybee("init", "form-uuid", container, {
  prefill: {
    email: "user@example.com",
    company_name: "Acme Inc",
    custom_field_uuid: "Custom Value",
  },
});

​
Debug Mode

journeybee("init", "form-uuid", container, {
  debug: true,
  onReady: () => {
    console.log("Form ready - check console for debug logs");
  },
});

​
Error Handling

When embedding Journeybee forms, you’ll receive detailed error information through the onError callback. Here are the possible error codes and their meanings:

​
Error Codes

CodeDescription
INVALID_FORMThe form UUID is invalid or missing
NO_FORM_FOUNDThe specified form could not be found
MISSING_CONTACTNeither email nor phone number was provided
DUPLICATE_LEADThis lead has already been submitted
INVALID_PARTNERSHIPInvalid partnership configuration or domain
SERVER_ERRORAn unexpected server error occurred
NETWORK_ERRORFailed to connect to the server

​
Example Error Handling

journeybee("init", "form-uuid", container, {
onError: (error) => {
// error = {
// code: string,
// message: string,
// details?: object // Only in development mode
// }
switch (error.code) {
case "DUPLICATE_LEAD":
alert("This lead has already been submitted");
break;
case "MISSING_CONTACT":
alert("Please provide either an email or phone number");
break;

​
Frontend Validation

The form performs immediate validation before submission for:

  • Required contact information (email or phone)
  • Partner company selection when required
  • Partner email address when required

​
Backend Validation

The server validates:

  • Form existence and accessibility
  • Partnership configurations
  • Duplicate lead submissions
  • Data integrity and constraints

​
Browser Support

Chrome (latest 2 versions)
Firefox (latest 2 versions)
Safari (latest 2 versions)
Edge (latest 2 versions)

​
Troubleshooting