I have a request from a client that I am not sure how to tackle yet, so I am reaching out to the community. I do not have a read-only/share link yet as I am trying to plan how to accomplish what the client wants first.
I will be running ads to the website, and the ads will be broken down into ad sets for certain categories (coffee, fitness, sports for example). Each ad set will have a specific UTM that brings them to the page. For example, a coffee ad might look like this: Website Hosting - Mysite.com
The client wants a dropdown menu in the hero section that is preselected based off the ad that brought them there. For example, a coffee ad might have brought them to the site, so coffee would be the selected item in the dropdown when they land on the page and see the hero.
I have been searching around stackoverflow and this community for an answer I can understand, but I have not been successful yet. I am not well-versed in javascript, but I can follow precise instructions.
Looking to the community for help and ideas. Thank you all!
Tagging @samliew because he always gives great answers!
Thanks you, @samliew. I did see your Webflow post and some of these Stackoverflow articles. I was not able to get any of them to work, mainly because I don’t know javascript. I will spend today trying harder and perhaps I will get it working with more time! If not, I will come back here haha.
I ended up switching my design from a dropdown menu to a tab system. However, I did figure out how to use a URL parameter to open a specific tab. For example, when someone clicks an advertisement for “coffee” then my coffee tab would be pre-opened on the page.
I placed this code in my body section of the site’s custom code (under project settings). For a tab system, you do not need to change this code whatsoever.
<script>
var Webflow = Webflow || [];
Webflow.push(function () {
var tabName = getParam('tab');
if (!tabName) return;
$('.' + tabName).triggerHandler('click');
function getParam(name) {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
});
</script>
In order to specify the tab you want opened by a URL, you have to give your tab links a specific class. For example, my tab links might have classes of “coffee-tab” or “fitness-tab”.
Once you have given the tabs a class, all you have to do is type out the correct URL. For example: