Responding to COVID-19: Compare changes in rider demand across cities and see how transit agencies are responding to coronavirus

Adding the Transit banner™

The Transit banner will be displayed for your visitors on both Android and iPhone devices. It detects the device automatically and once tapped, will redirect the user to the Transit page on their App Store.

Two easy steps to show the Transit banner on your mobile website:

The result

Step 1

Add these lines in the <head> element:

Change the 'agency XYZ' in "Endorsed by agency XYZ" to your agency name.

Change the 'AGENCY' in the Apple and Google links to your agency abbreviation. Be sure to not add any spaces or symbols.

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="smartbanner:title" content="Transit">
<meta name="smartbanner:author" content="Endorsed by agency XYZ">
<meta name="smartbanner:price" content="FREE">
<meta name="smartbanner:price-suffix-apple" content=" - on the App Store">
<meta name="smartbanner:price-suffix-google" content=" - in Google Play">
<meta name="smartbanner:icon-apple" content="https://transitapp-data.com/images/smartbanner/apple.jpg">
<meta name="smartbanner:icon-google" content="https://transitapp-data.com/images/smartbanner/google.jpg">
<meta name="smartbanner:button" content="View">
<meta name="smartbanner:button-url-apple" content="https://apps.apple.com/app/apple-store/id498151501?pt=2090552&ct=AGENCY-smartbanner&mt=8">
<meta name="smartbanner:button-url-google" content="https://play.google.com/store/apps/details?id=com.thetransitapp.droid&utm_source=AGENCY&utm_medium=smartbanner&utm_campaign=partners">
<meta name="smartbanner:enabled-platforms" content="android,ios">
<!--<meta name="smartbanner:disable-positioning" content="true">-->
<!-- Enable for all platforms -->
<!-- <meta name="smartbanner:include-user-agent-regex" content=".*"> -->
<link rel="stylesheet" href="https://transitapp.com/smartbanners/smartbanner.css">
<script src="https://transitapp.com/smartbanners/smartbanner.js"></script>

Step 2

Add these lines at the top of the <body> element:

<script>
var onLoadHandlerForConflictTesting = function() {};
window.onload = onLoadHandlerForConflictTesting;
</script>

That was easy!

Let us know if you have any issues with the banner. You can contact us at [email protected].