Skip to main content

Loading LiveChat only with accepted cookies

Introduction​

Some of our customers would like to inform their visitors what cookies are used by the website and give them choice to accept or not the consent. We prepared an example of LiveChat chat widget loaded only if the cookie consent is accepted. There are many custom cookie consents or ready plugins that you could use. For our example we chose https://cookie-bar.eu/

tokens

https://upbeat-candy-princess.glitch.me/

Live example of the floating menu​

The live example of the implementation can be found here: https://upbeat-candy-princess.glitch.me/ Accepting the cookie consent makes the chat widget to load and the consent will not be displayed again. If the consent is declined the chat widget is not loaded and the consent will not be displayed. If you would like to test it properly, please always use a fresh, new browsing tab (for example incognito mode).

Preparation​

First we would need to generate our cookie consent bar. Go to https://cookie-bar.eu/. Click on Configuration section there and choose what options you would like to be included in your consent. You can also choose its language and theme from the dropdowns.

Once you finish your configuration, copy the cookie consent bar from the field below the options.

tokens

Add the code to your website. From now on the cookie consent should be displayed there!

LiveChat chat widget snippet modification​

Our method uses Asynchronous Initialization hence the additional command needs to be added to your LiveChat chat widget snippet window.__lc.asyncInit = true;.

<script>
      window.__lc = window.__lc || {};
      window.__lc.license = 13017213;
      window.__lc.asyncInit = true;
      (function (n, t, c) {
        ...
      rest of the chat widget code

Please add it directly after the line with your LiveChat ID window.__lc.license = 13017213; as in the example above (it should be your LiveChat ID not ours 😉 ). The asyncInit allows you to trigger your LiveChat code only if a dedicated command is executed.

Triggering and blocking LiveChat code​

The best practice wuld be to add the below code between the cookie consent code and the LiveChat chat widget snippet. The example implementation is presented above in the live example.

    <script>
      document.addEventListener("cookiebarConsent", (e) => {
        console.log(e.detail.consent);
        var lccookiestatus = e.detail.consent;
        if (lccookiestatus === "CookieAllowed") {
          window.localStorage.setItem("lccookiestatus", true);
          LiveChatWidget.init();
        }
      });
      document.addEventListener("DOMContentLoaded", () => {
        if (window.localStorage.getItem("lccookiestatus")){
          LiveChatWidget.init();
          console.log("Cookie already allowed")
        }
      })
    </script>

Our code uses two listeners.

cookiebarConsent is dedicated to new visitors for whom the cookie consent is displayed for the first time. The condition in the listener makes the chat widget load if accepted and saves that information in the localStorage.

DOMContentLoaded listener waits for all of the elements of DOM to be loaded and then checks if the local storage consists the lccookiestatus variable true. If yes, it means the cookie consent was accepted in the past and the chat widget should be loaded. If not, the chat widget is not loaded at all because the cookie consent was not accepted.

Summary​

This is just an example of how this kind of solution may be implemented. They are many custom cookie consents or dedicated plugins. Each of them has different requirements and may need a different approach, but we hope you will find this guide helpful for your use-case. Please, remember that in our case we keep the information about the cookie consent being accepted using the localStorage. You could also try to read it directly from the cookies by checking if they were saved.

If you have any questions, let us know!

Yours, LiveChat Team <3