https://discord.gg/botpress logo
Join Discord
Powered by
Calendly with Botpress
# 📖tutorials
f
Hi there You will learn how to integrate Calendly with Botpress. Start out by signing up at [Calendly ](https://calendly.com) Visit the Event Types tab on your [Home page](https://calendly.com/event_types/user/me). Find the team or user whose landing page you'd like to share. Select the gear icon and then select Add to Website. Then, choose the type of embed that you prefer and [adjust the appearance](https://help.calendly.com/hc/en-us/articles/223147027-Embed-options-overview?tab=general#7) to fit your site. Find the URL in the embed code, would look like this https://calendly.com/hcai-r2a. Replace the URL in the JavaScript section of the [JSFiddle](https://jsfiddle.net/Decay15/3ah6ek4c/19/) with your own URL. Create a new bot on Botpress or use an already existing one. In the bots flow add the Send Custom Event card. This will send the event to the website which will display the Calendly booking flow so make sure that the place in your flow makes sense. In the Send Custom Event Card add {{event.conversationId}} to the Conversation ID and add a payload. I am using this payload
Copy code
{
  "popupCalendly": "Make it popup"
}
 but you can make adjust it to fit your needs. Publish your bot and once it has been published go to the Webchat integration -> Pre-configured and copy the Embedded code. Replace it with the code in the [JSFiddle](https://jsfiddle.net/Decay15/3ah6ek4c/19/) All there is left to do is just to test it, Happy bot building🚀 Useful links: Calendly: [Link to Calendly ](https://calendly.com) The code: [Link to JSFiddle](https://jsfiddle.net/Decay15/3ah6ek4c/20/) Youtube video: [Youtube tutorial](

https://www.youtube.com/watch?v=B9EGSZGriJc▾

)
j
decay can you please show us an example of how it looks ?
f
You can check out the JSFiddle I have attached to see it
I am pretty sure I also showed it in the YouTube tutorial
c
People will be super happy to have this tutorial ! Good work 🙂
s
Hey, this is pretty neat. Just a question, from what I'm seeing I guess this won't work when deploying to telegram will it?
f
No, unfortunately not 😦
I am not sure if telegram supports custom widget
I am working on an integration right now but I have actually noted down to look into adding Calendly to other integrations and to try and make it easier to use with the webchat
s
Excellent, yeah that would be great. I'm planning on building out an AI lead magnet (3 days of free use where I provide value), with the goal to book in calls for qualified leads in the back end.
f
Ohhh, that sounds really nice. I can see how Calendly would be useful then.
h
I'm probably missing something ultra basic as I'm still pretty new to a lot of this. I think I have every part put together correctly now besides the fact that the Send Custom Event errors out. I have {{event.conversationId}} in the conversation ID {"popupCalendly": "Make it popup"] in the JSON Payload ----------------------------------------------------------------------------------- This is the message from the log An unexpected error occurred. [Error, Internal request failed (Error ID: err_20240202152025x855D07B0)] {"scope":"dm"} -------------------------------------------------------------------------------------- My flow is just to go from initial choice node of what option to learn about at start of chat, which if going into the 'book a consultation' node from that choice, should lead to this send custom event. I've copied the code from Calendly okay, I've inserted the JSFiddle code into my sites Embed block (with relevant embed info pasted in instead of default from @fresh-fireman-491 ) Just a bit lost from here on why the send event is not working.
f
Hey Omni I am logging off in just a second but I will be back in like 45 min. Can you try and use your bot in the JSFiddle. Just to make sure that parts works so we can exclude that its not the bot that is the problem.
If you could try and re do everything in the JSFiddle step by step and test everything it will be easier to know what the problem is.
h
oh thanks for that I'll try that now
let me know what you are looking for out of JSFiddle specifically. My bot loads and works as expected, when getting to the send event flow the bot just says Oops! Something went wrong. Please try again later. Does this mean it is the bot itself that is the problem as it's not even working inside JSFiddle?
if there's some other log or troubleshooting let me know when you are back thanks for the help
to do with event type and trigger possibly?
probably same thing from the log but just in case it helps as well. I can see in video you just use standard nodes so I left the trigger stuff alone lol
f
Hey Can you send me a screenshot of your Send Custom event card so I can see what you are sending.
h
convo ID says 'evaluates to convo-1
'
f
I think that yes it is the bot
If you initiate this bot https://jsfiddle.net/Decay15/3ah6ek4c/20/ does it pop up like it should?
h
Yeah that bot the pop up works fine
Not sure what I did wrong with my bot after watching video
f
If you just replace this part
Does it still pop up
You can find it in the pre-configured section
h
I only replaced that part in JSFiddle
and it's the same result of bot loads but pop up does not work
f
This is the bot that I used for it
calendly-popup-2024-feb-02
Can you copy and paste everything in the Send Custom Event card to your own
And then publish your own bot and try again
h
ohh
even your bot gave a similar error to me as well now. let me check if its related to my browser cause I have a lot of pop up blockage with a modified firefox
hmm 1 moment just trying a couple of things but at first glance didnt change anything
f
I just tried with the bot and it works just fine
h
yeah your one is fine dont mind me
ill probably just have to start over on my bot lol
f
Didn't you say that it gave an error?
h
just in botpress itself. on JSFiddle its fine
i was testing it wrong when I said that aha
very weird. I'll have to come back to this tomorrow. Sorry to use up your time. Tried to replicate your bots set up as close as I could with single choice card and from the option link to the node with the send custom event card and copied 2 fields exactly. Just never works lol but as long as I load your bot in fresh as export and run it through JSFiddle that one works okay.
just very late in Australia now (very early rather I guess) but i'll come back to you if I get anywhere closer lol
ok I got it to work when I moved the send event node way earlier not after having already gone through a few selections of chat. So something inbetween is messing it up haha.
f
That is nice to hear I am away for the weekend so I will most likely not have a lot of time to help, but if you want you can send me your bot and I can test it and see if I can figure it out. You should of course delete all sensitive/private information first
h
hm it might have been having use KB to answer enabled on a multiple choice block before that point. but not 100% sure. that seems to have fixed it after rearranging some nodes around. appreciate that offer a lot ty.
that's awesome thank you so much for the tutorial I like where it's at now 🙂
if anyone else sees this and has trouble 😛 just try to shit test every node/level before the calendly prompting card in your whole flow I guess lmao
oh and one more thing when you have time again haha this works 100% as I want inside of JSFiddle but it's not popping up calendly when I embed the bot onto my website and use the bot on the website. I've copied over all the HTML to embed the bot from JSFiddle, but I'm not so sure on the javascript part if I need to include that anywhere on my site (few random things i tested didn't do anything). image i've posted in this message, is that all I'm meant to have in the embed code?
cause then will be a seperate job of figuring out why it works on JSFiddle but on embedded/hosted site
f
You have to include the JavaScript. Take a look at this https://jsfiddle.net/Decay15/3ah6ek4c/26/
h
ahh
i thought something like that but couldn't get the formatting right
ty
f
You are very welcome!
h
legend 🙂 worth staying up all night aha. this should prove all very useful whenever I have to do more embedding
j
good tutorial decay !!!!
is there anyway if the user fills out the information in calendly, it gets saved into a variable ?
f
Unfortunately not as the widget pops is from Calendly and not made in Botpress. Calendly has an API so you could make an API call and get the latest meeting booked but this would be messy when multiple people book a time at the same time.
m
Did you manage to get it sorted? Also check if you have an ad blocker browser extension or try incognito
h
yeah have it all integrated now with calendly thats all good
h
Hey Decay, This is really good, thank you so much for sharing it with the community! A few quick questions, these are more based on Calendly not Botpress so not a problem if you're not sure: 1 - Can you determine which fields are needed to be filled for someone to book a meeting? Eg in my case I would require a phone number and a URL to be provided for the meeting 2 - Can you somehow add a variable from earlier in the workflow into notes or a field in in Calendly booking?
f
Hey Konnect👋 I don't have a lot of experience with Calendly to be honest, I just got asked if it was possible to do it. I did some digging but I haven't been able to find about determining which fields are needed to be filled. I did find something which I think can answer you 2nd question. I found this article https://help.calendly.com/hc/en-us/articles/223147027-Embed-options-overview?tab=advanced#4 which I think can be used but you would have to send the information to the website with a Send Custom Event card and then use it from there.
h
Thanks Decay! I just found this page which answers question 1 🙂 https://calendly.com/blog/guide-calendly-custom-questions Cheers for the link about question 2, you're right I think it could be possible based off that, but in my case it'll probably just be easier to add it as a field in calendly again haha. Appreicate the help 🙂
f
Ahhh amazing, thank you for sharing it here!
b
Heyy guys, I have a question
So this is the mail I got when fill the form of your chatbot @fresh-fireman-491.
Do u know if I can custom this email
or if it can be on spanish at least
f
While searching about that I came across this video:

https://www.youtube.com/watch?v=Yc41OQKFjZg▾

6:14 Add custom questions 8:23 Add you logo to the booking page This should work even though the video is 2 years old. This video is also a great one to watch:

https://www.youtube.com/watch?v=-CnUA7wvGEo▾

Article about the same thing: https://help.calendly.com/hc/en-us/articles/360058831054-How-to-use-your-own-email-to-send-Workflows-emails#How-to-send-workflow-emails-from-your-Gmail-account-for-existing-workflows
b
@fresh-fireman-491
f
Randomly came across this amazing video

https://youtu.be/e3fcAxC4HA0?si=a3EeF6y40Sfd_Yha▾

I would recommend it to everyone, that is interested in using Calendly with Botpress, to watch it.
h
Hey Decay! I am finally around to integrating this, thanks again for the awesome tutorial! 👏 It works perfectly in JSFiddle, but the Calendly popup never appears when it is on the website. What should I be looking for to debug this?
f
Hey there, All of the JavaScript code from the JSFiddle should be inside JavaScript code here in your HTML code
Like this
If that is not the issue let me know
h
Thank you. That is different to what I had so I was hopeful but I have changed it and it still doesn't want to open to popup on the website, but works in JSFiddle
f
Are you using the same bot?
On JSFiddle and your website
h
Yeah, I am copying the Embedded code from botpress and pasting it into lines 15 and 16 on JDFiddle (replacing what is there)
f
Alright.. Could you share the non working code with me in a DM?
h
Of course! Thank you 🙂
b
Let me know when this can be done in botpress 🥲🤝
f
Will do, might be worth it to create a post in #1111026806254993459 about it also?
g
@fresh-fireman-491 So I've tested this, I just have 2 problems if we can consider them problems. They aren't really bad. 1. When I quit the bot while it's sending the calendly appointment schedule and go back to the bot, it skips the calendly schedule and go to the next node 2. There's no X on the window open (so the user might be lost on how to close that window)
f
I am not sure if that can be fixed as I think its issues on Calendlys side.
t
We have to put all of this in the embedded of webchat=> pre-configured of botpress ? Because I can't edit this part of the bot
f
The code should be added to the JavaScript part of your code. Either a JS file or in your HTML file in the part.
That is just to show you how it can look
w
Hi Decay, the video you've shared is exactly want ive been trying to do. but i keep getting an error 400. would you care to assist?
f
Hey there, I am away with my class these days so I won't be able to do much, but maybe you could describe the issue a bit more and I can think of what might be causing it
c
decay I tried integrating calendly , It is working as expected in JSFiddle But when I publish my bot calendly popup is not working. send custom event card input is : {{event.conversationId}} - which evaluates to convo 3 Error : Error while executing integration action: Conversation "convo-4" doesn't exist for bot "799de54f-668e-4f14-b2b1-767f05gb3462". The action error will be ignored since you are running in the Studio. Need Help ! Regards, Anand
f
Hey there, You should do it on a website and include the example code from the JSFiddle. I can't work without it
s
There's now a Calendly integration built directly into botpress you can download from the Hub: https://botpress.com/integrations/simplygreatbots-calendly
w
yeah testing on this and got the same @crooked-oyster-9382 , basically test a published version, not in the studio
r
@fresh-fireman-491 does it works in whatsapp?
f
No. You can't open a widget in WhatsApp.
e
Hello! Sir @fresh-fireman-491 I have follow you for this but my bot is not work after clicking "Yes". Basically, I am using Code snippet in WordPress for integration. Please Guide me How can I make it successful. Code: window.botpressWebChat.onEvent( function (event) { if (event.type === 'TRIGGER') { Calendly.showPopupWidget('https://calendly.com/sarimshahzad588/30min'); } }, ['TRIGGER'] ); https://cdn.discordapp.com/attachments/1199029983100813322/1284881209675223141/Screenshot_2024-09-15_185003.png?ex=66e83e60&is=66e6ece0&hm=646b73f677e05018e2b03f3816695ba349d93f3325b7d9e8f010ff550ce89e72& https://cdn.discordapp.com/attachments/1199029983100813322/1284881210035671050/Screenshot_2024-09-15_191705.png?ex=66e83e60&is=66e6ece0&hm=433cde44e8dcf09f35421b5ff6ee1ac641793dde95498684705c4a1796e26be6&
@fresh-fireman-491 its also not works on website
f
Hey there, This was working for the V1 of the webchat, and I believe that the issue is there is another way of handling events with the webchat V2. I am unfortunately not in a position right now, where I have the extra time to update this, or any of my other tutorials. If manage to get this to work with the webchat V2, then please update this thread. There is a Calendly integration that you can use, which still works, right @straight-wolf-37371 ? Here is the link for it on the hub https://app.botpress.cloud/hub/integrations/intver_01J13FT2Q337MPYTCVD3F86CWB
e
Thank you. I will try
And its not poping up on same site I want Pop up. How can I do it?
f
I am not the right person for that :). You can take a at this help post https://discord.com/channels/1108396290624213082/1244757934542553108, and if you are still facing issues then feel free to create a post in #1111009377525186570
e
Sure! Thank you
f
You are welcome, and best of luck
r
179 Views
PreviousNext
Powered by