Add query string parameters using custom javascript

[eman]

Hello,

I have a simple use case that I’m struggling to implement. When a user opens an overlay, I want to change the url to add ‘?overlay=true’.

I trigger the overlay using a workflow that sets a variable to true (i.e. overlay = true), which is then used to change the CSS to make the overlay visible.

I would expect the following code to change the url but it doesn’t work (window.location.search is blank and the url doesn’t change).

var url = new URL(window.location);
url.searchParams.set('overlay', 'true');
window.history.pushState({}, '', url);

I’m testing this in the editor preview btw - not sure if that makes a difference. What am I doing wrong?

Thanks

[Joyce]

Hi @eman

When you’re in the editor, the site is in an iframe so your custom JavaScript code changes the URL of the iframe. This is why it doesn’t work in preview mode.

That said, you don’t actually need to run custom JavaScript, you can do this with no-code

Here’s how:

Step 1 – Create an empty query string variable

Step 2 – With a workflow, change the variable value when a user opens an overlay

In the example below, we want to open the overlay when the user clicks on the button:

Step 3 – Bind the display of the overlay to the variable

Once you’ve done that, you can go back to preview mode and see that when the user clicks on the button: the variable is updated, the overlay is displayed, and the query string is added to the URL:

[eman]

Thanks Joyce, that works perfectly!