SDK Mode

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

Here is an example:

<!-- 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 → 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:

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:

{
   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: [e-mail], { name: 'Brian', email: '[e-mail]' } . 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

Your code will look like this:

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