How to Add a Cookie Preferences Button on Wix Built Website

The standard method for adding a Cookie Preferences button on Wix uses Dev Mode (Velo), which is not available in the Wix Harmony editor. This guide provides a working alternative using an Embed element and a Custom Code listener.

Overview

Because the Wix Harmony editor does not support Dev Mode or Velo, the button cannot directly call Termly's displayPreferenceModal() function. The workaround uses two parts:

• A postMessage listener added to Custom Code in your Wix Dashboard (head section)
• An HTML button placed on the page using an Embed element that sends the message when clicked

Step 1: Add the listener script to Custom Code

This script listens for the button click from the embed and calls the Termly preference modal on the parent page.

1. Log in to your Wix account and go to your Wix Dashboard.
2. In the left-hand menu, click Settings.
3. Scroll down to Advanced Settings and click Custom Code.
4. Click + Add Custom Code in the top right corner.
5. Paste the following code into the text box:

<script>
  window.addEventListener('message', function(e) {
    if (e.data === 'displayPreferenceModal') {
      displayPreferenceModal();
    }
  });
</script>

6. Set the following options:

• Place code in: Head
• Add code to pages: All Pages
• Load code once: Off

7. Click Apply to save.

Step 2: Add the Cookie Preferences button via Embed

Now add the button directly onto your page using the Embed element. This should go wherever you want the button to appear, typically in the footer.

8. Open your site in the Wix Harmony editor.
9. Navigate to the page or section where you want to place the button (e.g. your footer).
10. Click + Add at the top left of the editor.
11. Scroll to Embed and drag an Embed Code element onto the page in your desired location.
12. Click the embed element and paste the following code:

<button
  onclick="window.parent.postMessage('displayPreferenceModal', '*')"
  style="cursor:pointer; background:none; border:none;
         text-decoration:underline; font-size:14px;">
  Cookie Preferences
</button>

13. Resize and reposition the embed element to fit your site design.
14. Publish your site and test the button by clicking it, the Termly consent preference modal should appear.

Important Notes

• Do not add the button code via Custom Code in the Dashboard, this will place it outside your page layout and cause a white strip at the top of the page.
• Keep the two Custom Code entries separate: one for the Termly banner script and one for the listener script.
• The button styling in the code above is a basic example. You can customise the font, colour, and size to match your site's design.
• This method does not work in the classic Wix Editor or Wix Studio, for those editors, use the standard Dev Mode/Velo method described in our Wix Cookie Preferences Button guide.

Troubleshooting