config.json

{
  "plugin_type": "widget",
  "name": "Banner",
  "edit_page_url": "http://www.atticandbutton.us/",
  "form_schema": [
    {
      "default_value": "Great deals on all the latest styles",
      "field_type": "text",
      "name": "text",
      "label": "Text",
      "options": null
    },
    {
      "default_value": "/",
      "field_type": "text",
      "name": "link",
      "label": "Link",
      "options": null
    },
    {
      "default_value": "Shop now",
      "field_type": "text",
      "name": "link_text",
      "label": "Link Text",
      "options": null
    },
    {
      "default_value": "#fefaac",
      "field_type": "color",
      "name": "color",
      "label": "Color",
      "options": {
        "mode": "hex"
      }
    }
  ],
  "description": "A horizontal banner across the top of the page",
  "options": {
    "html": "<div class=\"banner\" style=\"background-color: {{extension.color}}\">\n  {{{ extension.text }}} \n  <a href=\"{{extension.link}}\">{{{ extension.link_text }}}</a>\n</div>",
    "css": ".banner {\n  color: #242424;\n  padding: 10px;\n\tposition: fixed;\n  top: 0px;\n  z-index: 100000000;\n  width: 100%;\n  text-align: center;\n  height: 45px;\n}\n\n.banner a {\n\ttext-decoration: underline;\n  color: #242424;\n}\n\nbody {\n margin-top: 45px; \n}",
    "apply_js": "var utils = window.optimizely.get('utils');\n\nutils.waitForElement('body').then(function(element){\n  var html = widget.$html;\n\telement.insertAdjacentHTML('afterbegin',html);\n});\n",
    "undo_js": "var extensionHTML = document.querySelector('.banner');\nif(extensionHTML) extensionHTML.remove();"
  }
}