Embedding Intake Forms

Kiket allows you to embed intake forms on your website, giving your customers a seamless experience for submitting requests, feedback, or any other data you want to collect.

Prerequisites

Before embedding a form, ensure that:

1. The intake form exists and is active
2. The form is set to public (for external access)
3. Embedding is enabled for the form

You can enable embedding in your intake form's YAML configuration:

key: contact-form
name: Contact Us
public: true
active: true
embed_enabled: true  # Enable embedding
allowed_origins:     # Optional: restrict to specific domains
  - https://example.com
  - https://*.example.com

Embed Methods

Kiket provides four ways to embed forms on your website:

1. Iframe Embed

The simplest method - just add an iframe to your page:

<iframe
  src="https://app.kiket.dev/intake/your-form-slug/embed"
  width="100%"
  height="600"
  frameborder="0"
  style="border: none; border-radius: 12px;">
</iframe>

Pros: Simple, works everywhere, no JavaScript required Cons: Fixed height, limited customization

---

2. JavaScript Widget

For more control, use the JavaScript widget which provides auto-resizing and event callbacks:

<!-- Load the Kiket Forms script -->
<script src="https://app.kiket.dev/embed/kiket-forms.js"></script>

<!-- Create a container for the form -->
<div id="kiket-form"></div>

<!-- Initialize the widget -->
<script>
  KiketForms.embed('#kiket-form', {
    slug: 'your-form-slug',
    theme: 'auto',
    onSuccess: function(data) {
      console.log('Form submitted!', data);
    }
  });
</script>

Options:

Option	Type	Default	Description
slug	string	required	The form's URL slug
width	string	'100%'	Container width
height	string	'auto'	Container height
autoResize	boolean	true	Auto-resize based on content
theme	string	'auto'	'auto', 'light', or 'dark'
onLoad	function	-	Called when form loads
onSubmit	function	-	Called when form is submitted
onSuccess	function	-	Called on successful submission
onError	function	-	Called if submission fails

---

3. Popup Modal

Open the form in a modal overlay, triggered by a button click:

<script src="https://app.kiket.dev/embed/kiket-forms.js"></script>

<button id="open-form">Contact Us</button>

<script>
  KiketForms.popup({
    slug: 'your-form-slug',
    trigger: '#open-form',
    theme: 'auto',
    onSuccess: function(data) {
      alert('Thank you for your submission!');
    }
  });
</script>

Options:

Option	Type	Default	Description
slug	string	required	The form's URL slug
trigger	string/element	-	CSS selector or element that opens the popup
width	string	'600px'	Modal width
maxWidth	string	'95vw'	Maximum modal width
theme	string	'auto'	Theme preference
onOpen	function	-	Called when modal opens
onClose	function	-	Called when modal closes

---

4. Floating Button

Add a floating action button that opens the form in a modal:

<script src="https://app.kiket.dev/embed/kiket-forms.js"></script>

<script>
  KiketForms.button({
    slug: 'your-form-slug',
    text: 'Contact Us',
    position: 'bottom-right',
    color: '#6366f1'
  });
</script>

Options:

Option	Type	Default	Description
slug	string	required	The form's URL slug
text	string	'Contact Us'	Button label
position	string	'bottom-right'	'bottom-right', 'bottom-left', 'top-right', 'top-left'
icon	boolean	true	Show chat icon
color	string	'#6366f1'	Button background color

---

Prefilling Form Fields

You can prefill form fields programmatically:

const form = KiketForms.embed('#kiket-form', {
  slug: 'your-form-slug'
});

// Prefill fields
form.prefill({
  name: 'John Doe',
  email: 'john@example.com'
});

---

Theming

The embedded form respects the user's system theme by default. You can override this:

KiketForms.embed('#kiket-form', {
  slug: 'your-form-slug',
  theme: 'dark'  // Force dark mode
});

// Or change theme dynamically
form.setTheme('light');

---

Event Handling

Listen for form events to provide custom behavior:

KiketForms.embed('#kiket-form', {
  slug: 'your-form-slug',

  onLoad: function(data) {
    console.log('Form loaded', data);
  },

  onSubmit: function(data) {
    console.log('Form submitted');
    // Show loading indicator
  },

  onSuccess: function(data) {
    console.log('Submission successful', data);
    // data.message - confirmation message
    // data.submission_id - submission ID
    // data.redirect_url - optional redirect URL
  },

  onError: function(errors) {
    console.log('Submission failed', errors);
    // errors - array of error messages
  }
});

---

Security

CORS & Allowed Origins

By default, embedded forms can be accessed from any origin. To restrict access:

# In your intake form configuration
allowed_origins:
  - https://example.com
  - https://www.example.com
  - https://*.example.com  # Wildcard support

Rate Limiting

Rate limits are enforced per IP address based on your form's rate_limit setting. The limit resets every hour.

CAPTCHA

If your form has CAPTCHA enabled (captcha_enabled: true), Cloudflare Turnstile will be shown to embedded form users.

---

Troubleshooting

Form not loading

1. Check that the form exists and is active
2. Verify embed_enabled is set to true
3. Check browser console for CORS errors
4. Ensure your domain is in allowed_origins (if configured)

Auto-resize not working

Ensure autoResize: true is set (default). The iframe needs proper cross-origin messaging support.

Styling issues

The embedded form uses its own styles. Custom styling requires the embed_style: custom configuration and CSS overrides.

---

API Reference

KiketForms.embed(selector, options)

Embeds a form into the specified container.

Returns: Form instance with methods: - destroy() - Remove the form - prefill(fields) - Prefill form fields - setTheme(theme) - Change theme

KiketForms.popup(options)

Creates a popup modal for the form.

Returns: Popup instance with methods: - open() - Open the modal - close() - Close the modal - destroy() - Remove the popup - prefill(fields) - Prefill form fields

KiketForms.button(options)

Creates a floating action button.

Returns: Button instance with methods: - open() - Open the form modal - close() - Close the form modal - destroy() - Remove the button - setButtonText(text) - Change button text - setButtonColor(color) - Change button color