# SDK Mode

#### 1. Activate SDK Mode by adding `&mode=sdk` at the end of **i.src**.

**Here is an example:**

```jsx
<!-- Re:catch embedding code -->
<script>
 (function (r, e, c, a, t, ch) {
   var h=r.getElementsByTagName(e)[0],i=r.createElement(c);
   i.async=true;
   i.id='recatch-embed-script';
   i.src='<https://cdn.recatch.cc/recatch-embed.iife.js?t='+a[0]+'&b='+a[1]+'&c='+t+'&th='+ch+**'&mode=sdk>';**
   h.appendChild(i);
 })(document,'head','script',['<<Team Subdomain>>','<<Booking Page or Router ID>>'],'','<<Theme>>');
</script>
<!-- End Re:catch embedding code -->
```

* Please replace the following parts with the necessary information:
* **<\<Team Subdomain>>**: 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”)
* **<\<Booking Page or Router ID>>**: You can find this information in the URL of the relevant Booking Page or Lead Router
* **<\<Theme>>**: `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<string, string>;
  onBookingComplete?: (fieldAnswers: Record<string, any>) => 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: 'brian@recatch.cc' } ._ 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:**

![Untitled](https://prod-files-secure.s3.us-west-2.amazonaws.com/e9e833fa-a3de-403e-afe9-f4c6719d32b3/4509824d-781f-4b14-8050-624d267580be/Untitled.png)

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')
});
```
