# Using Query Parameter Bindings

**URL:** <https://forum.builder.io/t/using-query-parameter-bindings/1344>\
**Category:** Visual Editor Help\
**Tags:** visual-editor, shopify\
**Created:** [November 15, 2021, 7:20pm UTC](https://forum.builder.io/t/using-query-parameter-bindings/1344 "2021-11-15T19:20:21Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![chinawoodshed](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/chinawoodshed/32/824_2.png) [@chinawoodshed](https://forum.builder.io/u/chinawoodshed)\
**Post date:** [November 15, 2021, 7:20pm UTC](https://forum.builder.io/t/using-query-parameter-bindings/1344/1 "2021-11-15T19:20:21Z")

</div>

_Please fill out as many of the following questions as possible so we can help you promptly! If you don’t know how to answer or it does not apply, feel free to remove it or leave it blank._

**Builder content link**

> **[Builder.io: Drag and drop page builder and CMS](https://builder.io/content/54b561e6887b4e0baa02890e075ba9e7)**
>
> Build and optimize digital experiences for any tech stack, visually.

**Builder public api key**  
d85cc1ef33d94d30b8bc4ed686ab9b49

**What are you trying to accomplish**  
I want to use Query Parameter Bindings to deliver dynamic content in the announcement bar based on the utm parameters set in paid ad links.

**Screenshots or video link**  
_Screenshots of your issue, or even better a link to a video of what is happening or what you are trying to accomplish. We love using loom for that sort of thing_

**Code stack you are integrating Builder with**  
_Shopify_

**Reproducible code example**  
_If you are having integration errors, please link to codesandbox or copy and paste your problematic code here. The more detail the better!_

---

<div class="post-metadata">

**Author:** ![logan](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/logan/32/5564_2.png) [@logan](https://forum.builder.io/u/logan)\
**Post date:** [November 15, 2021, 8:05pm UTC](https://forum.builder.io/t/using-query-parameter-bindings/1344/2 "2021-11-15T20:05:58Z")

</div>

Hello, @chinawoodshed, and welcome to the Builder Forum!

Builder is able to access the URL parameters through its ‘state’ object. Since you are working on a page that is connected to Shopify, you can’t edit the previewing URL in the Visual Editor. While making this, you may need to open the Live Preview option and manually add the parameter to the URL until you publish the page.

## Example

Let’s say you have a URL parameter called “paidAd” which has a value of “someProduct”.

```auto
www.website.com/page?paidAd=someProduct

```

Let’s also say that you’d like to bind a text object to display a dynamic message depending on the value of “paidAd”. For example, a message on the announcement bar that advertises “someProduct”.

**Bind URL Param data to a text element**

Start by dragging a text element onto the page. Then, head into the “DATA” tab and add a new data binding.

 ![image](https://us1.discourse-cdn.com/flex020/uploads/builder/original/1X/50ef73b92d0fa9a53a6a7fcacfc4f9c4e151965c.png)

Select the “Get Text from…” option, then select the custom code button. In the custom code screen, we can ask for the URL query from the ‘state’ object. Simply typing `state.location.query` will result in the text box we are using to display “[object, Object]”, which means that we have successfully bound the text to a Javascript object.

Since we know there will be parameter called “paidAd”, we can add that to our binding:

```auto
state.location.query.paidAd

```

This will display the text value that “paidAd” has in the URL.

 ![image](https://us1.discourse-cdn.com/flex020/uploads/builder/original/1X/54022cf21219c6c2569d2b063c6bbce41118bc2b.png)

Finally, let’s add some simple Javascript logic to this, so that we display some more useful text:

 ![image](https://us1.discourse-cdn.com/flex020/uploads/builder/original/1X/d9f073cdffc8bbaf68dbe80f1d1c348b845dd03a.png)

```auto
if (state.location.query.paidAd === 'someProduct'){
    return 'This is an ad for the product that is available based on the URL.'
} else {
    return 'There is no parameter, so no ad.'
}

```

**Troubleshooting**

If you are not able to see things working correctly on the Live Preview version of this page, with the URL parameter added, you can manually _ask the browser window for the parameter_ you’re looking for and _assign it to the state object_. The following code can be added to the “isBrowser” section of the custom JS + CSS code panel at the bottom of the DATA tab.

(keep in mind that we are looking for a parameter called “paidAd” in this example)

```auto
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
//assign a new variable called "paidAdResult" to the result of "paidAd"
const paidAdResult = urlParams.get('paidAd');
//Add a "paidAd" key to the "state" object so that we can use it elsewhere. 
state.paidAd = paidAdResult;

```

Then, in your text data binding from earlier, you can update the code to now say:

```auto
if (state.paidAd === 'someProduct'){
    return 'This is an ad for the product that is available based on the URL.'
} else {
    return 'There is no parameter, so no ad.'
}

```

---

<div class="post-metadata">

**Author:** ![chinawoodshed](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/chinawoodshed/32/824_2.png) [@chinawoodshed](https://forum.builder.io/u/chinawoodshed)\
**Post date:** [November 15, 2021, 8:47pm UTC](https://forum.builder.io/t/using-query-parameter-bindings/1344/3 "2021-11-15T20:47:07Z")

</div>

Thanks @logan for the comprehensive and prompt reply.

Shouldn’t this be as simple as the example in the Query Parameter Binding [fiddle](https://builder.io/fiddle/ab354300aa3847b4a25384e7af19f06d)?

Based on that example, this box should display when utm\_id = “splash”

> **[Green Friday 2021](https://breakawaymatcha.com/collections/green-friday-2021?utm_source=fb_ig&utm_medium=ad&utm_campaign=greenfriday2021-FB&utm_id=splash)**

 ![Screen Shot 2021-11-15 at 12.35.55 PM](https://us1.discourse-cdn.com/flex020/uploads/builder/original/1X/87d90651c6f0a61d9a563978f98fe776921ec9db.jpeg)

In the JSON view it appears some code is missing as compared to the view in the Fiddle; compare:

Breakaway site:  
 ![Screen Shot 2021-11-15 at 12.38.13 PM](https://us1.discourse-cdn.com/flex020/uploads/builder/original/1X/635717914d751bab45024010170b73479ddc4b3a.png)

Fiddle:  
 ![Screen Shot 2021-11-15 at 12.38.44 PM](https://us1.discourse-cdn.com/flex020/uploads/builder/original/1X/0a124c6581f545215eadd538bbc652084bd0ae07.png)

Is this the source of the issue?

---

<div class="post-metadata">

**Author:** ![logan](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/logan/32/5564_2.png) [@logan](https://forum.builder.io/u/logan)\
**Post date:** [November 16, 2021, 12:40am UTC](https://forum.builder.io/t/using-query-parameter-bindings/1344/4 "2021-11-16T00:40:35Z")

</div>

Hello!

I did some investigating and found that Builder is not able to pull the parameters into State for this page. I used the troubleshooting steps to manually ask the browser for the parameter, instead. I bound the box to show when “state.utm\_id” is the value you want.

 ![image](https://us1.discourse-cdn.com/flex020/uploads/builder/original/1X/334817d3f93702f54e3ac3f8c7811c2127197331.jpeg)

To see this in action, open the **live preview** of this page [Builder.io: Drag and drop page builder and CMS](https://builder.io/content/54b561e6887b4e0baa02890e075ba9e7/edit) and add `&utm_id=splash` to the very end of the URL, then reload the page. The desired box will appear!

---

<div class="post-metadata">

**Author:** ![chinawoodshed](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/chinawoodshed/32/824_2.png) [@chinawoodshed](https://forum.builder.io/u/chinawoodshed)\
**Post date:** [November 16, 2021, 4:52pm UTC](https://forum.builder.io/t/using-query-parameter-bindings/1344/5 "2021-11-16T16:52:06Z")

</div>

Thanks @logan!

This is very helpful. I have 2 more questions:

- If we can’t pull the parameters into State for this page, how do we write a rule that will HIDE the default content (functioning as a Hide if…)?

 ![Screen Shot 2021-11-16 at 8.46.37 AM.png](https://us1.discourse-cdn.com/flex020/uploads/builder/original/1X/1645db80e54e4539756d7fbf166a2cc964edb4df.png)

- Why is it that _Builder is not able to pull the parameters into State for this page?_