{"__v":10,"_id":"56d859b8b159f10b00304577","category":{"__v":26,"_id":"55a4ff5b2e70c0250038050f","pages":["55a4ff7d750a9a23005332af","55a4ff8b750a9a23005332b1","55a4ff9b750a9a23005332b3","55a60bfcaaf9cf1900114efb","55a6184880c8a30d00b32526","55a61ba780c8a30d00b32532","55a61c97aaf9cf1900114f40","55a61ea9aaf9cf1900114f48","55a6206580c8a30d00b32544","55a64277aaf9cf1900114fc2","55a694d1aaf9cf1900115102","55a6a23eaaf9cf19001151e2","55a6a9b389c9da1900e2a41d","55a6aba45f88a70d0065b255","55a90687c8bd450d000dd157","55af84f3aa902f1700300daa","55afa3e3902fd51700f5f858","55b0cc5cb3171b3700b153fa","56015bdc3aa0520d00da0ced","5603fe3490ee490d004404c2","5633dd18d28a340d004004f5","56448c697a8cb50d00a3ea3f","56d7a2ec5208281500a2506c","56d859b8b159f10b00304577","56d9822add90610b002708a1","56ef44c6e8d6fa17006f244f"],"project":"5540ce1b31827a0d007ab1cc","version":"5540ce1c31827a0d007ab1cf","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-07-14T12:23:55.603Z","from_sync":false,"order":2,"slug":"features","title":"Features"},"parentDoc":null,"project":"5540ce1b31827a0d007ab1cc","user":"5540e0f5bb9e762d00f594c0","version":{"__v":31,"_id":"5540ce1c31827a0d007ab1cf","project":"5540ce1b31827a0d007ab1cc","createdAt":"2015-04-29T12:27:08.390Z","releaseDate":"2015-04-29T12:27:08.390Z","categories":["5540ce1c31827a0d007ab1d0","5540d91bbb9e762d00f594ad","5540e5f131827a0d007ab212","5540e5febb9e762d00f594d3","5540e61331827a0d007ab213","5540e6195cf9682100d61afa","5540e62631827a0d007ab214","5540e63031827a0d007ab215","5540e63531827a0d007ab216","5540e63e5cf9682100d61afc","5540e6445cf9682100d61afd","5540e64a5cf9682100d61afe","55a4ff5b2e70c0250038050f","55acb28318eefd0d0071d504","55ae1abe8576b92300291c80","55ae453ef302af23000ac109","55af586d555b900d0036d296","55af91dac8a85321007a53c3","55b9fee204775a2f00628071","55b9ff0e04775a2f00628072","55b9ff4604775a2f00628073","55b9ff5fd72d1e1900276a38","55b9ff7f04775a2f00628074","55b9ff90eb08801900f833e5","55b9ffa5d72d1e1900276a39","55b9ffca04775a2f00628075","55b9fffdd72d1e1900276a3a","56bc2f033ee9e70d008b46af","56c2f6efbbf9ec2d00e0fe4f","57595bbb18760817001e8bbe","57d8d9793916800e003dde53"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"1.0.0","version":"1.0"},"updates":[],"next":{"pages":[],"description":""},"createdAt":"2016-03-03T15:35:20.354Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":23,"body":"[block:callout]\n{\n  \"type\": \"success\",\n  \"title\": \"iOS 9 important information\",\n  \"body\": \"iOS 9 enables App Transport Security by default and requires all the network connection to support HTTPS and Perfect Secrecy. To use images, videos or other content for Rich Media that comes from non-secure HTTP servers you have to disable ATS in your app.\\n\\nFollow this post to disable ATS for your app:\\nhttp://stackoverflow.com/questions/31254725/transport-security-has-blocked-a-cleartext-http\"\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"1. Template structure\"\n}\n[/block]\nTemplate is simply a .zip archive that can contain html, javascript, css and images as Rich Media assets.\nThe archive must contain **index.html** file in its root.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"2. Template placeholders\"\n}\n[/block]\nYou can use placeholders in the Rich Media templates that will allow you to change and localize the values in Rich Media content.\n\nA placeholder must follow the format below:\n{{*Placeholder name*|*Type*|*Default value*}}\n\nWhere:\n**Placeholder name** - is the name of the placeholder that will be visible in the Rich Media editor.\n**Type** - is the type of the placeholder. The type can be any of the following values:\n    * color - color input\n    * text - text input\n    * html - text area (multiline text)\n**Default value** - default value that is used if no value is provided in the editor. If none is set then *Placeholder name* is used as a default value.\n\nExample: {{Header text|text|Tell Us What You Think}}\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"3. Pushwoosh.json file\"\n}\n[/block]\nYou can group placeholders together so they would be linked together in the Rich Media form:\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/bYI4VdQFKpNL1ezMhrHw_Rich_Media_Templates_syntax.png\",\n        \"Rich_Media_Templates_syntax.png\",\n        \"1025\",\n        \"662\",\n        \"#11436d\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\nYou can achieve that by adding *pushwoosh.json* file to the template archive. Place it next to the *index.html* file you have there.\n\nThe structure of the file is very simple and should be self explanatory:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"{\\n  \\\"input_groups\\\": [\\n    [\\\"Logo image URL\\\", \\\"Logo background color\\\"],\\n    [\\\"Topic text\\\", \\\"Topic text color\\\", \\\"Topic background color\\\", \\\"Sub-topic text\\\"],\\n    [\\\"Main text\\\", \\\"Text background color\\\"],\\n    [\\\"Button text\\\", \\\"Button URL\\\", \\\"Button text color\\\", \\\"Button background color\\\"]\\n  ]\\n}\",\n      \"language\": \"json\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"4. Example\"\n}\n[/block]\nHere's the example for one of the default templates in the Control Panel. Happy coding!\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<!DOCTYPE html>\\n<html>\\n<head>\\n    <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>\\n    <style type=\\\"text/css\\\">\\n        html, body {\\n            height: 100%;\\n            width: 100%;\\n            padding: 0;\\n            margin: 0;\\n            font-family: \\\"Open Sans\\\";\\n        }\\n        .main {\\n            height: 100%;\\n            width: 100%;\\n            box-sizing: border-box;\\n            -moz-box-sizing: border-box;\\n            -webkit-box-sizing: border-box;\\n        }\\n        .logo {\\n            width: 100%;\\n            height: 15%;\\n            background-image: url('{{Logo image URL|text|https://www.pushwoosh.com/wp-content/themes/pushwoosh/img/logo.png}}');\\n            background-position: 50% 50%;\\n            background-size: 50%;\\n            background-repeat: no-repeat;\\n            background-color: #{{Logo background color|color|343434}};\\n        }\\n        .topic-wrapper {\\n            width: 100%;\\n            height: 30%;\\n            text-align: center;\\n            display: table;\\n            color: #{{Topic text color|color|FFFFFF}};\\n            background-color: #{{Topic background color|color|23B7A4}};\\n        }\\n        .topic {\\n            display: table-cell;\\n            text-align: center;\\n            vertical-align: middle;\\n        }\\n        .topic-wrapper h1, .topic-wrapper p {\\n            margin: 0;\\n        }\\n        .padding-wrapper {\\n            width: 100%;\\n            height: 55%;\\n            box-sizing: border-box;\\n            -moz-box-sizing: border-box;\\n            -webkit-box-sizing: border-box;\\n            padding: 0 2% 0 2%;\\n            background-color: #{{Text background color|color|FFFFFF}};\\n        }\\n        .text-wrapper {\\n            height: 70%;\\n            width: 100%;\\n            padding: 2% 0 2% 0;\\n            box-sizing: border-box;\\n            -moz-box-sizing: border-box;\\n            -webkit-box-sizing: border-box;\\n            overflow: hidden;\\n        }\\n        .text {\\n            width: 100%;\\n            height: 99%;\\n            overflow: auto;\\n            padding-right: 15px;\\n        }\\n        .button-wrapper {\\n            height: 30%;\\n            width: 100%;\\n            padding: 2% 0 2% 0;\\n            box-sizing: border-box;\\n            -moz-box-sizing: border-box;\\n            -webkit-box-sizing: border-box;\\n        }\\n        .button {\\n            display: table;\\n            width: 100%;\\n            height: 100%;\\n        }\\n        .button a {\\n            display: table-cell;\\n            vertical-align: middle;\\n            text-align: center;\\n            font-size: 2em;\\n            text-decoration: none;\\n            color:#{{Button text color|color|FFFFFF}} ;\\n            border-radius: 20px;\\n            background-color: #{{Button background color|color|23B7A4}};\\n        }\\n\\n        :::at:::media only screen\\n        and (orientation: landscape) {\\n            .padding-wrapper {\\n                height: 45%;\\n            }\\n            .logo {\\n                height: 20%;\\n            }\\n            .button a {\\n                border-radius: 10px;\\n            }\\n        }\\n    </style>\\n</head>\\n<body>\\n\\n<div class=\\\"main\\\">\\n    <div class=\\\"logo\\\"></div>\\n    <div class=\\\"topic-wrapper\\\">\\n        <div class=\\\"topic\\\">\\n            <h1>{{Topic text|text|TOPIC TEXT}}</h1>\\n            <p>{{Sub-topic text|text|Subtopic here}}</p>\\n        </div>\\n    </div>\\n    <div class=\\\"padding-wrapper\\\">\\n        <div class=\\\"text-wrapper\\\">\\n            <div class=\\\"text\\\">\\n                {{Main text|html|Main text here}}\\n            </div>\\n        </div>\\n        <div class=\\\"button-wrapper\\\">\\n            <div class=\\\"button\\\">\\n                <a href=\\\"{{Button URL|text|https://www.pushwoosh.com}}\\\">\\n                    {{Button text|text|Submit}}\\n                </a>\\n            </div>\\n        </div>\\n    </div>\\n</div>\\n</body>\\n</html>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]","excerpt":"","slug":"rich-media-templates-syntax","type":"basic","title":"Rich Media Templates syntax"}

Rich Media Templates syntax


[block:callout] { "type": "success", "title": "iOS 9 important information", "body": "iOS 9 enables App Transport Security by default and requires all the network connection to support HTTPS and Perfect Secrecy. To use images, videos or other content for Rich Media that comes from non-secure HTTP servers you have to disable ATS in your app.\n\nFollow this post to disable ATS for your app:\nhttp://stackoverflow.com/questions/31254725/transport-security-has-blocked-a-cleartext-http" } [/block] [block:api-header] { "type": "basic", "title": "1. Template structure" } [/block] Template is simply a .zip archive that can contain html, javascript, css and images as Rich Media assets. The archive must contain **index.html** file in its root. [block:api-header] { "type": "basic", "title": "2. Template placeholders" } [/block] You can use placeholders in the Rich Media templates that will allow you to change and localize the values in Rich Media content. A placeholder must follow the format below: {{*Placeholder name*|*Type*|*Default value*}} Where: **Placeholder name** - is the name of the placeholder that will be visible in the Rich Media editor. **Type** - is the type of the placeholder. The type can be any of the following values: * color - color input * text - text input * html - text area (multiline text) **Default value** - default value that is used if no value is provided in the editor. If none is set then *Placeholder name* is used as a default value. Example: {{Header text|text|Tell Us What You Think}} [block:api-header] { "type": "basic", "title": "3. Pushwoosh.json file" } [/block] You can group placeholders together so they would be linked together in the Rich Media form: [block:image] { "images": [ { "image": [ "https://files.readme.io/bYI4VdQFKpNL1ezMhrHw_Rich_Media_Templates_syntax.png", "Rich_Media_Templates_syntax.png", "1025", "662", "#11436d", "" ] } ] } [/block] You can achieve that by adding *pushwoosh.json* file to the template archive. Place it next to the *index.html* file you have there. The structure of the file is very simple and should be self explanatory: [block:code] { "codes": [ { "code": "{\n \"input_groups\": [\n [\"Logo image URL\", \"Logo background color\"],\n [\"Topic text\", \"Topic text color\", \"Topic background color\", \"Sub-topic text\"],\n [\"Main text\", \"Text background color\"],\n [\"Button text\", \"Button URL\", \"Button text color\", \"Button background color\"]\n ]\n}", "language": "json" } ] } [/block] [block:api-header] { "type": "basic", "title": "4. Example" } [/block] Here's the example for one of the default templates in the Control Panel. Happy coding! [block:code] { "codes": [ { "code": "<!DOCTYPE html>\n<html>\n<head>\n <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>\n <style type=\"text/css\">\n html, body {\n height: 100%;\n width: 100%;\n padding: 0;\n margin: 0;\n font-family: \"Open Sans\";\n }\n .main {\n height: 100%;\n width: 100%;\n box-sizing: border-box;\n -moz-box-sizing: border-box;\n -webkit-box-sizing: border-box;\n }\n .logo {\n width: 100%;\n height: 15%;\n background-image: url('{{Logo image URL|text|https://www.pushwoosh.com/wp-content/themes/pushwoosh/img/logo.png}}');\n background-position: 50% 50%;\n background-size: 50%;\n background-repeat: no-repeat;\n background-color: #{{Logo background color|color|343434}};\n }\n .topic-wrapper {\n width: 100%;\n height: 30%;\n text-align: center;\n display: table;\n color: #{{Topic text color|color|FFFFFF}};\n background-color: #{{Topic background color|color|23B7A4}};\n }\n .topic {\n display: table-cell;\n text-align: center;\n vertical-align: middle;\n }\n .topic-wrapper h1, .topic-wrapper p {\n margin: 0;\n }\n .padding-wrapper {\n width: 100%;\n height: 55%;\n box-sizing: border-box;\n -moz-box-sizing: border-box;\n -webkit-box-sizing: border-box;\n padding: 0 2% 0 2%;\n background-color: #{{Text background color|color|FFFFFF}};\n }\n .text-wrapper {\n height: 70%;\n width: 100%;\n padding: 2% 0 2% 0;\n box-sizing: border-box;\n -moz-box-sizing: border-box;\n -webkit-box-sizing: border-box;\n overflow: hidden;\n }\n .text {\n width: 100%;\n height: 99%;\n overflow: auto;\n padding-right: 15px;\n }\n .button-wrapper {\n height: 30%;\n width: 100%;\n padding: 2% 0 2% 0;\n box-sizing: border-box;\n -moz-box-sizing: border-box;\n -webkit-box-sizing: border-box;\n }\n .button {\n display: table;\n width: 100%;\n height: 100%;\n }\n .button a {\n display: table-cell;\n vertical-align: middle;\n text-align: center;\n font-size: 2em;\n text-decoration: none;\n color:#{{Button text color|color|FFFFFF}} ;\n border-radius: 20px;\n background-color: #{{Button background color|color|23B7A4}};\n }\n\n @media only screen\n and (orientation: landscape) {\n .padding-wrapper {\n height: 45%;\n }\n .logo {\n height: 20%;\n }\n .button a {\n border-radius: 10px;\n }\n }\n </style>\n</head>\n<body>\n\n<div class=\"main\">\n <div class=\"logo\"></div>\n <div class=\"topic-wrapper\">\n <div class=\"topic\">\n <h1>{{Topic text|text|TOPIC TEXT}}</h1>\n <p>{{Sub-topic text|text|Subtopic here}}</p>\n </div>\n </div>\n <div class=\"padding-wrapper\">\n <div class=\"text-wrapper\">\n <div class=\"text\">\n {{Main text|html|Main text here}}\n </div>\n </div>\n <div class=\"button-wrapper\">\n <div class=\"button\">\n <a href=\"{{Button URL|text|https://www.pushwoosh.com}}\">\n {{Button text|text|Submit}}\n </a>\n </div>\n </div>\n </div>\n</div>\n</body>\n</html>", "language": "html" } ] } [/block]