https://discord.gg/botpress logo
Join Discord
Powered by
Calendly same window pop up - My method
# 📖tutorials
b
The integration of Calendly popping up ín the same window had been doing some rounds, so I wanted to share how I got it working 1. I Built a workflow where a user selects "meeting" 2. Then I placed a send custom custom event card. On the right side where you got to fill parameters I left it as the default on conversation id (i.e {{event.conversationId}}) and then on the json payload I entered { "action": "showCalendly" } 3. On your webpage where you are hosting it, you have to modify your botpress default code. There you have to add the Calendly pop up embed. Then the most important thing is now to listen to your send custom event card. I used a code that is something like this // Listen for the custom event to show the Calendly widget window.botpressWebChat.onEvent(event => { if (event.type === 'TRIGGER') { if (event.value && event.value.action === 'showCalendly') { const calendlyDiv = document.getElementById('calendlyDiv'); if (calendlyDiv) { Calendly.showPopupWidget('YOUR OWN CALENDLY LINK'); } } } }, ['TRIGGER']); This should work, as it worked for me. Now please do not ask me to explain what these means. I have no clue, since I am not a coder. I went back and forth with chatGPT plus botpress inbuilt execute code cards and just read through their documentations. I think the documentation really helps if you read word by word. Cheers!! Btw I am struggling on another topic and if a coder would like to help me, please do. I do not want to spend another 10h 😄
b
You’re a G
What do you need help for?
I’ll try your method tonight
n
Thank you so much for that!
n
Hey man, thanks for sharing!! @blue-electrician-51557 I wanted to ask you if you have included this code in your main webpage code or another file? Would it be possible to share this code or guide me a little more 🙂 Still trying to figure it out here... 😅 I would also be down to try and help you with your other problem if you could describe this.
b
Main webpage code, from botpress you will get a configurable code with which you can load into your webpage right? That is the code you have to add your Calendly pop up code + the code I gave you on the first post (listen for...)
b
@blue-electrician-51557 am I missing something? The popup doesn't appear
The code is an HTML element I added to my website
n
You should use the configurable Botpress script and insert the code inside, since it is a Js.
b
Why should the configurable script change the popup action?
I know it's a JS, but it's inside a script tag
n
No, the trigger is inside the Botpress Script so that they work together
With your Website
b
It's the same HTML code
But I don't put them in the same script. And it always worked
n
If you want to ad effects and stiles or actions to Botpress chat then you use the configurable script and ad them inside there because it's the same Js action script.
It's this way, and I don't know how you did it otherwise, can't imagine that it works.
b
Why shouldn't it work? There's no reason to put them in the same script tag
n
Like the chat bubble that appears saying "Hey I am here to help if you like" is a pop up that is a script and that goes inside the Botpress script.
b
I'm sure it works, I have a custom Event that redirects to a URL
And I put the trigger in a separate script tag. It works fine
n
Yes there is reason since the Botpress script defines Position and Action specific to the Botpress chat. So if you ad another script that has to be connected to something. Or a specific element.
b
But that's not an action inside of the Botpress chat. It's an action in the website page that shows a popup
n
Yeah that might be. But it has nothing to do with Botpress
It is on click
b
Let's wait for @blue-electrician-51557
n
Ok, do what you want.
b
He managed to do it, let's hear his take on it
n
See you
Hey @brainy-summer-1041 do you see the action of the Script? In the code I mean. Can you see that it works with window.botpressWebchat.onEvent
Then it follows with: (event => { if (event.type === 'TRIGGER')
The if statement is in red what means there is already a something wrong in the code or the assignment to it
Check it out for yourself.
And yes it is an action inside the botpress chat since already in the beginning of the Script it says. window.botpressWebchat.onEvent
b
So, why does it work?
n
Sorry, if it seams that a argue, isn't meant to be, I just sharing my thoughts.
You made it work for you?
The way you show?
Read as well the point 3. In his tutorial.
That says clearly: 3. On your webpage where you are hosting it, YOU HAVE TO MODIFY YOUR BOTPRESS DEFAULT CODE. THERE YOU HAVE TO ADD the Calendly Pop Up
Be sure @brainy-summer-1041 it's the last time I will try to give you help.
b
Man respectfully, you’re not helping
n
@narrow-agent-91470 Is this what you mean by placing the code inside of the botpress configurable code ?
or should I add this in a new script below the botpress script ?
n
Yeah you got it right.
Does it work? The code shows that the actions are all available.
Please give feedback
I see you have your bot as a Section declared. Doesit work for you?I never tried that out.
n
Not yet at the moment, I still got the basic botpress error: "something went wrong..." I'll try removing my bot and the calendly code from the section and try it again.
n
You should actually put it below the footer section, just before
Because it's js Script, it's for my knowledge the only place you can put.
It's a simple HTML rule
That's why I was surprised to see it in a section
The other way around would be like putting it as: iframe
I think am not sure about that last statement of me😅
n
All right, thanks for the tips and feedback !! I'll try it out in a minute 🤝
We are getting closer... 😅
Right now it is already there when I load my website,
All right babyyy, it works right now, thanks for the help @narrow-agent-91470
@brainy-summer-1041
Here is the file with my code
basic-website-copy
n
Great, I am happy to hear that. 🥳
Is the small bubble that says powered by Calandly on purpuse there?
n
Do you mean this ?
Still need to delete it...
n
I mean this: Boek uw afspreak powered by Calendly
the wiidged
n
Ow yeah, it was an accident, it is deleted from my code now👍
n
I just ask for curious
n
Nor problem, all questions are welcome 🙂
n
I would else explained how to get it away
n
Thanks anyway for that
n
You are great
Does it pop up inside the chat window, I mean the calendly pop up.
Did you try?
n
Yess, I'll make a quick video
n
I am just working on something else and didn´t try
n
ow no, not inside the chatwindow I mean
I'ts just like on the picture, but not inside the chat itself
would you like a video or not needed ?
n
this you mean
n
yes
n
ok i see already
not needed
thank you
n
all right, no problem
n
But maybe for the community
n
True, let's do it
n
so they know
n
I'am going to make a whole video about it later today I think, just a quick 3-5 min video showing the process
But first I need to install some screen recording stuff
n
I like that
b
Hope you guys figured it out. My coding skills are zero so I might find it hard to explain. But if you want to add me as a collaborator I can do the same way I did it
n
@brainy-summer-1041 wanted that you explain to him
n
You regarding html code and website's I'am also basically at zero...
yeah*
n
actually it was easy to understand the way you explained and the code you provided
thanks for that one, again
n
Indeed, really good actually, I think you should just carefully read it a few times and see you don't miss anything
Yet it was hard xd
n
Or just follow up with each line and sentence
b
Okay I will actually add another one feature and let you know about it. It is kind of cool as well.
n
anxious to see
I can provide the code for this, pop up,
@narrow-intern-74654 @blue-electrician-51557
That is set up to Pup up on scroll
But can be made to Pop Up after certain time
b
Can you share your HTML code?
Censor your Bot info if needed
By the way, managed to do it with iFrame. Not a popup, but still very cool
c
Thank you so much for sharing this tutorial with the community @blue-electrician-51557 !
@freezing-carpenter-9818 check this out!
n
@narrow-agent-91470 Interestingly done, haven't seen one yet that works on scroll, would love to integrate this my own!
@brainy-summer-1041 here I also shared my code
happy to help with questions or anything
n
b
great work @narrow-agent-91470 🎉
n
Thank you, appreciate your feedback ✅
n
Thank you! @narrow-agent-91470
n
I am thankful for the great community
c
Community is 🔥 @narrow-agent-91470 you are right!
n
The team too
c
teamwork makes the dream work ❤️ 😍
f
thank you for tagging me!
Hello all. Thanks for this @blue-electrician-51557, It works well. Just a slight issue, was wondering if anyone else has had this issue. 1. i am using a trigger that opens the webchat and start the converstion. However this is stopped working since adding the custom event trigger. are they clashing, is there a way around that? 2. When i initiate the webchat by clicking the icon i get a short load time with a spinning loader in the center of the webchat, this also didnt happen before, is anyone else getting that?
c
Of course 🙂
b
Hmm quite hard for me to decipher since I did not have those. I just had normal conversation starter ..
f
Ok, I’ll have a look further into
n
I suppose it is because both are triggers , but this one is called inside your js script and canceles this way the botpress chat trigger.
c
Hey feel free to open a new thread in #1111009377525186570 !
q
@blue-electrician-51557 hi brother, what if i want to show the user a page on my website?
a
Apparently, this only works for v1. I was able to recreate this using v2. My problem is my Calendly node is not recognizing any triggered events. window.botpress.on('customEvent', (event) => { console.log(event); if (event && event.action === 'showCalendly') { Calendly.showPopupWidget('https://calendly.com'); } });
32 Views
PreviousNext
Powered by