How to add attributes to an element

Hi there,

If you don’t have GB Pro, it will require some PHP code to do a str_replace().

1. Set the button type to button.

2. Add a CSS class to the button in the advanced panel, eg. my-custom-class

3. Add this PHP code:

add_filter( 'render_block_generateblocks/button', function( $block_content, $block ) {
    if ( 
      ! is_admin() && 
      ! empty( $block['attrs']['className'] ) && 
      strpos( $block['attrs']['className'], 'my-custom-class' ) !== false 
    ) {
        $custom_attributes = 'data-cal-link="larryjames/consultation-meeting" data-cal-config=\'{"layout":"month_view"}\'';
        $block_content = str_replace( '<button', '<button ' . $custom_attributes, $block_content );
    }
  
    return $block_content;
}, 10, 2 );

Thank you for your help Ying. I do have GenerateBlocks Pro.

I have this code loaded on the page using a hook in Elements.

<!-- Cal element-click embed code begins -->
<script type="text/javascript">
  (function (C, A, L) { let p = function (a, ar) { a.q.push(ar); }; let d = C.document; C.Cal = C.Cal || function () { let cal = C.Cal; let ar = arguments; if (!cal.loaded) { cal.ns = {}; cal.q = cal.q || []; d.head.appendChild(d.createElement("script")).src = A; cal.loaded = true; } if (ar[0] === L) { const api = function () { p(api, arguments); }; const namespace = ar[1]; api.q = api.q || []; typeof namespace === "string" ? (cal.ns[namespace] = api) && p(api, ar) : p(cal, ar); return; } p(cal, ar); }; })(window, "https://app.cal.com/embed/embed.js", "init");
Cal("init",  {origin:"https://cal.com"});

  
  // Important: Please add the following attributes to the element that should trigger the calendar to open upon clicking.
  // data-cal-link="larryjames/consultation-meeting"
  // data-cal-namespace=""
  // data-cal-config='{"layout":"month_view"}'

  Cal("ui", {"styles":{"branding":{"brandColor":"#000000"}},"hideEventTypeDetails":false,"layout":"month_view"});
  </script>
  <!-- Cal element-click embed code ends -->

The Button Type is set as “Button”

I also have set the custom Attributes from the Advanced panel, but the pop up does not work.

I don’t understand why the value of the data-cal-namespace=”” is blank. Pehhaps that is why it does not work.

Hi there,

Could you reach out to us in generate.support instead?

These features you’re using are from GB Pro and GP Premium which we can’t provide support for here.