Calendly Integration with retool

App Building
1

I want the client to SEE a calendar view from Calendly with ALL appointments from the week and beyond, and click on appointments for details if they want.
Clanberry provided the embed code, but when I inserted it into the HTML component, nothing loaded. There is also an API available, but I'm having trouble figuring out how to use it.


<!-- Calendly inline widget begin -->
<div class="calendly-inline-widget" data-url="https://calendly.com/wrlakshan" style="min-width:320px;height:700px;"></div>
<script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js" async></script>
<!-- Calendly inline widget end -->
2 Likes
2

Hi @Rashmika_Lakshan - thanks for reaching out.

Embedding is probably the way to go if you want your users to see and interact with the Calendly widget. Generally speaking, the API would allow you to interact with your data on Calendly while using the Retool interface.

I'm able to successfully embed a calendar by using the previous generation of our "Custom Component", which allows you to write HTML directly within an iframe. I've included the embedded code that seems to work for me:

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://assets.calendly.com/assets/external/widget.js"></script>

<div id="react"></div>

<script type="text/babel">
  const MyCustomComponent = ({ triggerQuery, model, modelUpdate }) => (
    <div>
      <div id="calendly-embed"></div>
      {Calendly.initInlineWidget({ "url": 'https://calendly.com/darren-retool', "parentElement": document.getElementById('calendly-embed'), "prefill": {}, "utm": {} })}
    </div>
  );

  // This is the entrypoint for the React component.
  const ConnectedComponent = Retool.connectReactComponent(MyCustomComponent);
  const container = document.getElementById('react');
  const root = ReactDOM.createRoot(container);
  root.render(<ConnectedComponent />);
</script>

Note that you will have to check the "Storage and cookies" box in order to allow Calendly to work properly:

image

I hope that helps! Feel free to follow up here if you have any additional questions.