Floating Pane Button

Ask the Community Customization
1

Hello,

I use a Carrd website and have embeded the plugin in properly to the page. I am trying to make the Carrd button instead of the elfsight button to open the form as a floating pane and it is not working. Suggestions?

2 Likes
3

Hi there, @Erb_Rose :waving_hand:

Have you tried to follow the steps described in this guide?

If this solution didn’t work for you, please send me a link to the page, where your widget is installed and specify the button you’d like to use as a form trigger. I’ll be happy to check it for you :slightly_smiling_face:

1 Like
4

Hey Max!

I followed the instruction and could not get it to work. It is what i was working on previously but had troubles.

Here is the link: https://test108.carrd.co/

I am wanting the “Request a Quote” Button to use the elfsight floating pane form!

Thanks so much :slight_smile:

2 Likes
5

I see that you’ve applied the attribute data-elfsight-show-form="WIDGET_ID" to both buttons (Request a Quote and View All Finishes), because they have the same ID:

image
image1686Ă—747 293 KB

Could you please create a unique class/ID for the Request a Quote button and apply the `data-elfsight-show-form=“WIDGET_ID” to this button only?

If you’re still facing difficulties, we’ll need temporary access to your website’s backend. This article explains how you can share it :wink: - Providing Access to Your Carrd Website - Elfsight Help Center

Let me know once it’s shared and we’ll start working on your request!

1 Like
6

I have provided you access to support@elfsight.com

Looking forward to the end result, Max!

2 Likes
7

Thank you!

I’ve forwarded your request to the devs and will update you once it’s completed :wink:

1 Like
8

Thank you!

2 Likes
9

Hi there, @Erb_Rose :waving_hand:

Thank you for waiting!

We’ve implement the form triggering on the button click with this script added to the Custom JS section on the Settings tab of your widget’s settings:

const CONTAINER_SELECTOR = '#buttons15';
const TARGET_TEXT = 'Request a Quote';


const waitForElement = (selector, root = document) => {
  return new Promise((resolve) => {
    const existingElement = root.querySelector(selector);
    if (existingElement) {
      return resolve(existingElement);
    }

    const observer = new MutationObserver((_, obs) => {
      const element = root.querySelector(selector);
      if (element) {
        resolve(element);
        obs.disconnect();
      }
    });

    observer.observe(root, {
      childList: true,
      subtree: true,
    });
  });
};

waitForElement(CONTAINER_SELECTOR).then((list) => {
  const anchors = Array.from(list.querySelectorAll('a'));

  const targetAnchor = anchors.find((anchor) => {
    const label = anchor.querySelector('.label')?.textContent || '';

    return label && label.toLowerCase() === TARGET_TEXT.toLowerCase();
  });

  if (!targetAnchor) {
    return;
  }

  const innerElements = targetAnchor.querySelectorAll('*');
  
  innerElements.forEach((el) => {
    el.style.pointerEvents = 'none';
  });

  targetAnchor.setAttribute('data-elfsight-show-form', 'c6d39864-1b25-410c-87ac-9bea9fa41793');
  targetAnchor.addEventListener('click', (e) => {
    e.preventDefault();
  });
});

Please check it out and let me know how it works :wink:

1 Like