install.json

{
  "resources": {
    "body": [
      {
        "type": "style",
        "src": "./build/app.css"
      },
      {
        "type": "script",
        "src": "./build/app.js"
      }
    ]
  },
  "products": [
    {
      "created": null,
      "id": "basic",
      "longDescription": "",
      "order": 0,
      "price": 0,
      "shortDescription": "Simple notifications with limited options.",
      "title": "Basic",
      "visible": true
    },
    {
      "created": null,
      "feature": "apps.welcome_bar.pro.enabled",
      "id": "pro",
      "longDescription": "- Multiple messages\n- Hide the Welcome Bar after a specific date\n- More themes",
      "order": 0,
      "plan": "welcome_bar_pro",
      "price": 300,
      "shortDescription": "More options and customization",
      "title": "Pro",
      "visible": true
    }
  ],
  "preview": {
    "handlers": [
      {
        "options": ["_product"],
        "execute": "INSTALL_SCOPE.updateProduct(INSTALL_PRODUCT)"
      },
      {
        "options": ["_default"],
        "execute": "INSTALL_SCOPE.updateOptions(INSTALL_OPTIONS)"
      },
      {
        "options": ["theme"],
        "execute": "INSTALL_SCOPE.updateTheme(INSTALL_OPTIONS)"
      }
    ]
  },
  "options": {
    "properties": {
      "messagePlan": {
        "type": "string",
        "format": "radios",
        "order": 0,
        "enum": [
          "single",
          "multiple"
        ],
        "title": "How many messages will your vistors see?",
        "enumNames": {
          "single": "Just one message",
          "multiple": "Show visitors a random message from a collection"
        },
        "products": {
          "multiple": ["pro"]
        }
      },

      "message": {
        "showIf": {
          "messagePlan": {
            "op": "==",
            "value": "single"
          }
        },
        "order": 1,
        "title": "Message",
        "type": "string",
        "format": "textarea",
        "placeholder": "We just launched an amazing new product!"
      },

      "cta": {
        "order": 2,
        "showIf": {
          "messagePlan": {
            "op": "==",
            "value": "single"
          }
        },
        "title": "Action Button",
        "type": "object",
        "properties": {
          "show": {
            "order": 0,
            "title": "Show action button",
            "type": "boolean",
            "default": true
          },

          "label": {
            "showIf": "cta.show",
            "order": 1,
            "title": "Label",
            "type": "string",
            "placeholder": "More info"
          },

          "url": {
            "showIf": "cta.show",
            "order": 2,
            "title": "URL to drive traffic to",
            "type": "string",
            "format": "url"
          },

          "newWindow": {
            "showIf": "cta.show",
            "order": 3,
            "title": "Open URL in new window",
            "type": "boolean"
          }
        }
      },

      "messages": {
        "showIf": {
          "messagePlan": {
            "op": "==",
            "value": "multiple"
          }
        },
        "order": 1,
        "type": "array",
        "title": "Messages",
        "description": "Add multiple messages to show one to vistors at random. The previewer will show your last edited message.",
        "items": {
          "type": "object",
          "properties": {
            "message": {
              "title": "Message",
              "type": "string",
              "format": "textarea",
              "order": 0,
              "placeholder": "We just launched an amazing new product!"
            },

            "cta": {
              "order": 1,
              "title": "Action Button",
              "type": "object",
              "properties": {
                "show": {
                  "order": 0,
                  "title": "Show action button",
                  "type": "boolean",
                  "default": true
                },

                "label": {
                  "showIf": "cta.show",
                  "order": 1,
                  "title": "Label",
                  "type": "string",
                  "placeholder": "More info"
                },

                "url": {
                  "showIf": "cta.show",
                  "order": 2,
                  "title": "URL to drive traffic to",
                  "type": "string",
                  "format": "url"
                },

                "newWindow": {
                  "showIf": "cta.show",
                  "order": 3,
                  "title": "Open URL in new window",
                  "type": "boolean"
                }
              }
            },

            "useEndDate": {
              "order": 2,
              "title": "Hide after a specific date",
              "type": "boolean",
              "default": false,
              "products": ["pro"]
            },

            "endDate": {
              "showIf": "messages[].useEndDate",
              "order": 3,
              "title": "End Date",
              "description": "When should this message stop appearing?",
              "type": "string",
              "format": "time",
              "format": "date-time",
              "default": "January 1 2020 1:30 PM EST"
            }
          }
        }
      },

      "behavior": {
        "order": 3,
        "title": "Dismissal Behavior",
        "type": "object",
        "properties": {
          "showCloseButton": {
            "order": 0,
            "title": "Show close button",
            "description": "Closed messages will stay hidden for 1 week.",
            "type": "boolean",
            "default": true
          },

          "automaticallyHide": {
            "order": 2,
            "title": "Automatically dismiss after a few seconds",
            "type": "boolean",
            "default": false,
            "products": ["pro"]
          }
        }
      },

      "theme": {
        "title": "Theme",
        "type": "object",
        "order": 4,
        "properties": {
          "style": {
            "order": 0,
            "title": "Style",
            "type": "string",
            "format": "radios",
            "default": "prominent",
            "enum": [
              "prominent",
              "slim"
            ],
            "enumNames": {
              "slim": "Slim",
              "prominent": "Prominent"
            },
            "products": {
              "slim": ["pro"]
            }
          },

          "backgroundColor": {
            "title": "Welcome Bar background color",
            "type": "string",
            "format": "color",
            "order": 1,
            "default": "#0099ff"
          },

          "textColor": {
            "title": "Message text color",
            "type": "string",
            "format": "color",
            "order": 2,
            "default": "#ffffff"
          },

          "buttonColorHelp": {
            "showIf": {
              "theme.style": "prominent"
            },
            "order": 3,
            "type": "help",
            "helpvalue": "<strong>Note:</strong> Buttons will appear as text in the <strong>Message text color</strong> on mobile devices."
          },

          "buttonBackgroundColor": {
            "showIf": {
              "theme.style": "prominent"
            },
            "title": "Button background color",
            "type": "string",
            "format": "color",
            "order": 4,
            "default": "#ffffff"
          },

          "buttonTextColorStrategy": {
            "showIf": {
              "theme.style": "prominent"
            },
            "order": 5,
            "default": "auto",
            "title": "Button text color",
            "type": "string",
            "format": "radios",
            "enum": [
              "auto",
              "custom"
            ],
            "enumNames": {
              "auto": "Match the Welcome Bar background",
              "custom": "Custom"
            }
          },

          "buttonTextColor": {
            "showIf": {
              "theme.style": "prominent",
              "theme.buttonTextColorStrategy": "custom"
            },
            "notitle": true,
            "type": "string",
            "format": "color",
            "order": 6,
            "default": "#0099ff"
          }
        }
      }
    }
  }
}