Small Cookie Icon Layout Format

Ask the Community Customization
1

I would love a slimmed, icon version of the banner. Instead of showing the full display, it would be nice if it just showed the small cookie icon. Then a user could click that to expand whatever full view we have setup.

1 Like
3

Welcome to the Community, @Austin_Hay :wave:

Our devs confirmed that it’s possible to do, and they’ll gladly help you with it. I’ll let you know once the solution is ready :slightly_smiling_face:

4

Hi @Austin_Hay :wave:

Please try to add this code next to your widget’s installation code and let me know if it worked:

<script>
(() => {
  function createButton() {
    const ICON_SRC =
      'https://files.elfsightcdn.com/eafe4a4d-3436-495d-b748-5bdce62d911d/31009f4b-b1a4-4e6a-a833-531061d437fd/cookie.png';
    const container = Object.assign(document.createElement('div'), {
      className: 'button-container',
      style: 'position: fixed; bottom: 20px; right: 20px;'
    });
    const image = Object.assign(document.createElement('img'), {
      className: 'button-image',
      style: 'width: 40px; height: 40px;',
      alt: 'Cookie',
      src: ICON_SRC
    });
    const button = Object.assign(document.createElement('button'), {
      style:
        'background-color: transparent; border: none; border-radius: 50%; padding: 0; margin: 0;',
      className: 'button'
    });

    button.appendChild(image);
    container.appendChild(button);
    document.body.appendChild(container);

    return { container, button };
  }

  function installStyles() {
    const style = document.createElement('style');
    function setStyle(isShow) {
      style.innerHTML = `
			body .eapp-cookie-consent-widget-bar {
				opacity: ${isShow ? 1 : 0};
				pointer-events: ${isShow ? 'auto' : 'none'};
				transition: opacity 0.3s;
			}
		`;
    }
    setStyle(false);

    document.head.appendChild(style);

    return setStyle;
  }

  const setStyle = installStyles();
  const { container, button } = createButton();

  button.addEventListener('click', () => {
    container.style.pointerEvents = 'none';
    container.style.opacity = '0';
    container.style.transition = 'opacity 0.3s';
    setStyle(true);
  });
})();
</script>
5

Hey there! Thank you Max.

We are using google tag manager for our widget.

Do you want this script alongside the static elfsight platform.js script?

Likewise, should we keep or get rid of the elfsight class div that links the widget?

I can try just stuffing your code after it on page load if thats what you’re suggesting.

A

1 Like
6

Yes, this code should be added alongside with the widget’s installation code (before or after - it doesn’t matter). Also, you don’t need to get rid of elfsight class div.

Try it out and let me know if it worked :slightly_smiling_face:

7

Hi Max - Tag manager only supports ES5, not ES6, so had to rework some of your code to handle arrow function, const declaration, template literal, object destructing. I see the floating cookie, but it has no background and when you click on it, it doesn’t expand the full menu bar.

A

8

Hey Max - it looks like I was able to get it working!

Thanks for your help!

1 Like
9

Great, you’re very welcome :wink: