在嵌入式 Calendly 小部件中安排事件時，如何運行代碼？

Question

當我使用 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;

Answer 1

如果您想在安排 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;