[英]How can I run code when event is scheduled in embedded Calendly widget?
当我使用 Calendly 安排事件时,我使用 Calendly API 令牌显示事件创建日期,但日期仅在重新加载页面后显示,而我希望在安排事件后在控制台中更新一次。
下面是代码。
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.com/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.com/user/15min"
styles={{
height: '1000px'
}}
pageSettings={{
backgroundColor: 'ffffff',
hideEventTypeDetails: false,
hideLandingPageDetails: false,
primaryColor: '00a2ff',
textColor: '4d5055'
}}
prefill={{
email: 'kanna@gmail.com',
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;
如果您想在安排 Calendly 事件时运行一些代码,您需要收听 Calendly iframe 将回发到您的主机页面的消息。 这是Calendly 的 JavaScript API 的一部分。 这是大概的代码。
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.com/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 componentDidMount behavior
return (
<div>
...
</div>
);
}
export default Calendly;
更新
react-calendly
包实际上包含一个CalendlyEventListener
,用于设置消息侦听器,以便您编写更少的样板。 这是相同的代码,但使用CalendlyEventListener
组件:
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.com/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;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.