jquery subscribeBar
SubscribeBar is a simple jquery plugin to display a bar to invite users to subscribe to your newsletter.
How it works
Download jquery.subscribebar.js and add it to your page :
<script type="text/javascript" src="jquery.subscribebar.js"></script>
subscribeBar is using jquery and jquery-cookie, you need to include these librairies before subscribeBar :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
And then call subscribeBar to show your bar or not :
<script type="text/javascript"> $(document).ready(function(){ $.subscribeBar(); }); </script>
See https://charlybr.github.io/jquery-subscribebar/ for live demo.
Customize subscribeBar
You can set different things when using subscribeBar. Here are the default values :
- checkAcceptCookie: false
- check if an "accept cookie" cookie exists
- acceptCookieName: 'accept_cookie'
- the name of the "accept cookie"
- acceptCookieValue: 1
- the value we should find to be able to show our bar
- debug: false
- show some debug through console.log()
- element: 'body'
- where to inject our html through $(settings.element).append()
- emailClass: ""
- extra css class added to the email input field
- emailPlaceholder: "email adress"
- email input field placeholder
- emailId: 'email'
- html id of the email input field
- emailName: 'email'
- html name of the email input field
- enableGaEvent: false
- allow GA events. Send events when user is interacting with the bar
- formAction: "#"
- where to submit the email address
- formClass: ""
- extra css class added to the form
- gaEventCategory: "CTA"
- GA event category value
- gaEventAction: "subscribe to newsletter"
- GA event action value when subscribing
- gaEventActionCancel: "close subscribe bar"
- GA event action value when closing the bar
- gaEventLabel: "top subscribe bar"
- GA event label value
- msg: "Stay tuned, subscribe to our newsletter!"
- text to show in the bar
- msgClass: ""
- extra css class for the text
- nextShow: 15
- show the bar again in xx days
- submitClass: ""
- submit button extra css
- submitLabel: "SUBSCRIBE"
- submit button label