如何在嵌入式Calendly小部件中调度事件时运行代码？
如何在嵌入式Calendly小部件中调度事件时运行代码？
提问于 2020-10-06 09:34:44
当我使用Calendly调度事件时，我使用Calendly令牌显示创建的事件日期，但是该日期仅在重新加载页面之后显示，而是希望在调度事件后在控制台中更新一次。
下面是密码。
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;回答 1
Stack Overflow用户
发布于 2020-10-06 14:53:52
如果您想在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;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64223129
复制相关文章
相似问题
腾讯云开发者
