Calendly plugin / Webhooks

Hi everyone!

I downloaded the Calendly plugin and also inserted my API key already. But there doesn’t seem to be a feature to actually create that on the page. Or am I missing something?

Cheers,
Alex

@AlexDaresTo,

I’m beginning to look investigate the ability to embed Calendly into my app. Did you come up with a solution?

Unfortunately I haven’t. Have you found somethign by now? :slight_smile:

This isn’t near the top of my list yet. Hopefully I’ll be able to revisit this in a few months.

Did you guys work it out? Calendly offers an HTML button that triggers the Calendly popup with all the usual functionality, which opens right within your app if you put it inside an HTML element. My code looks like this:

    <!-- Calendly link widget begin -->
<head>
<style>
a {
background-color: #E37823 !important; /* Green */
  border: none !important;
  color: white !important;
  font-weight: 500 !important;
  padding: 15px 32px !important;
  text-align: center !important;
  text-decoration: none !important;
  display: inline-block !important;
  font-size: 16px !important;
  border-radius: 30px !important;
}
</style>
</head>
<body>
<link href="https://assets.calendly.com/assets/external/widget.css" rel="stylesheet">
<script src="https://assets.calendly.com/assets/external/widget.js" type="text/javascript"></script>
<a href="" onclick="Calendly.showPopupWidget('https://calendly.com/learnbook/chat-with-richard');return false;">Book a meeting</a>
<!-- Calendly link widget end -->
</body>
1 Like

Thanks, Richard.

I’ll bookmark this for when I get back to this in my app.

Cheers!

This is great. Do you know if there is any way to change the language from the Calendly API?

Hmm not sure, never tried to change the language. Might it be defined by the user’s system language? Or your Calendly account settings? Sorry I can’t be of more help :frowning:

Don’t worry! I’ll dig deeper directly with Calendly’s customer support :+1:.

hi, but what if I want my users to use Calendly? I mean, in your use case you set up a Calendly for your personal account. How my users can connect their Calendly accounts?

1 Like

Like you want your users to be able to display their own personal Calendly on a page in your app? If that’s what you’re asking that’s a cool idea. What I’d do is : add an HTML element to the user’s page where you want their Calendly to display. The content of the HTML element is dynamic, and comes from a field in the User data type you can create called “Calendly embed” (text). Put a guide on your app about where users need to go in their Calendly to get the embed code, and add an input to your app for them to paste their embed code, which then saves that code to the “Calendly embed” field, and displays that code in the HTML element on their personal page.

Actually, I need the following use case:

I have 2 type of users: customers & freelancers. Freelancers provide offline services, so these services must be done in a certain period of time.

So, when customer comes to my app, then he goes to create a task. I want customers to have an ability to use Calendly and set in their Calendly time when they are available to get freelancer’s services.

At the same time, I want freelancers to have the ability to see customer’s preferred time to get freelancer’s services. Additionally, I would like the freelancer to be able to create an event(within time customer specified for this task) in customer’s Calendly after customer accepts the freelancer application.

Also, I guess I would need a feature that would give customers the opportunity to create an event in their Calendly, that also would invite the chosen freelancer into this event.

Have you faced something similar earlier? Would it be hard to build in Bubble?

So, my users would need to go to Calendly and copy their API key?

Is it possible to show a Calendly calendar on the page instead of using a button + pop-up?

You’ll need to develop a plugin or use the “Api Connector” plugin from Bubble. It looks pretty straightforward : https://developer.calendly.com/docs/test-authentication-token

So yes you’d need to show users how to find their Calendly API key, not too difficult. They put their API key into your app in an input that saves it to a “Calendly API” field in the User data type. You then use this as dynamic data in the API calls you make to add events, check availability, etc.

Why current plugin does not fit me?

I think the current plugin doesn’t allow the API key to be dynamic, so you’d enter your API key but your users wouldn’t be able to enter their own ones for their personal Calendly accounts.

So the only thing why I need custom code is API keys for each user dynamically, am I right? Should I do it on my own? I am a little bit familiar with coding but much less than a junior specialist.

hey! did you manage to figure it out just yet?