Button: How to open a floating form on Button widget click

[Max]

Looking for a way to open your floating form when clicking on the Button widget? We’ve got it covered!

Just add this code to the Custom JS field on the Design tab of your Button widget’s settings and you’ll be fine

const listenerBlock = (selector, callback) => {
  const initialTargetNode = document.querySelector(selector);
  if (initialTargetNode) {
    return callback(initialTargetNode);
  }

  const mutationObserver = new MutationObserver((mutations, observer) => {
    mutations.forEach(({ addedNodes }) =>
      addedNodes.forEach((node) => {
        if (node.nodeType === Node.ELEMENT_NODE) {
          const targetNode = node.querySelector(selector);
          if (targetNode) {
            observer.disconnect();
            return callback(targetNode);
          }
        }
      })
    );
  });

  mutationObserver.observe(document.body, {
    childList: true,
    subtree: true
  });
};

listenerBlock(
  '[class*="ButtonBase__ButtonContainer-sc"][buttontextcoloronhover]',
  (button) => {
    button.addEventListener('click', (e) => {
      e.stopPropagation();
      e.preventDefault();

      const formButton = document.querySelector('.es-forms-floating-button');
      if (formButton) {
        formButton.click();
      }
    });
  }
);

Note: Custom JS doesn’t function in the preview mode, so you can check the result right on your website or through the Share Link

Guys, was this solution helpful? Let us know in the comments