Skip to content

Instantly share code, notes, and snippets.

@KZeni
Last active Aug 29, 2015
Embed
What would you like to do?
Beginner's Getting Started Guide for jQuery Smart Web App Banner

1. Add jQuery by adding the following to the <head> of your page/site:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

Note: You don't need to add this if jQuery is already being called on the page.

2. Add the banner’s CSS by adding the following to the <head> of your page/site:

<link href="//cdnjs.cloudflare.com/ajax/libs/jquery-smart-web-app-banner/1.4/jquery.smartwebbanner.min.css" rel="stylesheet" type="text/css" />

3. Add the banner’s JavaScript by adding the following before the closing </body> tag (making it so it lets the main part of your site load first):

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-smart-web-app-banner/1.4/jquery.smartwebbanner.min.js"></script>

4. Initiate the banner by adding the following after the banner's JavaScript file but before the closing </body> tag:

<script>
jQuery(document).ready(function($){
	$().smartWebBanner({
		title: '***',
		author: '***',
		url: '/'
	});
});
</script>

Important Note: Replace the *** (keep the apostrophes) with the site’s name for the title and the company/entity’s name for the author. There are more options documented here: http://kurtzenisek.com/p/smart-web-banner/ (technically all of the settings are optional as there are adaptive defaults)

Technical Note: You can insert this code snippet into a file you may have existing javascript for your site, and you don't need a separate jQuery(document).ready() call if you have one already. This is just a beginner’s guide to getting started that is designed to work with all setups.

Additional Information:

  • All of the links to files in the code above are using well established & supported CDNs so they should be fast & reliable for your visitors. That said, you can certainly host these files on your site itself.
  • The version numbers in the code above reference the latest versions at the time of writing so feel free to update these as new versions are made available.
  • You won’t be able to see the banner unless using an iOS device (or setting your user agent to appear to be one). You can use the debug: true option in the plugin’s initialization script to see the banner regardless o the device being used or whether or not they’ve closed the banner previously (which would have saved a cookie so it’s not shown every time).
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment