tcampb / react-calendly Goto Github PK
View Code? Open in Web Editor NEWCalendly integration for React apps
License: MIT License
Calendly integration for React apps
License: MIT License
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.
Hi,
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
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?
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?
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?
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?
How to get the selected date, time, and event type of calendly event callback.
Does it currently supports a way to prefill additional guests?
If not, could you please guide me to a good starting point to add this to this lib?
Hi,
Can I use the Calendly API in react native
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" />
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.
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.
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?
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.
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>
It is not possible to add a custom attribute to the calendly iframe due to restrictions in the typings.
@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.
When I open popup with calendly inline widget very often it doesn't load. I don't know why.
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.
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.
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?
Does Calendly's API allow you to use the fullpage widget without an iframe? I hate iFrames =[
CalendlyEventListener
can be replaced with similar hook useCalendlyEvents
, and it can be useful
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.
Or is there any way to get the invitee info after an event is scheduled?
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?
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?
Want to modify some css or javascript that we are getting from other web page as i doesn't see any props here
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":{}}
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?
Update the package to support React v18.
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
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 };
in nextjs it gives me this error
@tcampb
any help?
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?
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.
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.
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>
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 };
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!
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
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!
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/
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
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.
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?
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.
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.