> For the complete documentation index, see [llms.txt](https://recatch.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://recatch.gitbook.io/docs/workflow-installation/integrate-custom-web-form/sdk-mode.md).
# SDK Mode
#### 1. Activate SDK Mode by adding `&mode=sdk` at the end of **i.src**.
**Here is an example:**
```jsx
```
* Please replace the following parts with the necessary information:
* **<\>**: You can find this information in the URL of your organization’s recatch URL (e.g. [company.recatch.cc](http://company.recatch.cc) → your Team Subdomain is “company”)
* **<\>**: You can find this information in the URL of the relevant Booking Page or Lead Router
* **<\>**: `light` or `dark`
#### 2. Once the SDK mode is successfully activated, you should be able to check `window.recatch` object in your console. Within the object, the `open` function will be available for use.
Please check if Re:catch is opened with the following function: `window.recatch.open()`
#### 3. The `open` method’s signature looks like the following (in Typescript), and these values can be customized like the following:
```tsx
open(options?: {
initialFormValues?: {
name: string
email: string
phone?: { phoneNumber: string; dialCode: string }
additional?: string
};
formAnswers?: Record;
onBookingComplete?: (fieldAnswers: Record) => void;
onDateSelect?: (dateRange: { start: Date; end: Date }) => void;
onCloseByUser?: () => void;
}): void
```
**Here are the specific explanations of each parts:**
1. **initialFormValues:** This is the default value of the Web Form that appears when the customer selects a meeting time in the Re:catch Booking Modal. The **keys** are `name`, `email`, `phone`, and custom values.
**Set the values like the following:**
```tsx
{
name: << Name variable of your form >>,
email: << Email variable of your form >>,
phone: {
phoneNumber: << Phone Number variable of your form >>,
dialCode: '+1'
}
}
```
1. **formAnswers:** This option can only be used when using a Lead Router. The form answer that matches the **names** of the link created when creating the lead router is delivered in object form. You must enter the name as the `key` and the form answer as the `value`.
*For example, assuming that the lead router is set up as above and the answer entered by the customer is name: Brian, email:* [*brian@recatch.cc*](mailto:brian@recatch.cc)*, { name: 'Brian', email: '' } .* 2. **onBookingComplete:** This is a callback function called when the reservation is confirmed. 3. **onCloseByUser:** This is a callback function that is called when the customer presses the X button to turn off the Re:catch Booking Modal.
#### 4. Here is the final sample of how your customized code will look like:
If you set your **Form Mapping** settings like the following in **Lead Router:**
Your code will look like this:
```tsx
window.recatch.open({
initialFormValues: {
name: << Name variable of your form >>,
email: << Email variable of your form >>,
phone: {
phoneNumber: << Phone Number variable of your form >>,
dialCode: '+1'
}
},
formAnswers: {
thisIsUserName: << Name variable of your form >>,
andThisIsUserEmail: << Email variable of your form >>,
},
onBookingComplete: () => console.log('complete'),
onDateSelect: () => console.log('date selected'),
onCloseByUser: () => console.log('closed by user')
});
```