admin管理员组文章数量:1312811
When I schedule the event using the Calendly, I'm displaying the event created date using Calendly API token, but the date displays only after reloading the page, rather I want it be updated in the console once after I schedule the event.
Below is code.
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { InlineWidget } from 'react-calendly';
const Calendly = () => {
const [state] = useState()
useEffect(() => {
axios({
method: 'get',
url: '',
}).then(function (response) {
// handle success
console.log(response.data.collection[response.data.collection.length - 1].created_at);
}).catch(function (error) {
// handle error
console.log(error);
})
}, [state])
return (
<div>
<InlineWidget url=";
styles={{
height: '1000px'
}}
pageSettings={{
backgroundColor: 'ffffff',
hideEventTypeDetails: false,
hideLandingPageDetails: false,
primaryColor: '00a2ff',
textColor: '4d5055'
}}
prefill={{
email: '[email protected]',
firstName: 'Kanna',
lastName: 'Suresh',
name: 'Kanna Suresh',
customAnswers: {
a1: 'a1',
a2: 'a2',
a3: 'a3',
a4: 'a4',
a5: 'a5',
a6: 'a6',
a7: 'a7',
a8: 'a8',
a9: 'a9',
a10: 'a10'
}
}}
utm={{
utmCampaign: 'Spring Sale 2019',
utmContent: 'Shoe and Shirts',
utmMedium: 'Ad',
utmSource: 'Facebook',
utmTerm: 'Spring'
}} />
<div>
</div>
</div>
);
}
export default Calendly;
When I schedule the event using the Calendly, I'm displaying the event created date using Calendly API token, but the date displays only after reloading the page, rather I want it be updated in the console once after I schedule the event.
Below is code.
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { InlineWidget } from 'react-calendly';
const Calendly = () => {
const [state] = useState()
useEffect(() => {
axios({
method: 'get',
url: 'https://v1.nocodeapi./user/calendly/hobiiHVeoqPxvtTc',
}).then(function (response) {
// handle success
console.log(response.data.collection[response.data.collection.length - 1].created_at);
}).catch(function (error) {
// handle error
console.log(error);
})
}, [state])
return (
<div>
<InlineWidget url="https://calendly./user/15min"
styles={{
height: '1000px'
}}
pageSettings={{
backgroundColor: 'ffffff',
hideEventTypeDetails: false,
hideLandingPageDetails: false,
primaryColor: '00a2ff',
textColor: '4d5055'
}}
prefill={{
email: '[email protected]',
firstName: 'Kanna',
lastName: 'Suresh',
name: 'Kanna Suresh',
customAnswers: {
a1: 'a1',
a2: 'a2',
a3: 'a3',
a4: 'a4',
a5: 'a5',
a6: 'a6',
a7: 'a7',
a8: 'a8',
a9: 'a9',
a10: 'a10'
}
}}
utm={{
utmCampaign: 'Spring Sale 2019',
utmContent: 'Shoe and Shirts',
utmMedium: 'Ad',
utmSource: 'Facebook',
utmTerm: 'Spring'
}} />
<div>
</div>
</div>
);
}
export default Calendly;
- Added an example using CalendlyEventListener from react-calendly. Lmk if that works for you! – Dmitry Pashkevich Commented Oct 6, 2020 at 18:00
1 Answer
Reset to default 8If you want to run some code when the Calendly event has been scheduled, you want to listen to a message that the Calendly iframe will post back to your host page. This is part of Calendly's JavaScript API. Here's the approximate code.
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { InlineWidget } from 'react-calendly';
const isCalendlyScheduledEvent = (e) => {
return e.data.event &&
e.data.event.indexOf('calendly') === 0 &&
e.data.event === 'calendly.event_scheduled'
}
const Calendly = () => {
const [state] = useState()
useEffect(() => {
window.addEventListener(
'message',
(e) => {
if (isCalendlyScheduledEvent(e)) {
axios({
method: 'get',
url: 'https://v1.nocodeapi./user/calendly/hobiiHVeoqPxvtTc',
}).then(function (response) {
// handle success
console.log(response.data.collection[response.data.collection.length - 1].created_at);
}).catch(function (error) {
// handle error
console.log(error);
})
}
}
)
}, []) // notice the empty array as second argument - we only need to run it once, equivalent to the old ponentDidMount behavior
return (
<div>
...
</div>
);
}
export default Calendly;
UPDATE
The react-calendly package actually includes a CalendlyEventListener that sets up the message listener so that you have to write less boilerplate. Here's the same code, but using the CalendlyEventListener ponent:
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { InlineWidget, CalendlyEventListener } from 'react-calendly';
const Calendly = () => {
const onEventScheduled = () => {
axios({
method: 'get',
url: 'https://v1.nocodeapi./user/calendly/hobiiHVeoqPxvtTc',
}).then(function (response) {
// handle success
console.log(response.data.collection[response.data.collection.length - 1].created_at);
}).catch(function (error) {
// handle error
console.log(error);
})
}
return (
<div>
...
<CalendlyEventListener onEventScheduled={onEventScheduled} />
</div>
);
}
export default Calendly;
本文标签： javascriptHow can I run code when event is scheduled in embedded Calendly widgetStack Overflow
版权声明：本文标题：javascript - How can I run code when event is scheduled in embedded Calendly widget? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741828932a2399815.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论