# 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')
});
```
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://recatch.gitbook.io/docs/workflow-installation/integrate-custom-web-form/sdk-mode.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.