#156 - Use URL query parameters in Webflow

oh [Music] hello hello and welcome to finn suite live today we are doing a tutorial walkthrough of attributes query param this is an attribute solution that we just launched today and it allows you to very easily work with query parameters from the url and then use them on your webflow page so i'm joined here with harshit who will be leading this walkthrough to show you how you can set this up and how this can really take a lot of your marketing functionality to the next level clients will want this and this is why we've built it because clients ask for it so har let's get into it let's see what query param is all about yeah thank you joe so we can start with this i will start with a small introduction of query parameter like if you are new to it i'm just going to give a small like very simple uh definition of query param so query parameter is nothing but some information that is stored on your url on your website url and these information exist in a proper format to learn more about the format you can go to the web page on attribute and you will find the right format if you scroll down below it says new to correct query parameters just read this out this is having some like reserve characters like question marks uh ampersand and you know there is a whole format here and to show an example right here i i have a screenshot here on my screen so this is the normal url of the website you can see finsweed.com every time query parameter starts it starts with a question mark here you can see a question mark and then after that i have is cool so it's cool right here this is called parameter name itself so is school is parameter name and then is equal to after that i have true true is the value of that name that query parameter name so this is the structure now we have an ampersand in between here that separates two names and value pair so here i have end then i have a name called platform the value is reflow now this is what query query parameter really is as simple as that now what our solution really does is it takes these values from the url of your website and you can place this value on html elements like your heading your text your paragraph even on the form elements so the thing is the possibility to use this tool this feature is like endless uh you can think about many things uh like there you can make multi-step forms you can create a welcome message you can create a thank you message it's just endless it depends on you how you are going to use it today in this example we are going to show you how the functionality works what we are going to present you is not really the only or the exact use case you can say for this particular feature but at the end of example you will know uh how this works and what it does so before we start i do you have anything to say jay joe sorry no that's please continue thank you okay okay so uh here i have one more thing if you scroll down to this page there is a example that you can see it's a working example right now here is our input field and here is our test link or a demo link if i click on this link you can see here the platform value is set to twitter so what this example will do it will take the value of twitter and put it inside this input field this can be used to track where the source is coming from where the link is coming from so let's just click on this link there we go i'm going to scroll down again and the input should be filled with twitter there we go now you don't want to show it you can use a hidden field as well you can use a hidden input it completely it completely depends on you just to show an example we have a visible field now let's jump to another use case to understand it even better so first we will start with the very first step that is copying the script from our page going to the website and pasting it on the head of our page settings now make sure to paste it on the page where you want to show the values it should not be like if you having two pages involved in the process make sure to put the code on the page you want the values to be visible so in my case what i'm going to do i have a contact form here uh i'm just going to move as soon as i click on send message i'm going to move to the next page which is a thank you page and here i want to present the first name of my form value on this particular text span and also in this input field so my code that i copied from here will go to head of the thank you page because i want to make those values visible right here so let's just go down here and we'll put the script on the head tag i will click save nice now let's go to form this is something what i'm going to do right now is not related to query parameter this is just a normal behavior of html forms when i set the method to get and set the action url to the url of my thank you page it will transfer the parameters to the url of the thank you page this is by default the html behavior i am going to show this example just for the sake of live stream this is not the only use case of the query parameters now i set the method to get action is set to slash thank you which is url of my thank you page now i will go to the thank you page and i will define the elements where i want those values to be visible so first let's scroll down here it says get query parameter value now the first actually you know let's make a submission and see how the query parameter looks like when i submit a form that that will make actually more sense so here i have a contact form let's just publish the website first there we go and i will just type in here i refresh the page and type in my name and it looks like we have lost the screen share somehow or did you change the the browser window well i'm not sure i i started the share again i'm not sure what really happened okay okay we're back yeah i'm just typing out some information here and this is test this is test there we go send message now as soon as i hit send message you can see that it has transferred the values from my form field like first name that is harshit last name that is agrawal let's try to zoom it a little bit if possible no we cannot really zoom it here uh so all the values are being transferred to the query parameter this is default behavior of html form now what i'm going to do is take these values and put it here on these input and text field for that we will have to go to our query parameters page and i will just copy this first attribute and define the name so this is the name of the attribute which is first name first name is coming from the input name itself so if i go to the contact page just to make it more clear if i click on form input you can see the name is set to first name you can use a space here that will be converted to a dash but i'm just using very simple like all small letters here for this example first name there we go and uh let's go to the thank you page and define where i want this first name to be visible i will click on this name i have created a text span right here click on this add button paste the name of the attribute and now i want to put here the name of the query parameter name itself so name of the query param which is first name so first name here we go i will hit save i also want to put that value here on this input field so let's just go here paste the same attribute name and the value is going to be first name now when i do this it's going to replace that in that uh that particular text and input and it would take the value from the query parameter itself let's refresh the page right here so what these attributes are doing is saying hey this text element or this input field go look in the query parameter look for the first name and then put that first name value in this location that's what's happening here so when her loads reloads the page name and that input field will now say har there we go so this is this attribute is a way to communicate with the query parameters in the url now this is something very common in the web world you may have never used this before but this is what marketing teams use to communicate between platforms have you ever been on pretty much any social website or e-commerce website it creates those giant links right amazon if you've ever been on amazon.com it creates these massively long links with a whole bunch of information about your path to getting to that location so that they can track everything that's going on here and we built this solution because when we work with marketing teams they usually want something with query parameters so now this is just a little bit less code that we have to write to access those query parameters and then use the values in the project so nice walkthrough this is a great use case please hosh it continue yeah yeah definitely so i just i'm just going to submit this form again and let's see what will happen uh and this query parameter is itself really powerful because in a lot of cases you don't want to you may not need to or want to use cookies or local storage to store some information and data you might consider using query parameters because that's not restoring anything on the user browser so that's also a nice solution uh let's just change the name to joe here i will type your name joe there we go and send message and here we go and the next page i can see this name i just transferred this information to the query parameter and then from there i transferred it to the input but the functionality the basic functionality that our tool is providing you is taking the value or information from your url and putting it on your html website on html elements basically and this is a great walkthrough when using forms we can absolutely integrate this into outbound forms just like horseshit is showing now there's also a use case where we may want to track something incoming to our website so let's say we are sharing a campaign on twitter or we are doing a google adwords campaign we can add these query parameters at the end of the url or the client can do this so that when someone clicks on that link we know exactly where that person came from and we can actually submit that information through the form hey this person came from twitter this person came from the summer cell this person came from the adwords campaign 3257 and we can put all of that information through the form so har let's look at this next example of taking something from the url incoming and then using it somewhere on the page okay yeah let's do that uh so for example i can show you example right here which is an example of a website which contains some of the parameters that is like source of the link itself so let's let me try to zoom a little bit here if i can okay so this says utm underscore source which is name of the query param and the value is twitter which means this you know we can replace these uh these query params on the url when we share it on twitter and this will simply just come to our input and this input can be can be a hidden input in our website just like the example that we shown here right here we have this where the source is set to twitter when we open the link it will take the value and put it inside a feed this is going to be a hidden field for an example so as soon as users submit something like their email we will know that they have came through twitter we can also show them a very custom and warm welcome message like because we can take their name uh as well in some way like in other platforms not only on twitter we can show them a custom message like hey welcome to the website joe or something like that so yeah there are endless possibilities uh which i don't really have a live example ready to show the social media links but yeah it's going to look exactly the same for example let's let's do a fun thing right here so here uh let's just create a very custom message of our own welcome i'm creating a welcome message right here there we go publish the website and the name is still the first name i'm going to replace the value in query param and see what happens here we go it's published and now imagine this in an email nice imagine this in an email right you're doing an email campaign you have a list of people in your newsletter and you can create this custom link with the utm params so that when people click into your newsletter link and they load the web page it actually greets that person by name temporarily and it doesn't it it doesn't save as a cookie or local storage it's just there for that specific instance so harshit this is great that you know we're showing how to communicate between the element and the url let's bring up a comment from john saxton this is a great comment and this is actually what we need to talk about next any ability to make elements conditional such as show and hide based on a param or are we just pulling in the param as a string right now so right now we are just pulling in as a string that is the v1 of this attribute solution we have more attributes planned that will help you do this without code right now you'd have to do it without code so you can use the attributes query param solution cut down on some code and then write a little code on top to then show and hide based on a value however when we go and release these attribute solution our plan is for you to be able to use two or three attribute solutions to create a whole system of exactly what you want in terms of marketing tracking and i'll give a great example in social share we can set up a system that adds the utm parameters to our social share links so we're going to share this on twitter and it's going to include that little utm parameter so when p when users go and share that they're sharing it with the utm param and then when someone clicks on that you know that that person came via a social share from the website so these can actually work together so this is one connection you can make but the next step it will either require a little bit of javascript or waiting until we release those additional attribute solutions nice uh yeah uh so i definitely recommend all of you reading the you know more about the query params like reserved characters like for spaces for uh different symbols there are a specific character that is reserved on the url so you should definitely read this read about this it's going to it's it's very interesting to do it you can make your own small solutions with it and uh there is also a nice option add-on that you can use which is basically for example i i see the url here we are not really happy with how url looks right now right uh it looks messy when we see a lot of words in the url so this option is to give relief on that we can basically you know it will take the value and it will hide all the extra query param so let's just test it out here live as well so we have this thing and where do we want to place it it's it's in the name itself so let's just go here and the value i want to set is true there we go and this should be set right here there we go if i refresh the page the first name should be gone there we go now you can only see the last name because i put the first name here the first name is called now so you can clean your url up with this option basically and it will still take the value it's not like it's not taking the value it's just hiding the url uh the query parent from the url very nice yeah the the longer the url sometimes it just doesn't look good so we we keep that in mind and that's a great option for you now i want to bring up something that you said earlier in this live stream that there are endless options for working with query params and that's true the idea of query parameters there is so much you can do with them i like to think that the options are endless with this solution alone with code only with no code sorry with this solution without any code it's limited to a few use cases we showed two of them to do more than this then these simple solutions you're going to have to add code on top of the project so let's bring up a question from penny and john saxton they asked the same question at the same time can you carry a query param forward as a person moves through the website and john saxton asks also curious if params are persistent i'm thinking multi-step forms if you hit previous page i wonder if the param stays with the user so no the param does not stay with the user this is meant to be a very lightweight solution alone that has these really nice quick and easy use cases in order for it to be persistent and to carry through the project we would have to store that either in cookies or local storage which we cannot do without a little bit of code now we are working on this we have attribute solutions completely planned out they're specked out they are going to be cookie managers slash local storage managers and they're going to integrate with query param so if you're watching this in three four months from now i would like to think that we have released those solutions for you but for now we're doing the simple solution or some javascript on top and uh pablo cortez here's a good question where does the value go through is it submitted into a form or how does it connect to other tracking tools well i'll answer part of this by saying you are able to submit this information through a forum for example if you click on the link that says i came from twitter utm platform equals twitter i as the developer can store that value twitter inside a hidden field in the form so when that person goes to the landing page fills out the form and submits it we know that was a direct referral from twitter and we know that that goes directly into twitter natively this will not connect with any tracking tools this is a lightweight solution it is made for these really specific simple use cases harsha do you have anything to add to that uh yeah i would just like to add this that you know like as we already said like there are definitely a lot of use cases for this so if you have any particular use case that you want us to cover or if you have any any particular use case that is really helpful for everyone you can just share that with us you know maybe we can uh add on top of it right now this is just this solution is right now baby bond uh you can take the values put it inside html elements so i can see a lot of potential in this particular uh solution that we can add on top of it so definitely let us know provide your feedback on this particular solution different use cases maybe we can do a lot of cool things here totally agreed this is going to this is just the start of a bigger marketing stack without integrating with other platforms without a lot of headache of trying to make things communicate with each other so we're we're dedicated to this we know that you need it because our clients ask for it marketing teams ask for it and we are providing it to you through attributes so that's going to be the end of this walkthrough of query param i hope it was valuable i hope it has you thinking and definitely try this out on your next project it really only takes five minutes to set up and you get to provide your client with a really cool feature our any final words to the audience before we sign off here no i just wanted to say thank you everyone for joining thank you for all the support and keep watching finn sweet streams absolutely thanks everyone have a great day [Music] you

Channel: Finsweet

Views: 6,123

Keywords: webflow, growth, livestream

Id: VFVExRi2ePM

Length: 24min 24sec (1464 seconds)

Published: Wed Aug 24 2022