How to Automatically Hide/Show Elements to Android Visitors

This post will teach you how to automatically hide or show elements specifically for Android visitors on your Webflow site, why you might want to customize content for Android users, and how our cloneable solution works to seamlessly implement this functionality.

TABLE OF CONTENTS
Ovidiu

How to automatically hide/show elements to Android visitors

Other use-cases using Memberscript #120: 

  • How to automatically hide/show elements to mobile visitors
  • How to automatically hide/show elements to desktop visitors
  • How to automatically hide/show elements to users on a touch screen device
  • How to automatically hide/show elements to users with a device in portrait mode
  • How to automatically hide/show elements to iOS visitors
  • How to automatically hide/show elements to android visitors
  • How to automatically hide/show elements to macOS visitors
  • How to create a download in App Store button (only visible to iOS users)
  • How to create a download in Play Store button (only visible to android users)
  • How to create a download for macOS button (only visible to Mac users)
  • How to create a download for Windows button (only visible to Windows users)
  • How to create a download for Linux button (only visible to Linux users
  • How to create a download Chrome Extension button (only visible to Chrome users)
  • How to automatically hide/show elements to Windows visitors
  • How to automatically hide/show elements to Linux visitors
  • How to automatically hide/show elements to visitors using Chrome
  • How to automatically hide/show elements to visitors using Edge
  • How to automatically hide/show elements to visitors using Safari
  • How to automatically hide/show elements to visitors using Firefox
  • How to automatically hide/show elements to visitors using Opera
  • How to tell your visitors to stop using Internet Explorer

Memberscripts needed: 

https://www.memberstack.com/scripts/device-os-browser-visibility

Tutorial:

Cloneable: 

Why/Use Cases

-          Show or hide elements on your site based on your visitors’ device, OS, screen orientation, browser, and more.

Automatically hiding/showing elements to Android visitors on a Webflow site

Some elements on your site may not be relevant to certain visitors, so you can selectively show or hide them based on factors like browser, operating system, or device type.

For example, you might want an App Store button for iOS, a Play Store button for Android, and neither on desktop. A Microsoft Store link could be displayed exclusively for Windows users.

This guide will help you set element visibility depending on whether visitors are browsing from an Android device or not.

To automatically hide or show elements to your Android visitors, we’re going to use MemberScript #120 – Show/Hide Element Based On Device, OS, or Browser. Follow the link to get the code you’ll need to add to your page and watch a video tutorial on how to set everything up.

Setting it up

This functionality relies on the attribute ms-code-device-show attribute. You just need to add it to the element whose visibility you want to control and use “android” as the value.

In our case, ms-code-device-show=”android” will only display the element on Android devices.

To achieve the exact opposite result, add an exclamation point before the value:

· ms-code-device-show”!android” – this will hide the element on Android devices and display it on everything else

You can also combine multiple conditions by using & for “and” and | (vertical line, not capital “i”) for “or,”:

· ms-code-device-show=”android&ios” – this will only display the element on iOS and Android devices

· ms-code-device-show=”tablet|mobile” – this will only display the element on either tablets or phones

For a full list of available values, see our cloneable page.

Making it work

Now that you’ve got everything set up in Webflow, all you need to do is add the MemberScript #120 custom code to your page (or sitewide), before the closing body tag.

Conclusion

That’s everything, you can now go ahead and test the show/hide functionality on your live site.

If you want to use our demo project to get you started, just click the button below to add it to your Webflow site.

Our demo can help you show or hide elements on your Webflow site based on visitors’ devices, OSes, browsers, and more.

Take me to Cloneable!

Add memberships to your Webflow project in minutes.

Learn more

Over 200 free cloneable Webflow components. No sign up needed.

View Library

Add memberships to your React project in minutes.

Get started
What is Memberstack?

Auth & payments for Webflow sites

Add logins, subscriptions, gated content, and more to your Webflow site - easy, and fully customizable.

Learn more
Start building

Try out Memberstack & discover what you can build!

Memberstack is 100% free until you're ready to launch - so, what are you waiting for? Create your first app and start building today.