How to create a download a Chrome extension button (only visible to Chrome users)

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

-          Set display conditions for elements on your site based on your users’ device type, OS, screen orientation, browser, and more.

Creating a download Chrome extension button for Chrome/Chromium users on a Webflow site

Some elements on your site might not be useful to all your users. As such, you can control their visibility based on OS, browser, or device type.

For example, iOS users might see an App Store button, while Android users are presented with a Play Store button. On desktop, you could hide both and instead provide an App Store link for macOS users and a Microsoft Store link for Windows users.

This tutorial walks you through creating a download Chrome extension button that is visible only to users running Chrome (and Chromium-based browsers).

To create a download Chrome extension button only for Chrome users, 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

Once you’ve created and styled your button, use the ms-code-device-show attribute to only display it to Chrome users. For this, use “chrome” as the value.

The attribute ms-code-device-show=”chrome” will ensure the button is only visible to visitors running Chrome or other Chromium browsers.

To achieve the opposite effect and hide it from Chrome users while displaying it to everyone else, add an exclamation point before the value:

· ms-code-device-show”!chrome” – this hides the element on Chrome and other Chromium browsers and shows it on everything else

You can also use combinations of conditions with & for “and” and | (vertical line, not capital “i”) for “or,” like so:

· ms-code-device-show=”windows&chrome” – shows the element for Windows users running Chrome

· ms-code-device-show=”windows|macos” – shows the element on either Windows or macOS

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 button 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!