This is a generic, dependency-free cookie banner script that can be included where required via a <script> tag. Consent is tracked via the presence of a cookie_consent cookie. The cookie domain is determined automatically based on the current window.location.hostname.
The versioned file can be loaded the standard way in platforms that use the manifest by referencing cookie-banner.js. The following iframe includes an example of this banner:
This preview can also be viewed by clicking here.
Though it is not expected that this will be frequently required, it should be noted that it is possible to supply various options to the cookie banner that override its default behavior by defining some javascript variables before it is loaded. The full set of default options and styles are shown here for the purpose of illustration, however it is only necessary to supply those you intend to override:
//default options
var COOKIE_BANNER_OPTIONS = {
autoRun: true, // by default, this runs automatically when it is loaded
cookieName: "cookie_consent",
cookieValue: "true",
cookieDomain: window.location.hostname.split('.').slice(-2).join('.'),
cookiePath: "/",
cookieExpires: "Tue, 19 Jan 2038 03:14:07 UTC", // just before the end of the epoch
id: "cookieConsentBanner",
text: "This site uses cookies for authentication and analytics, and to improve your experience.<br> For more information, see our {{moreLink}}.",
consentText: "Dismiss",
moreText: "Privacy Policy",
moreLink: "https://www.flexmls.com/privacy-policy/"
};
//styles
var COOKIE_BANNER_STYLES = {
"banner": {
"box-sizing": "border-box",
"display": "block",
"position": "fixed",
"min-height": "48px",
"width": "100%",
"bottom": "0",
"left": "0",
"background-color": "#f3f3f3",
"color": "#333",
"font-family": "\"Open Sans\", Helvetica, Arial, \"Lucida Sans\", sans-serif",
"font-size": "14px",
"line-height": "16px",
"text-align": "left",
"padding": "8px 24px",
"z-index": "1000000", // the ol' z-index arms race
"-webkit-font-smoothing": "antialiased", // mac browsers only
"-moz-osx-font-smoothing": "grayscale", // mac browsers only
"text-rendering": "optimizeLegibility" // mac browsers only
},
"wrapperDiv": {
"display": "flex",
"min-height": "48px",
"align-items": "center"
},
"textDiv": {
},
"moreA": {
},
"consentDiv": {
"margin-left": "auto",
"padding-left": "16px"
},
"consentA": {
"display": "inline-block",
"background-color": "#0077d9",
"font-size": "12px",
"font-weight": "700",
"line-height": "16px",
"padding": "11px 16px",
"color": "white",
"border-radius": "4px",
"text-decoration": "none",
"text-transform": "uppercase"
}
};
autoRun: false option, which one may have reason to do under some circumstances:
<script>
window.COOKIE_BANNER_OPTIONS = {
autoRun: false // prevent it from running automatically when it's loaded
};
</script>
<script src="https://cdn.assets.flexmls.com/flexmls-ui/cookie-banner-xxxxxxxx>.js"></script>
<script>
...
CookieBanner.run(); // run this when you want the cookie banner to execute
...
</script>