Advanced | Aidkit Docs

This guide covers advanced customization options including lifecycle hooks and the JavaScript API.

Lifecycle Hooks

Aidkit provides hooks that let you run custom code at various points in the form lifecycle.

onBeforeSubmit

Called before the form is submitted. You can modify the values or cancel the submission.

window.Aidkit.init({
  apiKey: "your-api-key",
  onBeforeSubmit: (values) => {
    // Modify values
    return {
      ...values,
      metadata: {
        ...values.metadata,
        timestamp: Date.now(),
      },
    };

    // Or cancel submission
    // return false;
  },
});

onAfterSubmit

Called after the form is submitted (regardless of success or failure).

window.Aidkit.init({
  apiKey: "your-api-key",
  onAfterSubmit: (values) => {
    console.log("Form submitted with:", values);
    analytics.track("support_ticket_submitted");
  },
});

onSuccess

Called when the ticket is successfully created.

window.Aidkit.init({
  apiKey: "your-api-key",
  onSuccess: (values) => {
    showToast("Ticket submitted successfully!");
  },
});

onError

Called when ticket creation fails.

window.Aidkit.init({
  apiKey: "your-api-key",
  onError: (error) => {
    console.error("Failed to submit ticket:", error);
    showToast("Failed to submit ticket. Please try again.");
  },
});

All Configuration Options

interface AidkitConfig {
  apiKey: string;
  defaultValues?: {
    name?: string;
    email?: string;
    // add any other fields you want
  };
  redirectUrl?: string;
  metadata?: Record<string, unknown>;
  onBeforeSubmit?: (values: FormValues) => FormValues | false | void;
  onAfterSubmit?: (values: FormValues) => void;
  onSuccess?: (values: FormValues) => void;
  onError?: (error: string) => void;
}

Programmatic Control

You can control the form programmatically after initialization:

// Initialize
window.Aidkit.init({ apiKey: "your-api-key" });

// Open on button click
document.getElementById("support-btn").addEventListener("click", () => {
  window.Aidkit.open();
});

// Close programmatically
window.Aidkit.close();

// Clean up when navigating away (for SPAs)
window.Aidkit.destroy();

Tip

For single-page applications (SPAs), call Aidkit.destroy() when unmounting components that initialized Aidkit to prevent memory leaks.