Can Webflow run a script to detect iOS and only display a 'download now' button on iPads for a site designed for an iPad app?

To display a 'download now' button only on iPads, Webflow does not natively support running custom scripts to detect specific devices like iPads. You can, however, achieve this by embedding custom code. Here's how you can approach adding such functionality:

​

1. Embed Custom Code

• Access Webflow Designer and go to the page where you want the button.
• Add an HTML Embed element to your page where the button should appear.
• Use a JavaScript snippet to detect iOS and display the button only on iPads. 

​

2. Sample JavaScript for Detection

• You can use the following JavaScript to detect iOS, specifically iPads:
• ```js

    if (navigator.userAgent.match(/iPad/i) !== null) {

      document.querySelector('.download-now-button').style.display = 'block';

    } else {

      document.querySelector('.download-now-button').style.display = 'none';

    }

    ```

• Important: Place this script in the Custom Code section or directly in an HTML Embed on the page.

​

3. Add a 'Download Now' Button

• Create a button in the Webflow Designer and set its class to 'download-now-button'.
• Ensure the initial display of the button is set to none in the Designer IF using the script to show it conditionally.

​

4. Publish and Test

• Publish your site to see the effect in a live environment.
• Test on various devices to confirm that the button only appears on an iPad.

​

Summary

To display a 'download now' button exclusively on iPads, embed a JavaScript code snippet in Webflow to detect such devices and manipulate the visibility of the button accordingly. Make sure the button is initially hidden, and publish your changes to verify the functionality.