tcampb/react-calendly

Calendly integration for React apps

react-calendly's Issues

it is possible to obtain the date and time chosen by the user

Hello, everybody.

I was wondering if it is possible to obtain the date and time chosen by the user with the event onDateAndTimeSelected. I've been testing and it always generates an empty payload key.

Calendly Event: {"event":"calendly.date_and_time_selected","payload":{}}

OnPopupClose handler

Hi, just wondering do we have any handling for onClose action if create a custom button that triggers a pop-up scheduler, e.g: after event schedule, and user click the "X" button to close the modal, I need a handler on that

Error on Deploy in Netlify

Hi Friend.

I have the following problem with your package:

In local development works fine but when i deploy my gatsby project on netlify it give me an error:

WebpackError: ReferenceError: window is not defined

related with this line of code var Calendly = window ? window.Calendly : {};

I decided to create a local component but if you can fix that it will be amazing.

Notes: netlify says it error is related with the fact that in the server the window variable does not exist and this have total sense.

How we can hide some embedded elements

Want to modify some css or javascript that we are getting from other web page as i doesn't see any props here

Infinitely Loading Widget

Currently using the react-calendly package and have implemented it into my react-application like so:

import React, { useState } from 'react'
import { InlineWidget } from 'react-calendly'

function App() {
  return (
    <>
      <InlineWidget
        url='https://calendly.com/robert-612/complimentary-consultation'
        utm={{
          utmCampaign: 'Spring Sale 2019',
          utmContent: 'Shoe and Shirts',
          utmMedium: 'Ad',
          utmSource: 'Facebook',
          utmTerm: 'Spring'
        }}
      />
    </>
  )
}

export default App

The widget is working as expected, I am able to schedule, etc. the only issue is there are three dots indicating the widget is in a loading state and they never go away. It looks like the following:

When checking the console I get the following issue from the Chrome Dev Tools:

Resolve this issue by updating the attributes of the cookie:
Specify SameSite=None and Secure if the cookie is intended to be set in cross-site contexts. Note that only cookies sent over HTTPS may use the Secure attribute.
Specify SameSite=Strict or SameSite=Lax if the cookie should not be set by cross-site requests

is there something I'm missing?

PopupWidget to show with specified styles and specified place

Hi,
At the moment it seems PopupWidget can only be shown at the right bottom corner.
However, on our webpage, we have Call to action at different places.
Is there a way to show the Popup Widget at a particular place on the page, that is inside a particular HTML container?
Also with a particular style, let's say reducing the border-radius to make it consistent with the rest of the website theme.

Because of the lack of these features, at the moment we tried PopupText. However, that also doesn't seem to have the ability to provide styling like text colour. This is the closest we could get: https://avniproject.org/

onEventScheduled stopped working in 3.0.1

Hi there,

Thanks for the great library!

We recently upgraded to v3.0.1 and the onEventScheduled callback on the CalendlyEventListener stopped firing for us. Are we missing something or is this a bug?

'CalendlyEventListener' cannot be used as a JSX component React 18

className prop does not propagate down to the HTML element

I'm using Tailwind and I need to apply some classes to the resulting <a> element.

The current implementation only propagates the style prop which is not really compatible with Tailwind.

Add Option to Hide GDPR Banner

Calendly Embed code currently supports an option to hide GDPR banner. We would like this option to be added to this library to allow our users to have the ability to hide the GDPR banner.

Webhooks not working with this package

I set up a webhook for my Calendly account. Everything works fine when I use the embedded page code supplied by Calendly. However, when I use this package it does not trigger the webhook. Do I need any additional setup in order for this to work? When I go to my account it scheduled the event. It just doesn't communicate with my backend to store the details of the event.

hook for tracking events

CalendlyEventListener can be replaced with similar hook useCalendlyEvents, and it can be useful

nextjs Target container is not a DOM element

in nextjs it gives me this error
@tcampb
any help?

X-Frame-Options Error

I am getting an X-Frame-Options error when using the InlineWidget component. It seems to be a setting that the library sets not my server. The widget still works and it connects to my calendar correctly but I am getting this error in the console.

The following is the error:
Invalid X-Frame-Options header was found when loading "https://calendly.com/<username>/15min?embed_domain=big-bud-bookkeeping.web.app&embed_type=Inline&primary_color=60258d”: “ALLOWALL” is not a valid directive.

The following is my code:
<InlineWidget styles={{ height: '1000px' }} pageSettings={{ primaryColor: "60258d" }} url="https://calendly.com/<username>/15min" />

Invalid package name "functional-red-#222-tree": name can only contain URL-friendly characters

Hi. I'm trying to install react-calendly using
npm i react-calendly and I'm getting the following error:

Invalid package name "functional-red-#222-tree": name can only contain URL-friendly characters

any idea how can I fix this?

How to use useCalendlyEventListener

Hey,

I have react-calendly v4 and using it inside next.js

I have the following component:

On Stackoverflow: https://stackoverflow.com/questions/72171635/usecalendlyeventlistener-not-receiving-events

const CalendlyWidget = observer(
	({
		visitTypeForSpecificEvent,
		onScheduled,
		calendlyProfileUrl,
		prefill
	}: IProps) => {
		const recordEvent = (e: EventScheduledEvent) => {
			console.log('Event Recorded');
			onScheduled(e.data.payload.event.uri);
		};

		useCalendlyEventListener({
			onEventScheduled: recordEvent
		});

		return (
			<div>
				<InlineWidget
					url={calendlyProfileUrl}
					pageSettings={{
						hideGdprBanner: true,
						primaryColor: 'FF585B'
					}}
					prefill={prefill}
				/>
			</div>
		);
	}
);

export default CalendlyWidget;

The inline widget is working as expected but the useCalendlyEventListener is not being triggered at all?

Can anyone provide some assistance?

Style error on iframe.

Hey guys we are having a style problem.

Do you have faced this problem before?

Use without an iframe?

Does Calendly's API allow you to use the fullpage widget without an iframe? I hate iFrames =[

Please create a Changelog

Hi @tcampb

Thank you so much for working on this package! We have been using it for a while and love it.
Right now, whenever we try to upgrade between versions, we have to dig through the Github commits to figure out what was changed and how to proceed with the upgrade.

Could you please publish a Changelog (and optionally post release notes on the releases themselves)?

Thank you!

Missing location prefill

Hi,
According to this calendly support post
In order to prefill the phone field on some forms, you need to use the 'location' (not 'phone')

Can this be added to the code?

Pre-populate additional guests

Does it currently supports a way to prefill additional guests?

https://help.calendly.com/hc/en-us/articles/226766767-Pre-populate-invitee-information-on-the-scheduling-page

If not, could you please guide me to a good starting point to add this to this lib?

How to use use useCalendlyEventListener

Hello,
Is it possible to share some code examples of how useCalendlyEventListener is used in nextjs? I'm not able to find any inspirations or uses online. Thanks so much!

Install error on npm

I get an install error with npm.

❯ npm install --save react-calendly npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: [email protected] npm ERR! Found: [email protected] npm ERR! node_modules/react npm ERR! react@"^17.0.1" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer react@"^15.0.0 || ^16.0.0" from [email protected] npm ERR! node_modules/react-calendly npm ERR! react-calendly@"*" from the root project npm ERR! npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with --force, or --legacy-peer-deps npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

Could you please help me?

Lack of clarity in your readme

I think it package would be better if you put in your readme snippet of code implementing it.

I had to look inside the repository to know the real name of the component.

Because <Inline /> was not one. For example.

Embed script outdated?

I believe the embed script that Calendly uses has changed, as a result there seems to be some CSS missing related to the calendly-spinner and three bouncing dots for the InlineWidget.

Allow setting a custom iframe title

https://web.dev/frame-title/?utm_source=lighthouse&utm_medium=devtools

Background color not working with InlineWidget

When trying to change the backgroundColor param in the pageSettings argument, it does not actually change the background color.

I'm not sure if Calendly changed their API? Also, it looks like your imported external/widget.js looks to be outdated. Is there a reason you are pulling that in manually instead of just always calling theirs dynamically?

add screenshots to the readme

@tcampb
Since it is a Frontend tool, it would be great and very very useful if you can add a few screen-shots of the rendered calendar.
It will help the developers quickly understand the capabilities of the package.

Add possibility to add custom attribute to resulting iframe for Hotjar Tracking

Description

We would like to use hotjar to track movement on an embedded calendly iframe.

Hotjar has several privacy enhancements to only track activity in certain whitelisted iframes. To whitelist an iframe you have besides whitelisting the domain in the hotjar site settings also add an additional attribute data-hj-allow-iframe to the rendered iframe.

Expected Behavior

The calendly iframe is rendered including a data-hj-allow-iframe attribute:

<iframe data-hj-allow-iframe src="https://calendly.com/..." width="100%" height="100%" frameborder="0"></iframe>

Actual Behavior

It is not possible to add a custom attribute to the calendly iframe due to restrictions in the typings.

TypeScript error when importing

This is the error given:

D:/.../node_modules/react-calendly/typings/index.d.ts
TypeScript error in D:/.../node_modules/react-calendly/typings/index.d.ts(5,13):
'=' expected.  TS1005

    3 | import PopupWidget from "./components/PopupWidget/PopupWidget";
    4 | import CalendlyEventListener from "./components/CalendlyEventListener/CalendlyEventListener";
  > 5 | import type { DateAndTimeSelectedEvent, EventScheduledEvent, EventTypeViewedEvent, ProfilePageViewedEvent } from "./components/CalendlyEventListener/CalendlyEventListener";
      |             ^
    6 | import { openPopupWidget, closePopupWidget } from './calendly';
    7 | export { InlineWidget };
    8 | export { PopupButton };

Loading Icon not Dissapearing

Hi,

I have an annoying loading icon (above the curve in grey) that doesn't disappear. Any ideas on why this happens? See picture below ↓

nextjs - Calendly inline-widget throws warnings and errors on X-frame

Hi, I'm in the process of converting a page from React to NextJS. When I call the inline widget via a custom button, the console throws me some warnings and also an error:

Ignoring unsupported entryTypes: largest-contentful-paint. torben:9:17004
No valid entryTypes; aborting registration. torben:9:17004
Ignoring unsupported entryTypes: layout-shift. torben:9:17100
ERROR: Invalid X-Frame-Options header was found when loading “https://calendly.com/kinglydigitized/torben?embed_domain=localhost%3A3000&embed_type=PopupButton&background_color=ffffff&hide_event_type_details=1&hide_landing_page_details=1&primary_color=68ada8&text_color=4d5055”: 
“ALLOWALL” is not a valid directive. torben
Some cookies are misusing the recommended “SameSite“ attribute 8
Cookie “optimizelyOptOut” has been rejected for invalid domain. inject.js:1276:26
Cookie “optimizelyDomainTestCookie” has been rejected for invalid domain. inject.js:1276:26
Cookie “optimizelyDomainTestCookie” has been rejected for invalid domain. inject.js:1276:26
Layout was forced before the page was fully loaded. If stylesheets are not yet loaded this may cause a flash of unstyled content. booking_v3-2de499c38a4217ad7f4e.chunk.js:38:249
Request to access cookie or storage on “<URL>” was blocked because it came from a tracker and content blocking is enabled. 2
Content Security Policy: Ignoring “'unsafe-inline'” within script-src: ‘strict-dynamic’ specified
Content Security Policy: Ignoring “https:” within script-src: ‘strict-dynamic’ specified
Content Security Policy: Ignoring “http:” within script-src: ‘strict-dynamic’ specified
Content Security Policy: Ignoring “'unsafe-inline'” within script-src: ‘strict-dynamic’ specified
Content Security Policy: Ignoring “https:” within script-src: ‘strict-dynamic’ specified
Content Security Policy: Ignoring “http:” within script-src: ‘strict-dynamic’ specified

Here is the component for the custom button:

import { openPopupWidget } from 'react-calendly';
import { FaCalendarAlt } from 'react-icons/fa';
import { BtnScheduleContainer } from './CalendlyStyles';
export const BtnSchedule = (props, { prefill, utm }) => {
	// Calendly Integration
	const url = 'https://calendly.com/kinglydigitized/torben';
	const pageSettings = {
		backgroundColor: 'ffffff',
		hideEventTypeDetails: true,
		hideLandingPageDetails: true,
		primaryColor: '68ada8',
		textColor: '4d5055',
	};
	const onClick = () => openPopupWidget({ url, prefill, pageSettings, utm });
	return (
		<BtnScheduleContainer
			onClick={onClick}
			bottom={props.bottom}
			position={props.position}
			margin={props.margin}
			variants={aBtn}
			whileHover="hover"
		>
			<FaCalendarAlt />
		</BtnScheduleContainer>
	);
};

and the styled-component for the button

import styled from 'styled-components';
import { motion } from 'framer-motion';
export const BtnScheduleContainer = styled(motion.div)'
	position: ${props => (props.bottom ? 'absolute' : 'relative')};
	bottom: ${props => (props.bottom ? '16px' : null)};
	right: ${props => (props.bottom ? '16px' : null)};
	margin: ${props => props.margin};
	padding: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	border: none;
	border-radius: 50%;
	background: var(--grad-btn-primary);
	text-shadow: ${props => (props.icon ? 'none' : null)};
	box-shadow: var(--bsd-btn-schedule);
	cursor: pointer;
	svg {
		font-size: 20px;
		color: var(--clr-white);
	}
';

Can you help me please?

The loaded css contains generic rules

Great job here, the only issue I have is that the included CSS loaded from calendly is adding rules for body: html,body{height:100%}body{overflow:auto} I don't think this should be part of the included css

Support for Smaller Screen Sizes?

Is it possible to apply styles so the calendar widget is responsive on smaller screen sizes when using the InlineWidget? When I apply height or width css properties, I can't get rid of the vertical scrollbar.

Calendly API in React Native

Hi,

Can I use the Calendly API in react native

Sometimes it doesn't load

When I open popup with calendly inline widget very often it doesn't load. I don't know why.

InlineWidget is duplicated

I am trying to embed Calendly on my site, I have added the following code

<InlineWidget
          url="https://calendly.com/my_username/60min?month=2020-09"/>

And I get three copies of Calendly. All the copies show 60 min time slot and September as a month, they all the same.

React v18 support

Update the package to support React v18.

How to get date and time when calendly date and time selected

Hi,

Typescript Error

TypeScript error in /node_modules/react-calendly/typings/index.d.ts(5,13):
'=' expected. TS1005

    3 | import PopupWidget from "./components/PopupWidget/PopupWidget";
    4 | import CalendlyEventListener from "./components/CalendlyEventListener/CalendlyEventListener";
  > 5 | import type { DateAndTimeSelectedEvent, EventScheduledEvent, EventTypeViewedEvent, ProfilePageViewedEvent } from "./components/CalendlyEventListener/CalendlyEventListener";
      |             ^
    6 | import { openPopupWidget, closePopupWidget } from './calendly';
    7 | export { InlineWidget };
    8 | export { PopupButton };

how to get the selected date,time and event type of calendly event callback.

How to get the selected date, time, and event type of calendly event callback.

How to Hide cookie banner?

Hi,
I'm using react-calendly for a gatsby site, and it's working fine. My client wants me to remove this cookie banner for the calendly, as we're using gatsby-plugin-gdpr-cookies for GDPR Cookies.

I tried this Link

It doesn't work, So I look for other ways I found one,
openPopupWidget({ url: "https://calendly.com/-------", pageSettings: { hideGdprBanner: true, }, })

But it doesn't work either, is there any other ways to remove the cookie banner?

hideLandingPageDetails not working

Setting hideLandingPageDetails to true doesn't seem to work. Looks the same as setting it to `false.

<PopupText
  url="mycalendlyeventurl"
  text="Schedule Here"
  pageSettings={{
    hideLandingPageDetails: true,
  }}
/>

Unless this is a Pro feature only?

openPopupWidget() scrolls page to top

Hey! Great work with this component, it's so useful.

Could you add an option to disable auto-setting the overflow style property?

react-calendly/src/calendly-widget.ts

Lines 172 to 174 in 0d342eb

	void 0 === d &&
	((d = document.body.style.overflow),
	(document.body.style.overflow = "hidden"));

It's causing my main component on the page to autoscroll to the top. I added overflow: auto !important to my <body> tag for now, however that's a hack I'd like to remove in the future.

InlineWidget is re-fetched every time the parent component is re-rendered

Every time the parent component is re-rendered, the inline widget gets reloaded.

See the following example:

https://codesandbox.io/s/tender-matsumoto-fh61h?file=/src/App.js

When typing in the input above the widget, the widget gets reloaded.

Calendly reloads when trying to input on android chrome browser

Hey
I'm using InlineWidget and when opening the page in a chrome browser on android, whenever the user try to press any of the input fields (name, email, phone, etc) the widget is being reloaded automatically.

Thanks for your help

Breaks Aos?

Hi - great job on this. This is random but for some reason this breaks Animation on Scroll. If I load an InlineWidget on one page and toggle between that and a page that uses the Aos library it hides/doesn't render all my elements that were being animated on that page. Any idea what this is?

Feature Request: Date Auto-Select

I am making a schedule page on my website using the Calendly embedded widget. I don't want to reveal the event details, just the calendar so that users can schedule a demo.

Here is how it looks right now:

It would be really nice to have Date.now() automatically selected with the times revealed like displayed below to reduce the number of clicks the user does by 1 and aesthetically look better.

CalendlyEventListener Not working

I recieved this error while rendering eventlistener in Calendly
CalendlyEventListener(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null. at reconcileChildFibers (react-dom.development.js:14348) at reconcileChildren (react-dom.development.js:16762) at finishClassComponent (react-dom.development.js:17180) at updateClassComponent (react-dom.development.js:17110) at beginWork (react-dom.development.js:18620) at HTMLUnknownElement.callCallback (react-dom.development.js:188) at Object.invokeGuardedCallbackDev (react-dom.development.js:237) at invokeGuardedCallback (react-dom.development.js:292) at beginWork$1 (react-dom.development.js:23203) at performUnitOfWork (react-dom.development.js:22154) at workLoopSync (react-dom.development.js:22130) at performSyncWorkOnRoot (react-dom.development.js:21756) at react-dom.development.js:11089 at unstable_runWithPriority (scheduler.development.js:653) at runWithPriority$1 (react-dom.development.js:11039) at flushSyncCallbackQueueImpl (react-dom.development.js:11084) at workLoop (scheduler.development.js:597) at flushWork (scheduler.development.js:552) at MessagePort.performWorkUntilDeadline (scheduler.development.js:164)

That is how my component looks like.
return <div> <CalendlyEventListener onEventScheduled={onEventScheduled} /></div>

Is there any way to get the invitee info from onEventScheduled event object?

Or is there any way to get the invitee info after an event is scheduled?