Docs » Importing Custom Data

Webhook allows you to import data in the form of a JSON file into your site. Upload your data by clicking on the Backups and Data menu item on the left side of your CMS. Uploaded data must conform to a predefined format explained below. There are three key areas of your CMS that you can import to: content types, data for those content types, and site settings. You can import all three at once, or each independently.

{
  "contentType": {...},
  "data": {...},
  "settings": {...}
}

The easiest way to see how data should be formatted is to save a backup and open up the downloaded JSON file in a text editor.

Importing data will overwrite existing data!

Before importing data, download a backup. When you import data into your CMS, all previous data at that key will first be removed. For example, uploading a JSON file with {"contentType": {...}"} will remove all content types before importing the content types in the file. It will not remove your item data or site settings.

##Content Types

Content Types are what defines your site. They let the CMS know what your forms look like and what kind of data should be stored. Here is an example of what a blog content type might look like. Each content type has three properties.

{
  "contentType": {
    "blog": {
      "name" : "Blog",
      "oneOff" : false,
      "controls" : [...]
    }
  }
}

The simplest example would be if you were to create a one off content type with the name "Favorite Song". It would be represented with the following.

{
  "contentType": {
    "favoritesong": {
      "controls": [
        {
          "controlType": "textfield",
          "hidden": false,
          "label": "Name",
          "locked": true,
          "name": "name",
          "required": true,
          "showInCms": true
        },
        {
          "controlType": "datetime",
          "hidden": true,
          "label": "Create Date",
          "locked": true,
          "name": "create_date",
          "required": true,
          "showInCms": false
        },
        {
          "controlType": "datetime",
          "hidden": true,
          "label": "Last Updated",
          "locked": true,
          "name": "last_updated",
          "required": true,
          "showInCms": false
        },
        {
          "controlType": "datetime",
          "hidden": true,
          "label": "Publish Date",
          "locked": true,
          "name": "publish_date",
          "required": false,
          "showInCms": false
        },
        {
          "controlType": "textfield",
          "hidden": true,
          "label": "Preview URL",
          "locked": true,
          "name": "preview_url",
          "required": true,
          "showInCms": false
        }
      ],
      "name": "Favorite Song",
      "oneOff": true
    }
  }
}

Five controls are automatically added to every content type upon creation: Name, Create Date, Last Updated, Publish Date, and Preview URL. With the exception of Name and Publish Date, they are all hidden and data is automatically generated for them.

###name Required, string. The name is what you want the content type to be called.

###oneOff Required, boolean. oneOff tells the system if there are one or many items within this content type

##controls Required, array. controls determine which widgets show up in the data entry form and tells the CMS how the data should be stored. All controls are formatted like the following:

{
  "showInCms" : true,
  "required" : true,
  "locked" : true,
  "hidden" : false,
  "name" : "name",
  "label" : "Name",
  "help" : "Title of your blog post.",
  "controlType" : "textfield",
  "meta": {...}
}
  • showInCms boolean. Show this control on the content type index page.
  • required boolean. Value is required when entering data.
  • locked boolean. You cannot delete locked controls. The name, label, and required properties also cannot be changed.
  • hidden boolean. Do not show control when entering data.
  • name string. The name of the control, used in templates to access data.
  • label string. The label used in the CMS for the control when entering data.
  • help string. A hint for the user when entering data.
  • controlType string. Which control should be used to enter data in the CMS.
  • meta object. Additional options specific to the control.

###Control Meta Data

Some controls have optional parameters associated with them. Here is an example of a WYSIWYG control's meta data.

"meta" : {
  "link" : true,
  "quote" : true,
  "video" : true,
  "table" : true,
  "image" : true
}

###textfield

  • min integer. Minimum number of characters.
  • max integer. Maximum number of characters.

###textarea

  • min integer. Minimum number of characters.
  • max integer. Maximum number of characters.

###wysiwyg

  • min integer. Minimum number of characters.
  • max integer. Maximum number of characters.
  • link boolean. Show the link button and handle link behavior.
  • quote boolean. Show the quote button.
  • video boolean. Show the video button.
  • table boolean. Show the table button.
  • image boolean. Show the image button.

###markdown

  • min integer. Minimum number of characters.
  • max integer. Maximum number of characters.

###number

  • min number. Minimum number.
  • max number. Maximum number.

###checkbox

  • options array of objects with a label and optional defaultValue:true. See example below.
"meta" : {
  "options" : [ {
    "label" : "Option 1",
    "defaultValue" : true
  }, {
    "label" : "Option 2"
  } ]
}

###radio

  • defaultValue string. Default value of control.
  • options array of value objects. See example below.
"meta" : {
  "options" : [ {
    "value" : "Option 1"
  }, {
    "value" : "Option 2"
  } ],
  "defaultValue" : "Option 1"
}

###select

  • defaultValue string. Default value of control.
  • options array of value objects. See example below.
"meta" : {
  "options" : [ {
    "value" : "Option 1"
  }, {
    "value" : "Option 2"
  } ],
  "defaultValue" : "Option 1"
}

###rating

  • min number. Minimum rating.
  • max number. Maximum rating.
  • step number. Rating increments between minimum and maximum.

###tabular

  • options array of value objects. See example below.
"meta" : {
  "options" : [ {
    "value" : "Column 1"
  }, {
    "value" : "Column 2"
  } ]
}

###embedly

For more information, refer to the Embed.ly documentation.

  • maxwidth number. Maximum width of widget returned by Embed.ly.
  • maxheight number. Maximum height of widget returned by Embed.ly.
  • height number. Exact height of widget returned by Embed.ly.

###relation

  • contentTypeId string. The id of the content type that this relationship points to.
  • reverseName string. The name of the reverse control on the content type that this relationship points to.

##Data

Data contains the information for every item within your content types. If there are multiple items under a content type, in this case a blog, the data will be organized like the following example.

{
  "data": {
    "blog: {
      "-JIuUbEH4353HqHoCOFv": {...},
      "-JIuWLByRCRPzXnAJPMy": {...}
    }
  }
}

If you chose the single item option when creating your content type, an about page perhaps, it might look like the following example.

{
  "data": {
    "aboutpage: {...}
  }
}

In the above examples the {...} represents the data for a single item within a content type. The data within that item will correspond to the form fields of which the content type is composed.

Data for our "Favorite Song" example above would look like the following.

{
  "data": {
    "favoritesong": {
      "_sort_create_date": 1399484700,
      "_sort_last_updated": 1399484700,
      "create_date": "2014-05-07T10:45:00-07:00",
      "last_updated": "2014-05-07T10:45:00-07:00",
      "name": "Stars 4-Ever",
      "preview_url": "b2fa42b8-819f-48d9-ed5d-cf8cba3adfd8"
    }
  }
}

The data for each field will be stored depending on the control type used.

###textfield

String

###textarea

String

###wysiwyg

String

###markdown

String

###number

Number

###radio

String

###select

String

###image

"image": {
  "height": 426,
  "resize_url": "http://lh3.ggpht.com/YlbQIy71o7fX7KgYI5XZtPYYbixnxvi1Th0l2eVYbLL1dsbHsp9EOTYDaFPTuoPhKgGKsoAls67fgmtzf9KA2yFvL8lg",
  "size": 67383,
  "type": "image/jpeg",
  "url": "/webhook-uploads/1397510731684_action.jpg",
  "width": 640
}

###gallery

"gallery": [
  {
    "height": 1536,
    "resize_url": "http://lh3.ggpht.com/lzo_n9eewVj0GB8_Owsp3osfQUIKs1sR30PQED6ZZ6cTJIMC9clBYme0jPpMfU_HHjLKlV1iN2pImabhUw4ApDZHx8Pl",
    "size": 410492,
    "type": "image/jpeg",
    "url": "/webhook-uploads/1397510774622_coast.jpg",
    "width": 2048
  },
  {
    "caption": "Mountain in with some snow.",
    "height": 1366,
    "resize_url": "http://lh6.ggpht.com/qlVKw0YfIEesAQuN9bBZny06P1tbivwvIk_G7nw-6NpXcw6XSB4I9JeXZfy59VKKD7RvkJevQoraULNLMioyEtotOQs",
    "size": 380640,
    "type": "image/jpeg",
    "url": "/webhook-uploads/1397510774771_jmt.jpg",
    "width": 2048
  }
]

###audio

"audio_file": {
  "duration": 17.3363,
  "size": 693452,
  "type": "audio/mp3",
  "url": "/webhook-uploads/1397510739677_21%20Emotional%20Baggage.mp3"
}

###file

"other_file": {
  "size": 1411,
  "type": "text/csv",
  "url": ""/webhook-uploads/1399485955510_spot_lost_coast.csv""
}

###name (person)

"person": {
  "first": "Mike",
  "last": "Horn"
}

###address

"address": {
  "city": "Washington",
  "state": "DC",
  "street1": "1600 Pennsylvania Ave NW",
  "zip": "20500"
}

###phone number

String

###email

String

###datetime

String (ISO8601 format YYYY-MM-DDTHH:mm:ssZ)

"birthday": "2014-05-07T11:10:00-07:00",
"_sort_birthday": 1399486200

Datetime fields need unix timestamps

When creating a datetime field through the CMS, a unix timestamp is also created so that sorting works in the templates. When importing data you will have to generate this as well.

###url

String

###rating

Number

###tabular

Array of arrays of strings.

"gear_weights": [
  [
    "spoon",
    "3"
  ],
  [
    "backpack",
    "200"
  ]
]

###embedly

"youtube_data": {
  "author_name": "TheDevildogGamer",
  "author_url": "http://www.youtube.com/user/TheDevildogGamer",
  "description": "Twitch: http://www.twitch.tv/thedevildoggamer",
  "height": 480,
  "html": "<iframe class=\"embedly-embed\" src=\"//cdn.embedly.com/widgets/media.html?src=http%3A%2F%2Fwww.youtube.com%2Fembed%2FJDth2jszKdg%3Ffeature%3Doembed&url=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DJDth2jszKdg&image=http%3A%2F%2Fi1.ytimg.com%2Fvi%2FJDth2jszKdg%2Fhqdefault.jpg&key=a2b00c0dc25742f1b1421c7d3ac87d10&type=text%2Fhtml&schema=youtube\" width=\"854\" height=\"480\" scrolling=\"no\" frameborder=\"0\" allowfullscreen></iframe>",
  "original_url": "https://www.youtube.com/watch?v=JDth2jszKdg",
  "provider_name": "YouTube",
  "provider_url": "http://www.youtube.com/",
  "thumbnail_height": 360,
  "thumbnail_url": "http://i1.ytimg.com/vi/JDth2jszKdg/hqdefault.jpg",
  "thumbnail_width": 480,
  "title": "Livestream",
  "type": "video",
  "url": "http://www.youtube.com/watch?v=JDth2jszKdg",
  "version": "1.0",
  "width": 854
}

###color

String (hex)

"color": "#18a825"

###relation

Array of strings.

"favorite_comics": [
  "comics -JJcl6kkS4rEr9FpmpgO",
  "comics -JIWgJybqXOcKilcXZiI"
]