Get rid of 'Open Popup' button

Once I close Pop-up, this green ‘open popup’ button appears where it is triggered (the announcment bar). Can I get rid of it?

* Link to the page with the widget in question:

1 Like

You won’t see it on the page right now because I had to take it off the client’s site (its an active site). But it was appearing how it looks in the image above.

Hi @Andrew7 welcome to the community, really happy to see you with us! :hugs:

I’m afraid, at the moment there is no option to support the use-case you’ve described, I’m really sorry :frowning:

But I’ve moved your request to our Wishlist, and I’ll make sure to keep you updated in case of any changes in the development status.

Thanks a lot for your help, and feel free to share all your ideas with us! :raised_hands:t2:

Wait - so there is no way I can remove the ‘Open Popup’ button on the top of the page?

I’m afraid there is no option to get it hidden after closing the popup widget, so the button will always be visible. Maybe you’d want to replace the button instead so that it’s not in the middle of the page?

Or, you can try to disable the button and set the popup to open by trigger.

I have the button opening up by trigger by clicking the announcement bar on the top of the page as is. Shouldn’t it go away after I close the popup?

1 Like

Hi @Andrew7! I’ve managed to check your website before you removed the widget and the button was displayed without clicking on announcement bar.

If you could temporarily restore the widget on this webpage or add it to the test page, we would be happy to double-check things!

Hello Max - I placed the widget back onto the site. It is on all pages, triggered by clicking the announcement bar.

1 Like

I had to move the pop-up to this test page per the client: Bridge Commercial

I just want the ‘Open Popup’ green button not to display. The trigger on the announcement bar should still open the Popup, correct? Let me know - thanks!

@Andrew7 I’ve double-checked everything and the button still appears without clicking on announcement bar.

The popup should be opened by clicking on the announcement bar, but not the button.

To remove the button, you need to click on Reopen button on the Layout tab and disable it:

If you try to click on the announcement bar, it doesn’t work because you added .sqs-announcement-bar class to HTML Element ID. Unfortunately, this functionality isn’t supported in our widget.

There are 2 options how we can proceed in this situation.

  1. You can add the element id instead of the class

  2. You can try the custom solution from our devs:

<div id="elfsight-popup-trigger"></div>
<script>
    (() => {
        const addHanlersToGeneratePopupTriggerClick = () => {
            const trigger = document.getElementById('elfsight-popup-trigger');
            const elements = document.querySelectorAll('.ENTER_THE_REQUIRED_CLASS');

            if (trigger && elements?.length) {
                elements.forEach(element => element.addEventListener('click', () => trigger.click()));
            }
        };

        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', addHanlersToGeneratePopupTriggerClick);
        } else {
            addHanlersToGeneratePopupTriggerClick();
        }
    })();
</script>

Replace ENTER_THE_REQUIRED_CLASS on the 5th line of the code with the necessary class and add this code right next to the installation code.

In the settings of the widget in the “HTML element ID” field add elfsight-popup-trigger:

Please let me know if it helped or if you have any other questions.

Max,
Thank you - I think I am on the right track, but more of a designer, so no sure I was able to correctly identify the element id for the announcement bar, nor if the code is in the correct order.

I am not sure what you mean by ‘right next to the installation code.’

I placed your code after the widget installation code, and placed in the header code injection of the page. Again - not sure if I have the right element id for the navigation bar. I have an id finder, but it just showed a collection id - is that what I should use? Let me know - thank you!
Andrew

1 Like

@Andrew7 I am sorry for the confusion! I just duplicated this message “Finally, you need to add this script right after the widget installation code.”

You just need to replace ENTER_THE_REQUIRED_CLASS on the 5th line of the code with the necessary class and add this code right after the installation code. So, this script should be added only once, right after the widget installation code.

Please check it and let me know if it helped.

As for the finding the right element id, I’ve forwarded your request to our devs and, hopefully, they’ll come up with a solution really soon!

Hello @Andrew7!

Our devs have defined the HTML Element ID for the announcement bar. Its announcement-bar-text-inner-id. We’ve added the ID to the HTML Element ID field and the style below to the Custom CSS field on the Settings tab so that the announcement bar looked clickable:

.global-styles,
#announcement-bar-text-inner-id {
  cursor: pointer;
}

So, you can remove the custom script I provided you in the previous messages.

Please check it and let me know if you like what you see :slightly_smiling_face:

Max - it works! Thank you so much.

3 Likes

@Andrew7 Great to hear that you are good now!

If anything comes up, please feel free to contact us.

Have a great day!

Max I apologize, but this feature isn’t working anymore. I did duplicate it to create another pop-up for the bottom of the page, but not sure if that screwed up something with the original. Sorry!

1 Like

Hey Max - sorry, I am still not getting this to work on my page. https://www.bridge-commercial.com/

1 Like

Hello @Andrew7!

I’ve checked the widget and you had the wrong HTML Element id (elfsight-app instead of announcement-bar-text-inner-id)

I’ve changed it and added the CSS code from the previous message to the Custom CSS field so that the announcement bar looked clickable.

Please check your website and let me know if you like what you see.

Hey Max - it worked. Thanks again! I promise not to mess with it anymore - I will just screw it up again.

Off topic - I am about to begin designing a big commercial real estate site. Do you all have recommendations for widgets that enhance that category? I am just getting started so not sure what to do, but not sure if you have things you used in the past. I apologize if not in your wheelhouse - probably something in the forums on it. Thanks again!

1 Like