Add color and font customization to exit intent modal

Author: Asa Schachar

Extensions/Editor Extensions/Exit Intent Pop-up/README.md

@@ -8,8 +8,14 @@ When a user moves the mouse off screen a pop-up will appear.
 
 ## Fields
 
-* Pop-up headline text
+* Headline
 * Secondary text
 * Link
 * Link text
+* Modal Overlay Color
+* Modal Color
+* Headline Color
+* Secondary Text Color
+* Button Color
+* Font Family
 

Extensions/Editor Extensions/Exit Intent Pop-up/config.json

@@ -4,14 +4,14 @@
   "edit_page_url": "http://www.atticandbutton.us",
   "form_schema": [
     {
-      "default_value": "Don't go!",
+      "default_value": "Don't go yet!",
       "field_type": "text",
       "name": "headline",
       "label": "Headline",
       "options": null
     },
     {
-      "default_value": "Stick around and buy some stuff",
+      "default_value": "Stick around and buy some stuff!",
       "field_type": "text",
       "name": "secondary",
       "label": "Secondary Text",
@@ -25,18 +25,70 @@
       "options": null
     },
     {
-      "default_value": "Please stay!",
+      "default_value": "RSVP YES",
       "field_type": "text",
       "name": "link_text",
       "label": "Link Text",
       "options": null
+    },
+    {
+      "default_value": "rgba(229, 27, 233, 0)",
+      "field_type": "color",
+      "name": "overlay_color",
+      "label": "Modal Overlay Color",
+      "options": {
+        "mode": "rgba"
+      }
+    },
+    {
+      "default_value": "rgba(255, 255, 255, 1)",
+      "field_type": "color",
+      "name": "modal_color",
+      "label": "Modal Color",
+      "options": {
+        "mode": "rgba"
+      }
+    },
+    {
+      "default_value": "rgba(0, 0, 0, 1)",
+      "field_type": "color",
+      "name": "headline_color",
+      "label": "Headline Color",
+      "options": {
+        "mode": "rgba"
+      }
+    },
+    {
+      "default_value": "rgba(255, 255, 255, 1)",
+      "field_type": "color",
+      "name": "secondary_color",
+      "label": "Secondary Text Color",
+      "options": {
+        "mode": "rgba"
+      }
+    },
+    {
+      "default_value": "rgba(0, 0, 0, 1)",
+      "field_type": "color",
+      "name": "button_color",
+      "label": "Button Color",
+      "options": {
+        "mode": "rgba"
+      }
+    },
+    {
+      "default_value": "Graphik, Lato, Helvetica, Verdana, sans-serif",
+      "field_type": "text",
+      "name": "modal_font",
+      "label": "Font Family",
+      "options": null
     }
   ],
-  "description": "If the user tries to leave the window, a popup will show begging them not to leave. ",
+  "description": "If the user tries to leave the window, a popup will show asking them not to leave. ",
   "options": {
-    "html": "<div class=\"exit-intent-modal\">\n  <div id=\"exit-popup-overlay\"></div>\n  <div id=\"exit-popup-wrapper\">\n    <div id=\"exit-popup\">\n      <div id=\"exit-popup-close\" class=\"exit-popup-close\">x</div>\n      <h2>{{widget.headline}}</h2>\n      <p>{{widget.secondary}}</p>\n      <a href=\"{{widget.link}}\" class=\"btn exit-popup-close\">{{widget.link_text}}</a>\n    </div>\n  </div>\n</div>",
-    "css": ".exit-intent-modal{\n\topacity: 0;\n  position: fixed;\n  z-index: 3001;\n  width: 100%;\n  text-align: center;\n\theight: 100% !important;\n}\n\nbody {\n  height: 100%;\n  float: left;\n  position: relative;\n}\n\n#exit-popup-overlay {\n  height: 100vh !important;\n  z-index: 3000;\n  position: fixed;\n  width: 100%;\n  background: #000;\n  opacity: 0.5;\n}\n#exit-popup-wrapper {\n  margin: 50px 0;\n  position: fixed;\n  z-index: 3001;\n  width: 100%;\n  height: 100vh;\n  text-align: center;\n}\n\n#exit-popup {\n  width: 500px;\n  display: inline-block;\n  background: #fff;\n  padding: 50px 20px;\n  position: relative;\n}\n\n#exit-popup h2 {\n  margin-top: 20px;\n}\n\n#exit-popup p {\n  \n}\n#exit-popup-close {\n  top: 10px;\n  right: 20px;\n  font-size: 20px;\n  position: absolute;\n  font-weight: bold;\n  cursor: pointer;\n  font-family: \"helvetica\", \"arial\", \"sans-serif\";\n}\n#exit-popup-close:hover {\n  color: #999;\n}\n\n.fade-in {\n    -webkit-animation: fadein .5s; /* Safari, Chrome and Opera > 12.1 */\n       -moz-animation: fadein .5s; /* Firefox < 16 */\n        -ms-animation: fadein .5s; /* Internet Explorer */\n         -o-animation: fadein .5s; /* Opera < 12.1 */\n            animation: fadein .5s;\n  opacity: 1 !important;\n}\n\n.fade-out {\n    -webkit-animation: fadeout 1s; /* Safari, Chrome and Opera > 12.1 */\n       -moz-animation: fadeout 1s; /* Firefox < 16 */\n        -ms-animation: fadeout 1s; /* Internet Explorer */\n         -o-animation: fadeout 1s; /* Opera < 12.1 */\n            animation: fadeout 1s;\n    opacity: 0 !important;\n}\n\n@keyframes fadein {\n    from { opacity: 0; }\n    to   { opacity: 1; }\n}\n\n/* Firefox < 16 */\n@-moz-keyframes fadein {\n    from { opacity: 0; }\n    to   { opacity: 1; }\n}\n\n/* Safari, Chrome and Opera > 12.1 */\n@-webkit-keyframes fadein {\n    from { opacity: 0; }\n    to   { opacity: 1; }\n}\n\n/* Internet Explorer */\n@-ms-keyframes fadein {\n    from { opacity: 0; }\n    to   { opacity: 1; }\n}\n\n/* Opera < 12.1 */\n@-o-keyframes fadein {\n    from { opacity: 0; }\n    to   { opacity: 1; }\n}\n\n@keyframes fadeout {\n    from { opacity: 1; }\n    to   { opacity: 0; }\n}\n\n/* Firefox < 16 */\n@-moz-keyframes fadeout {\n    from { opacity: 1; }\n    to   { opacity: 0; }\n}\n\n/* Safari, Chrome and Opera > 12.1*/\n@-webkit-keyframes fadeout {\n    from { opacity: 1; }\n    to   { opacity: 0; }\n}\n\n/* Internet Explorer*/\n@-ms-keyframes fadeout {\n    from { opacity: 1; }\n    to   { opacity: 0; }\n}\n\n/* Opera < 12.1*/\n@-o-keyframes fadeout {\n    from { opacity: 1; }\n    to   { opacity: 0; }\n}\n",
     "apply_js": "var utils = window.optimizely.get('utils');\n\nutils.waitForElement('body').then(function(element){\n\tvar html = widget.$html;\n  element.insertAdjacentHTML('afterbegin', html);\n  element.addEventListener('mouseleave', function(){\n    showPopup();\n\t\tbindCloseBtn();\n  });\n});\n\nfunction showPopup() {\n  if(document.querySelector('.fade-out')){\n\t  document.querySelector('.fade-out').classList.remove('fade-out');\n  }\n  document.querySelector('.exit-intent-modal').classList += ' fade-in';\n}\n\nfunction hidePopup() {\n  document.querySelector('.exit-intent-modal').classList += ' fade-out';\n}\n\nfunction bindCloseBtn() {\n\tdocument.querySelector('.exit-popup-close').addEventListener('click', function(e){\n    hidePopup();\n  });\n}",
+    "html": "<div class=\"exit-intent-modal\" style=\"background-color: {{extension.overlay_color}}; font-family: {{extension.modal_font}}\">\n  <div id=\"exit-popup-overlay\"></div>\n  <div id=\"exit-popup-wrapper\">\n    <div id=\"exit-popup\" style=\"background-color: {{extension.modal_color}}\">\n      <div id=\"exit-popup-close\" class=\"exit-popup-close\">x</div>\n      <h2 style=\"color: {{extension.headline_color}}; font-family: {{extension.modal_font}}\">{{widget.headline}}</h2>\n      <p style=\"color: {{extension.secondary_color}; font-family: {{extension.modal_font}}}\">{{widget.secondary}}</p>\n      <a href=\"{{widget.link}}\" class=\"btn exit-popup-close\" style=\"background-color: {{extension.button_color}}; font-family: {{extension.modal_font}}\">{{widget.link_text}}</a>\n    </div>\n  </div>\n</div>",
+    "css": ".exit-intent-modal{\n\topacity: 0;\n  position: fixed;\n  z-index: 3001;\n  width: 100%;\n  text-align: center;\n\theight: 100% !important;\n}\n\nbody {\n  height: 100%;\n  float: left;\n  position: relative;\n}\n\n#exit-popup-overlay {\n  height: 100vh !important;\n  z-index: 3000;\n  position: fixed;\n  width: 100%;\n  background: #000;\n  opacity: 0.5;\n}\n#exit-popup-wrapper {\n  margin: 50px 0;\n  position: fixed;\n  z-index: 3001;\n  width: 100%;\n  height: 100vh;\n  text-align: center;\n}\n\n#exit-popup {\n  width: 500px;\n  display: inline-block;\n  background: #fff;\n  padding: 50px 20px;\n  position: relative;\n}\n\n#exit-popup h2 {\n  margin-top: 20px;\n}\n\n#exit-popup p {\n  \n}\n#exit-popup-close {\n  top: 10px;\n  right: 20px;\n  font-size: 20px;\n  position: absolute;\n  font-weight: bold;\n  cursor: pointer;\n}\n#exit-popup-close:hover {\n  color: #999;\n}\n\n.fade-in {\n    -webkit-animation: fadein .5s; /* Safari, Chrome and Opera > 12.1 */\n       -moz-animation: fadein .5s; /* Firefox < 16 */\n        -ms-animation: fadein .5s; /* Internet Explorer */\n         -o-animation: fadein .5s; /* Opera < 12.1 */\n            animation: fadein .5s;\n  opacity: 1 !important;\n}\n\n.fade-out {\n    -webkit-animation: fadeout 1s; /* Safari, Chrome and Opera > 12.1 */\n       -moz-animation: fadeout 1s; /* Firefox < 16 */\n        -ms-animation: fadeout 1s; /* Internet Explorer */\n         -o-animation: fadeout 1s; /* Opera < 12.1 */\n            animation: fadeout 1s;\n    opacity: 0 !important;\n}\n\n@keyframes fadein {\n    from { opacity: 0; }\n    to   { opacity: 1; }\n}\n\n/* Firefox < 16 */\n@-moz-keyframes fadein {\n    from { opacity: 0; }\n    to   { opacity: 1; }\n}\n\n/* Safari, Chrome and Opera > 12.1 */\n@-webkit-keyframes fadein {\n    from { opacity: 0; }\n    to   { opacity: 1; }\n}\n\n/* Internet Explorer */\n@-ms-keyframes fadein {\n    from { opacity: 0; }\n    to   { opacity: 1; }\n}\n\n/* Opera < 12.1 */\n@-o-keyframes fadein {\n    from { opacity: 0; }\n    to   { opacity: 1; }\n}\n\n@keyframes fadeout {\n    from { opacity: 1; }\n    to   { opacity: 0; }\n}\n\n/* Firefox < 16 */\n@-moz-keyframes fadeout {\n    from { opacity: 1; }\n    to   { opacity: 0; }\n}\n\n/* Safari, Chrome and Opera > 12.1*/\n@-webkit-keyframes fadeout {\n    from { opacity: 1; }\n    to   { opacity: 0; }\n}\n\n/* Internet Explorer*/\n@-ms-keyframes fadeout {\n    from { opacity: 1; }\n    to   { opacity: 0; }\n}\n\n/* Opera < 12.1*/\n@-o-keyframes fadeout {\n    from { opacity: 1; }\n    to   { opacity: 0; }\n}\n",
     "undo_js": "var extensionHTML = document.querySelector('.exit-intent-modal');\nif (extensionHTML) extensionHTML.remove();"
   }
 }