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.
|
Before you begin Make sure your Termly consent banner script is already installed on your Wix site via Dashboard → Settings → Custom Code. If you have not done this yet, install it first before following the steps below. |
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.
- Log in to your Wix account and go to your Wix Dashboard.
- In the left-hand menu, click Settings.
- Scroll down to Advanced Settings and click Custom Code.
- Click + Add Custom Code in the top right corner.
- Paste the following code into the text box:
<script>
window.addEventListener('message', function(e) {
if (e.data === 'displayPreferenceModal') {
displayPreferenceModal();
}
});
</script> |
- Set the following options:
- Place code in: Head
- Add code to pages: All Pages
- Load code once: Off
- 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.
- Open your site in the Wix Harmony editor.
- Navigate to the page or section where you want to place the button (e.g. your footer).
- Click + Add at the top left of the editor.
- Scroll to Embed and drag an Embed Code element onto the page in your desired location.
- 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> |
- Resize and reposition the embed element to fit your site design.
- 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
| Issue | Solution |
| Button appears but modal does not open | Check that the listener script was added to Custom Code in the Head section and is set to load on All Pages. |
| White strip appears at the top of the page | You have added the button code via Custom Code instead of an Embed element. Remove it from Custom Code and follow Step 2 instead. |
| Console shows displayPreferenceModal is not defined | The Termly banner script may not be installed correctly. Verify installation via Consent Manager → Consent Banner → Installation in your Termly dashboard. |