install.json

{
  "resources": {
    "head": [
      {
        "src": "build/app.css",
        "type": "style"
      },
      {
        "type": "script",
        "src": "./build/app.js"
      }
    ],
    "body": [
    ]
  },
  "preview": {
    "handlers": [
      {
        "options": ["textColor", "textShadowColor", "alignment", "backgroundPosition", "message"],
        "execute": "INSTALL_SCOPE.updateInnerContent(INSTALL_OPTIONS)"
      },
      {
        "options": ["backgroundImage"],
        "execute": "INSTALL_SCOPE.updateBackground(INSTALL_OPTIONS)"
      },
      {
        "options": ["location"],
        "execute": "INSTALL_SCOPE.updateElement(INSTALL_OPTIONS)"
      },
      {
        "options": ["navigatorBehavior", "redirectURL"],
        "execute": "INSTALL_SCOPE.updateNavigatorBehavior(INSTALL_OPTIONS)"
      }
    ]
  },
  "options": {
    "properties": {
      "backgroundImage": {
        "default": "https://eager-app-images.imgix.net/lturyv6bQ0KLnXdnNLCi_life.jpg",
        "description": "This image will resize to fit the screen.",
        "title": "Background image",
        "order": 0,
        "type": "string",
        "format": "image"
      },

      "message": {
        "default": "# First impressions in full screen.\nA summary of your content to encourage visitors to read on.",
        "description": "A summary of your content formatted with <a target='_blank' href='https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet'>Markdown</a>.",
        "placeholder": "Your hero summary...",
        "title": "Message",
        "order": 1,
        "type": "object",
        "format": "markdown"
      },

      "textColor": {
        "default": "#ffffff",
        "title": "Text color",
        "order": 2,
        "type": "string",
        "format": "color",
        "placeholder": "#..."
      },

      "textShadowColor": {
        "enum": [
          "dark",
          "light",
          "none"
        ],
        "enumNames": {
          "dark": "Dark",
          "light": "Light",
          "none": "None"
        },
        "default": "dark",
        "title": "Text shadow color",
        "order": 3,
        "type": "string"
      },

      "navigatorBehavior": {
        "enum": [
          "scroll",
          "redirect"
        ],
        "enumNames": {
            "scroll": "Scroll down the page",
            "redirect": "Redirect to a different site"
          },
        "default": "scroll",
        "title": "When the user clicks the Hero Image...",
        "order": 4,
        "type": "string",
        "format": "radios"
      },

      "redirectURL": {
        "title": "Redirect URL",
        "format": "url",
        "order": 5,
        "type": "string",
        "showIf": {"navigatorBehavior": "redirect"}
      },

      "alignment": {
        "title": "Text alignment",
        "type": "string",
        "order": 6,
        "default": "center",
        "format": "radios",
        "enum": [
          "left",
          "center",
          "right"
        ],
        "enumNames": {
          "left": "Left",
          "center": "Center",
          "right": "Right"
        }
      },

      "backgroundPosition": {
        "title": "Background Position",
        "description": "Where should the image focus when the screen is too small?",
        "type": "string",
        "order": 7,
        "default": "center center",
        "format": "radios",
        "enum": [
          "center top",
          "center center",
          "center bottom"
        ],
        "enumNames": {
          "center top": "Top",
          "center center": "Center",
          "center bottom": "Bottom"
        }
      }
    }
  }
}