Setting cookies on wix with velo

Ask the community
, ,
1

Question:
How to set custom cookies?

Product:
Wix Editor, Dev mode

What are you trying to achieve:
I would like to set custom cookies like document.cookie = ... (so not sessionStorage, localStorage or memoryStorage). As DOM is unavailable, I’m wondering how to do this. Is there any way, apart from creating a custom element which is unnecessary, to do this with velo? Or are you planning to add this functionality in the future?

What have you already tried:
I’ve tried:

  • wix-frontend-storage. Does not work for me as I need the items to be available across different tabs (with other urls)
  • Custom Element Overkill and I do not want to create an entire element.
  • Other forum topics did not provide answers.
2

As you mentioned, Wix doesn’t provide access to the DOM, and as far as I’m aware there aren’t any current plans.

it sounds like the custom element might be the best way forward for your specific needs :slight_smile:

3

Hi Noah,

Bumping this as this topic is now very relevant with the sandboxing of custom elements coming at the end of this year (2 weeks!).

Given custom elements will no longer be usable as a working around of storing & reading cookies via Wix - what other workarounds does Wix/the community suggest for this?

Being able to read cookies set by other sites is a key functionality for many marketing integrations - keen to understand how we can retain access to this functionality

Thanks

Blair

4

Hey @blairholmes!

Just want to reassure you that the change only affects editor & preview, not the live site :slight_smile:

Hope this clarifies things for you :muscle:

5

Hi @noahlovell and @blairholmes is this still possible? I tried the embed html route and I cannot read or write custom cookies :frowning:

Am I missing something? Here is the embed html code:

<script>
  window.onmessage = function(event) {
    if (event.data.type === "setCookie") {
      document.cookie = event.data.cookieString;
      //send a confirmation back
      window.parent.postMessage({ type: "cookieSet", success: true }, "*");
    }
    if (event.data.type === "getCookie") {
      const cookieName = event.data.cookieName;
      const cookieValue = document.cookie.split('; ').find(row => row.startsWith(cookieName + '='));
      const value = cookieValue ? cookieValue.split('=')[1] : null;
      window.parent.postMessage({ type: "cookieValue", name: cookieName, value: value }, "*");
    }
  };
</script>

//Run on the page...

    $w("#html1").postMessage({
        type: "setCookie",
        cookieString: "myCustomCookie=myValue; expires=Thu, 31 Dec 2025 12:00:00 UTC; path=/"
    });
6

Hey David,

I had no need to set cookies, so I only needed the read side. I would have thought your ‘get cookie’ code would work fine, so a little suprised it doesn’t work.

Not sure if it makes a difference or not, but I created my read code via a custom element and changing it’s attribute (might be stupid but I’m not really coder…"

I can’t share the full code, but here’s the code excerpt from within the custom element:

attributeChangedCallback(name, oldVal, newVal) {
console.log("Attribute changed: " + name);
//console.log(name, oldVal, newVal);

    if (name === "cookiegetter") {
        this.returnCookie()
    }
}


returnCookie() {
    console.log("Running Return Cookie")
    const customCookie = this.getCookie('customCookie');
    if (customCookie) {
        this.dispatchEvent(new CustomEvent('customCookie', { detail: { data: customCookie } }));
    } 
}

getCookie(cookieName) {
    const name = cookieName + "=";
    const decodedCookie = decodeURIComponent(document.cookie);
    const cookieArray = decodedCookie.split(';');
    for (let i = 0; i < cookieArray.length; i++) {
        let cookie = cookieArray[i].trim();
        if (cookie.indexOf(name) === 0) {
            return cookie.substring(name.length, cookie.length);
        }
    }
    return null;
}

Then I change the attribute on page like this:
$w(‘#customElement’).setAttribute(‘cookiegetter’, “1”)

And try and receive the cookie back on page like this:
$w(‘#customElement’).on(‘customCookie’, ({ detail : { data } }) => {
console.log(data)
})

Hope this helps