https://cal.com logo
Join Slack
Powered by
Hello everyone, there is a way to use the action b...
# developers
a
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
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
Thx . For instance If I am using a functional component, where I should use that instruction?
h
Do it in useEffect only
On mount
With no deps
a
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
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
Oh yep I will try it, thank you so much for your help
h
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
Yes works perfectly thanks so much to clarify that and also for the support
h
Awesome 👏🙏
a
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
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
sorry, I do not catch up, do you have an example?
h
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
that will be amazing and clear. Improve the DX as well
h
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
Thanks @Hariom Balhara 👏🏽
Hey @Hariom Balhara do you guys have an example of how to use the getCalApi from "@calcom/embed-react" lib ?
12 Views
Open in Slack
PreviousNext
Powered by