How can I run code when event is scheduled in embedded Calendly widget?

Question

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.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: '[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;

Answer 1

If 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.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;

---

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 component:

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;