Adding custom (Calendly, NeetoCal, etc.) calendar popup to Bricks?

How To
1

So trying to add a custom popup for a scheduling calendar I have.

How does one go around to adding this? I’m trying to navigate adding this custom code popup to Bricks, but every single tutorial or guide I see is just to make popups, I don’t want to make my own custom popup I want to make this calendar below appear when I click on a button.

<!-- NeetoCal element-click embed code begins -->
  <script>window.neetoCal = window.neetoCal || { embed: function(){(neetoCal.q=neetoCal.q||[]).push(arguments)} };</script>
  <script async
    src="https://XXXX.neetocal.com/javascript/embed.js">
  </script>
  <script>
    neetoCal.embed({
      type: "elementClick",
      id: "XXXX",
      organization: "XXXX",
      elementSelector: "#open-popup-button",
    });
  </script>
  <!-- NeetoCal element-click embed code ends -->

Hoping someone can help me thanks.

2

So does no one know the solution to this? Trying to execute code but nothing happens here.

3

What interactions do you have on your button within Bricks?

4

If you do not have it working yet, I do and can show you how, just let me know.

Cheers

5

Hey man,

Did you create a button and add the id #open-popup-button to it?

also, where did you place the code?

6

I have the interaction set to trigger on click, to “show element”, target “popup”, and the popup being the template popup (that has the code in it in a code box, everything is approved and signed).

7

The code is in a code box and it’s signed.

8

Hi Shingen,

So the video you posted in the other topic worked, but one more question: when I put the code box (same settings as you in the video) it pushes my button element aside, how do I stop it from doing that?

Video if anyone stumbled on this topic in the future: Watch 2025-03-03 13-37-17 | Streamable

9

And another question, how do you keep your button from changing on your example video? When I click my button it turns into very small white text and the button disappears. The calendar comes up but only after the second click.

10

Without and url, I could not tell you. I would need to see what is happening in order to give you feedback.

If the colors are changing, that to me sounds like some css is being applied. If the button is moving, again seems like css is the cause.

Cheers

11

You do not want to use the popup code snippet from NeetoCal, as it will cause issues.

See here: Watch 2025-03-03 14-29-22 | Streamable

Plus the videos shows I have done nothing to my button, it is a plain as vanilla ice cream. =]