Overview

The Default Forms SDK makes it easy to connect your hosted forms to Default’s platform. It streamlines form submissions, event management, and scheduler integration to enhance your workflows.

Forms SDK is used by customers like: Boompop & Hex!

Features:

Form Submission Management: Effortlessly send form data to Default
Event Emission: Hook into events like submission success or errors
Scheduler Integration: Allow users to book meetings directly from your form

Implementation

Step 1: Create a Form

Create a form

Go to Default > Forms > Webforms and create a new form.
Pick Default SDK.

Step 2: Include the Forms SDK Web Script

Include the Forms SDK web script

Add the SDK to your webpage:

const script = document.createElement('script');
script.src = "https://import-cdn.default.com/sdk.js";
script.async = true; // Optional: Load asynchronously
document.head.appendChild(script);

Access the SDK:

const sdk = window.DefaultSDK;

Step 3: Available Methods

Available methods

helloworld

Logs a welcome message to verify that the SDK is loaded correctly:

sdk.helloWorld();
// Logs: "Hello World! Welcome to Default.com"

Submit

Handles form submissions and manages events:

sdk.submit(
  submission: {
    form_id: number;
    team_id: number;
    responses: Record<string, string | number | boolean>;
    questions: Array<{
      id: string;
      name: string;
      type: string;
      options?: Array<string | number>;
    }>;
  },
  callbacks?: {
    onSuccess?: (data) => void;
    onError?: (error: Error) => void;
    onSchedulerDisplayed?: (data) => void;
    onSchedulerClosed?: (data: { redirectUrl?: string }) => void;
    onMeetingBooked?: (data: { payload }) => void;
  }
): Promise<void>;

Step 4: Submission & Callbacks

Submission and callbacks

Submission (Required)

Object containing form data and metadata:

form_id (number, required): Unique form identifier
team_id (number, required): Team identifier
responses (object, required): Question ID to response mapping
questions (array, required): Question metadata array

Question Attributes

id - (required): The unique identifier for the question.
name - (required): The human-readable name of the question.
type - (required): The type of input ("email", "text", "select" etc.).
options - (optional): For multiple-choice questions, an array of valid options.

Example submission:

const submission = {
  form_id: FORMID,
  team_id: TEAMID,
  responses: {
    email: "test@test.com",
    industry: "automotive",
  },
  questions: [
    {
      id: "email",
      name: "Email",
      type: "email",
      options: [],
    },
    {
      id: "industry",
      name: "Industry",
      type: "text",
      options: ["automotive", "computers", "software"],
    },
  ],
};

Callbacks (Optional)

Event handlers for submission lifecycle:

const callbacks = {
  onSuccess: (data) => {
    console.log("Submission successful!", data);
  },
  onError: (error) => {
    console.error("Submission failed:", error.message);
  },
  onSchedulerDisplayed: (data) => {
    console.log("Scheduler displayed:", data);
  },
  onSchedulerClosed: (data) => {
    console.log("Scheduler closed, optional redirect: " + data.redirect);
  },
  onMeetingBooked: (data) => {
    console.log("Meeting booked successfully!", data.payload);
  },
};

Step 5: Create a Test Submission

Create a test submission

Create a test submission by submitting a form entry to ensure your setup is working properly. Then, navigate to the Check the Connection step in Default to verify the integration.

Complete the Configuration by:

Select the email field to identify the lead.
Map your form fields to the corresponding Default attributes.
Assign a unique name to the form for easy identification.

This process ensures your form is correctly integrated and ready for future submissions.

Forms SDK Example

const script = document.createElement('script');
script.src = "https://import-cdn.default.com/sdk.js";
script.async = true;

script.onload = function() {
    console.log("SDK script loaded, attempting to use DefaultSDK...");
    

    const submission = {
        form_id: 867190,
        team_id: 7,
        responses: {
            email: "luke@tatooine.galaxy",
            rebel_name: "Luke Skywalker",
            home_planet: "Tatooine",
            spacecraft_type: "X-wing",
            combat_experience: true,
            force_sensitive: true,
            preferred_division: "starfighter_corps",
            mission_availability: "immediate",
            droid_companion: "R2-D2",
            imperial_history: false
        },
        questions: [
            {
                id: "email",
                name: "Contact Email",
                type: "email",
                options: []
            },
            {
                id: "rebel_name",
                name: "Full Name",
                type: "text",
                options: []
            },
            {
                id: "home_planet",
                name: "Home Planet",
                type: "text",
                options: []
            },
            {
                id: "spacecraft_type",
                name: "Primary Spacecraft",
                type: "select",
                options: ["X-wing", "Y-wing", "A-wing", "B-wing", "Other"]
            },
            {
                id: "combat_experience",
                name: "Do you have combat experience?",
                type: "boolean",
                options: []
            },
            {
                id: "force_sensitive",
                name: "Are you Force-sensitive?",
                type: "boolean",
                options: []
            },
            {
                id: "preferred_division",
                name: "Preferred Division",
                type: "select",
                options: ["starfighter_corps", "ground_forces", "intelligence", "support_services"]
            },
            {
                id: "mission_availability",
                name: "When can you start missions?",
                type: "select",
                options: ["immediate", "within_week", "within_month", "need_training"]
            },
            {
                id: "droid_companion",
                name: "Droid Companion (if any)",
                type: "text",
                options: []
            },
            {
                id: "imperial_history",
                name: "Have you ever served the Empire?",
                type: "boolean",
                options: []
            }
        ]
    };

    const callbacks = {
        onSuccess: (data) => console.log("Welcome to the Rebellion!", data),
        onError: (error) => console.error("Submission failed:", error.message),
        onSchedulerDisplayed: (data) => console.log("Scheduler displayed:", data),
        onSchedulerClosed: (data) => console.log("Scheduler closed:", data),
        onMeetingBooked: (data) => console.log("Meeting booked:", data.payload)
    };

    try {
        console.log("Attempting submission with DefaultSDK...");
        // Using the DefaultSDK that we found in the window properties
        window.DefaultSDK.submit(submission, callbacks);
    } catch (e) {
        console.error("Error during submission:", e);
        console.log("DefaultSDK object:", window.DefaultSDK);
    }
};

script.onerror = function() {
    console.error("Failed to load the Forms SDK");
};

document.head.appendChild(script);

Support for Custom Styling Default Forms

The DefaultSDK.insertForm method allows you to render forms that you’ve previously configured in Default directly on your website. This client-side function gives you the flexibility to style and position the form within your application’s UI while maintaining all the powerful submission and scheduling capabilities of Default’s platform.

DefaultSDK.insertForm({
  formId: string,          // Your form's unique ID
  teamId: string,          // Your team's ID
  container: string,       // CSS selector or DOM element
  submitText?: string,     // Optional custom submit button text
  onSuccess?: (data) => void,
  onError?: (error) => void,
  onSchedulerDisplayed?: (data) => void,
  onSchedulerClosed?: (data) => void,
  onMeetingBooked?: (data) => void
}): void

formId(string, required): Unique identifier for your form
teamId(string, required): Your team’s identifier
container(string|HTMLElement, required): Target element for form insertion
submitText(string, optional): Custom text for submit button
Callbacks(all optional):
- onSuccess: Called after successful submission
- onError: Called if submission fails
- onSchedulerDisplayed: Called when scheduler opens
- onSchedulerClosed: Called when scheduler closes
- onMeetingBooked: Called when meeting is booked

Content Security Policy

If adding to a Content Security Policy (CSP), add *.default.com to your existing list(s).

For a more specific list of subdomains, you can add the following:

script-src 'self' https://import-cdn.default.com;
style-src 'self' https://import-cdn.default.com;
connect-src 'self' https://nucleus.default.com;

Error Handling

Client-Side Validation (SDK Errors - Emitted via Callback)

Errors will be triggered if:

form_id, team_id, responses, questions, or email is missing
responses is not an object
questions is not an array
A response key does not match an entry in the questions array

Server-Side Errors (400 Bad Request)

The server will return a 400 error if:

submission is missing
form_id or team_id is missing
responses or questions are missing
email is missing
The questions array does not match the expected format
No valid responses are found

Server-Side Errors (500 Internal Server Error)

The endpoint is experiencing an outage

Response Structure

Success ✅

{json
  "body": {
    "stepDetails": {
      "inline": true, // If true, display a scheduler modal; if false, redirect to a URL
      "url": "https://example.com/scheduler-or-redirect-url"
    }
  },
  "success": true
}

Error ❌

{
  "error": "Error message here",
  "success": false
}

About Us

Workspace Onboarding

Forms

Routing

Integrations

Forms: Forms SDK

Overview

Implementation

Step 1: Create a Form

Step 2: Include the Forms SDK Web Script

Step 3: Available Methods

Step 4: Submission & Callbacks

Step 5: Create a Test Submission

Forms SDK Example

Support for Custom Styling Default Forms

Content Security Policy

Error Handling

Client-Side Validation (SDK Errors - Emitted via Callback)

Server-Side Errors (400 Bad Request)

Server-Side Errors (500 Internal Server Error)

Response Structure

Examples of Form SDK

Boompop

Hex

About Us

Workspace Onboarding

Forms

Routing

Integrations

​Overview

​Implementation

​Step 1: Create a Form

​Step 2: Include the Forms SDK Web Script

​Step 3: Available Methods

​Step 4: Submission & Callbacks

​Step 5: Create a Test Submission

​Forms SDK Example

​Support for Custom Styling Default Forms

​Content Security Policy

​Error Handling

​Client-Side Validation (SDK Errors - Emitted via Callback)

​Server-Side Errors (400 Bad Request)

​Server-Side Errors (500 Internal Server Error)

​Response Structure

​Examples of Form SDK

​Boompop

​Hex

​

Overview

Implementation

Step 1: Create a Form

Step 2: Include the Forms SDK Web Script

Step 3: Available Methods

Step 4: Submission & Callbacks

Step 5: Create a Test Submission

Forms SDK Example

Support for Custom Styling Default Forms

Content Security Policy

Error Handling

Client-Side Validation (SDK Errors - Emitted via Callback)

Server-Side Errors (400 Bad Request)

Server-Side Errors (500 Internal Server Error)

Response Structure

Examples of Form SDK

Boompop

Hex