Add a redirect after booking a Meeting

kinara — Mon, 23 Oct 2023 10:54:53 GMT

I am using HubSpot meetings as an iframe in a modal on my website. I want to be able to auto-close the modal once the booking has been made successfully.

Here is the iframe and modal

export const HubSpotIFrameInitializer = ({ hubspotMeetingUrl, prefill, }: IHubSpotMeetingIframeProps) => { React.useEffect(() => { const script = document.createElement('script'); script.src='https://static.hsappstatic.net/MeetingsEmbed/ex/MeetingsEmbedCode.js'; script.onload = function () { const meetingsEmbedCode = (window as ICustomWindow).hsMeetingEmbed; if (meetingsEmbedCode) { meetingsEmbedCode.initialize({ widgetPosition: 'inline', targetSelector: '.meetings-iframe-container', }); } }; script.onerror = function (ev) { logger.log(`script failed to load.${ev}`); }; document.body.appendChild(script); }, [hubspotMeetingUrl]); // Construct hubspot url with prefill details const preFilledHubSpotMeetingUrl = `${hubspotMeetingUrl}&email=${prefill?.email}&firstName=${prefill?.firstName}&lastName=${prefill?.lastName}`; return prefill != null ? ( <div className="meetings-iframe-container" data-src={preFilledHubSpotMeetingUrl} /> ) : ( <div className="meetings-iframe-container" data-src={`${hubspotMeetingUrl}`} /> ); }; const HubSpotWidget = ({ title, openhubSpotDialog, setOpenhubSpotDialog, prefill, extraComponent, }: IProps) => { const theme = useTheme(); const PrimaryContrastColorHex = theme?.palette?.primary?.contrastText; const fullScreen = useMediaQuery(theme.breakpoints.down('md')); // Initialize hubspotMeetingUrl with the default URL const hubspotMeetingUrl = HubSpotUtils.getHubSpotMeetingUrl( prefill?.sparkAdvisorId || '', 'quick-meeting' ); const handleClose = () => { setOpenhubSpotDialog(false); }; return ( <> <Dialog maxWidth="lg" fullWidth open={openhubSpotDialog} onClose={handleClose} TransitionComponent={Transition} fullScreen={fullScreen} keepMounted > <DialogTitle sx={{ backgroundColor: 'secondary.main' }}> <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', }} > <Typography sx={{ fontWeight: 'bold', color: PrimaryContrastColorHex, }} variant="h5" > {title || 'Book a call with one of our experienced Energy Advisors'} </Typography> <IconButton onClick={handleClose}> <Close htmlColor={PrimaryContrastColorHex} /> </IconButton> </Box> </DialogTitle> <Helmet> <script type="text/javascript" src="https://static.hsappstatic.net/MeetingsEmbed/ex/MeetingsEmbedCode.js" /> </Helmet> <DialogContent sx={{ height: '100%' }}> <HubSpotIFrameInitializer hubspotMeetingUrl={hubspotMeetingUrl} prefill={prefill} /> </DialogContent> </Dialog> {extraComponent} </> ); };

Re: Add a redirect after booking a Meeting

PamCotton — Mon, 23 Oct 2023 22:07:13 GMT

Hello @kinara thank you for posting in our Community!

I want to share this conversation in our Community here

Is this what you are looking for? If not, to our top experts @Anton @dbeau79 any recommendations to @kinara ?

Thank you,

Pam

Re: Add a redirect after booking a Meeting

kinara — Tue, 24 Oct 2023 05:13:09 GMT

Hi Pam, yes I am looking for something almost similar but I want to be able to dynamically redirect to different pages

topic Add a redirect after booking a Meeting in APIs & Integrations

Add a redirect after booking a Meeting

Re: Add a redirect after booking a Meeting

Re: Add a redirect after booking a Meeting