https://cal.com logo
#developers
Title
# developers
a

Astor Ayestas

05/13/2022, 9:28 PM
Hello everyone, there is a way to use the action bookingSuccessful using the @calcom/embed-react lib?. The documentation only shows using plain javascript. I tried using a window.addEventListener inside of an useEffect but without success.
useEffect(() => {
window.addEventListener("bookingSuccessful", handleBooking);
console.log("test");
// cleanup this component
_return_ () => {
window.removeEventListener("bookingSuccessful", handleBooking);
};
}, []);
h

Hariom Balhara

05/14/2022, 8:52 AM
You can use the same API with react as react library itself uses vanilla JS. You need to use the following. Don't listen for events on window. Just ensure that when you call it embed-react has been imported.
Copy code
Cal("on", {
  action: "bookingSuccessful",
  callback: (e)=>{
    // `data` is properties for the event.
    // `type` is the name of the action(You can also call it type of the action.) This would be same as "ANY_ACTION_NAME" except when ANY_ACTION_NAME="*" which listens to all the events.
    // `namespace` tells you the Cal namespace for which the event is fired/
    const {data, type, namespace} = e.detail;
  }
})
a

Astor Ayestas

05/15/2022, 2:49 PM
Thx . For instance If I am using a functional component, where I should use that instruction?
h

Hariom Balhara

05/15/2022, 2:50 PM
Do it in useEffect only
On mount
With no deps
a

Astor Ayestas

05/15/2022, 3:04 PM
Thx, I am importing that lib with this.
import Cal from "@calcom/embed-react";
I have Cal in two places, in the useffect:
Copy code
useEffect(() => {
    Cal("on", {
      action: "bookingSuccessful",
      callback: (e) => {
        const { data, type, namespace } = e.detail;
      },
    });
    return () => {};
  }, []);
And in the return of the functional component.
Copy code
<Cal
                    calLink="nbulla/15min"
                    calOrigin="<https://calendso-test.onrender.com>"
                    config={{
                      name: "Kunkg fu espinoza",
                      email: "<mailto:aayestas+ce@ingsw.com|aayestas+ce@ingsw.com>",
                      notes: "Test Meeting",
                      theme: "light",
                    }}
                    embedJsUrl={
                      "<https://calendso-test.onrender.com/embed/embed.js>"
                    }
                  />
but give me the following error when I call it in the use effect.
h

Hariom Balhara

05/15/2022, 3:05 PM
Ah, you need to use window.Cal("on
window.Cal is different than Cal component
I would add a working Codesandox example tomorrow for this.
a

Astor Ayestas

05/15/2022, 3:07 PM
Oh yep I will try it, thank you so much for your help
h

Hariom Balhara

05/15/2022, 3:27 PM
Copy code
import "./styles.css";
import {useEffect} from "react"
export default function App() {
  const calConfig = {
    theme: "dark"
  };
  

 useEffect(() => {
     window.Cal("on", {
       action: "*",
       callback: (e) => {
         console.log(e.detail);
       },
     });
     return () => {};
   }, []);

  return (
    <div className="App">
      <button
        data-cal-link="hariom"
        data-cal-config={JSON.stringify(calConfig)}
      >
        I am an existing button on your website
      </button>
      <div>
        <small>
          You can either have Cal component imported on the page already for
          this to work or you can install VanillaJS snippet on the page.
          <div>
            <i>
              In this example we have included Vanilla JS snippet in React
              Application
            </i>
          </div>
        </small>
      </div>
    </div>
  );
}
On mobile, looks like codesandbox isn't saving. So, if the link doesn't have the code. This is what I used
a

Astor Ayestas

05/15/2022, 3:34 PM
Yes works perfectly thanks so much to clarify that and also for the support
h

Hariom Balhara

05/15/2022, 3:34 PM
Awesome 👏🙏
a

Astor Ayestas

05/15/2022, 3:35 PM
I tried it in a js component and works perfectly, but in a typescript component give me the following message
Property 'Cal' does not exist on type 'Window & typeof globalThis'.ts(2339)
I will try adding a global
Something like this.
src/types/index.d.ts
Copy code
export {};

declare global {
  interface Window {
    Cal: any;
  }
}
h

Hariom Balhara

05/15/2022, 3:40 PM
Yeah it's on window. yeah you can do that. But you can also check https://github.com/calcom/cal.com/blob/main/packages/embeds/embed-snippet/src/index.ts
I would export the GlobalCal from embed/react, so that you don't need to accessit from window. It would have type support
a

Astor Ayestas

05/16/2022, 1:49 PM
sorry, I do not catch up, do you have an example?
h

Hariom Balhara

05/16/2022, 1:53 PM
Actually I was talking about making a change in the embed/react library, so that you can just
import {globalCal} from "@calcom/embed-react"
and then do
globalCal.on()
Need to look for a better name though
calApi
is better than
globalCal
a

Astor Ayestas

05/16/2022, 1:55 PM
that will be amazing and clear. Improve the DX as well
h

Hariom Balhara

05/16/2022, 1:56 PM
yeah. It would be coming soon :)
❤️ 1
@Astor Ayestas can you try v1.0.5 version of embed-react. It now exposes {getCalApi} which returns a promise of calApi
a

Astor Ayestas

05/19/2022, 4:36 PM
Thanks @Hariom Balhara 👏🏽
Hey @Hariom Balhara do you guys have an example of how to use the getCalApi from "@calcom/embed-react" lib ?
11 Views