Embed cal.com pop up via element click

Design help Custom code
1

Hi everyone,

Trying to open a calendar (cal.com) as a dialog when someone clicks an element.

This requires the following attributes on the element used to open the dialog:

  // `data-cal-link="userName/intro"`
  // data-cal-namespace=""
  // `data-cal-config='{"layout":"column_view"}'`

The issue is that Webflow does not support double quotes. Any ideas on how to make the latter attribute work?

Thanks a ton!

2

Potentially just using an HTML embed could work? Then you can customise it completely.

If it’s a button element you can just do something like
<button class="button" id="buttonId" data-cal-link="userName/intro" data-cal-namespace="" data-cal-config='{"layout":"column_view"}'>Button Text Here</button>

Otherwise, I there shouldn’t be a difference between " and ’ when it comes to data attributes, I think you can just put either in and it should work :slight_smile:

3

Hi Tom, thanks so much for your help!

The HTML embed definitely works, though we’d have to sacrifice animations.

Webflow seems to be a bit more picky re/ " and ', which I’ve not been able to get to work properly.

1 Like