{"__v":18,"_id":"55afa3e3902fd51700f5f858","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":"5540cdbf5cf9682100d61a97","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":"2015-07-22T14:08:35.074Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":18,"body":"[block:callout]\n{\n  \"type\": \"info\",\n  \"title\": \"In-App Messaging feature is currently in beta\",\n  \"body\": \"Please [contact us](https://pushwoosh.com/contact-us) if you would like to try out this functionality in your apps.\"\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Overview\"\n}\n[/block]\nIn-App messages are notifications that are displayed to a user within the app in response to user interactions. The message itself is deeply customizable as it is based on HTML/CSS/JS, so developers and marketers can make such messages look and feel like a natural part of the application.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/UsXX1btS3KvEPfPmeVzT_iOS_IAM_NPS_example.png\",\n        \"iOS_IAM_NPS_example.png\",\n        \"535\",\n        \"365\",\n        \"#587d92\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\nWith In-App messages you can reach all your users, opposed to push notifications that can be delivered only to those who opted-in, which increases the overall audience you can connect with. As In-App messages are displayed based on user behavior and actions performed within the app, they are deeply contextual and relevant to a user while push notifications not always can be triggered with such precision.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Creative\"\n}\n[/block]\nYour creative can be displayed in 4 different positions on the screen:\n- fullscreen - covers the whole screen of the device\n- center box - vertically equally centered\n- top banner - sticks to the top of the screen\n- bottom banner - sticks to the bottom of the screen\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/B3HasNqR22K6XG65UuyQ_Pushwoosh___Applications_____Runtastic_PW___In-Apps.png\",\n        \"Pushwoosh___Applications_____Runtastic_PW___In-Apps.png\",\n        \"1058\",\n        \"705\",\n        \"#1ba2d7\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\nBasically, In-App messages are HTML-based pages that are displayed in a custom web view of the application. An In-App should be compressed to a **.zip** file and comply with the rules below:\n- an archive should contain an index.html file in its root folder;\n- all images, CSS and JS files must be included in the .zip archive;\n- you can use remote images in In-Apps, but for iOS they should use *https* protocol unless you add **Allow Arbitrary Loads** to **Info.plist**;\n\nBy default web view has no margins, and its content is horizontally centered. For side margins, insert `width: 100%` in the CSS of the page body, and `width: 96%; margin: 0 2%;` in the outermost container.\n\nFor rounded corners, insert `border-radius: 10px` in the CSS of your outermost CSS container.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Segment\"\n}\n[/block]\nOnce you've uploaded a .zip with your creative, you should choose the segment of users who should be eligible of receiving this message. This segmentation is divided into two parts - Behavior and Tags.\n\n## Behavior\nBehavior segmentation is based on [Events](http://pushwoosh.readme.io/docs/events), i.e. based on actions a user performed while using the app.\nThe example below will target all users who successfully logged in at least 1 time during the last 7 days with their Facebook account.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/ZqbVqSlETtOmlCuuxKIm_Pushwoosh___Applications___Demo_application___In-Apps.png\",\n        \"Pushwoosh___Applications___Demo_application___In-Apps.png\",\n        \"472\",\n        \"507\",\n        \"#0fa38a\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n## Tags\nTag segmentation is based on Pushwoosh Tags, such as Country, City, Language, Device model, etc.\nThe example below will narrow the segment to only those devices, which locale is English and on which the application was opened last time between 1 and 3 days ago range.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/IUdkFXiVSZ6vUGG7MVcV_Pushwoosh___Applications___Demo_application___In-Apps.png\",\n        \"Pushwoosh___Applications___Demo_application___In-Apps.png\",\n        \"664\",\n        \"410\",\n        \"#0a9ce3\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Rules\"\n}\n[/block]\nNow as you have the creative and narrowed down the audience of users who will receive the IAM, you should set up a rule that answers the question \"When the message should be displayed?\".\nIn-App messages are displayed when a certain event is triggered in the app. You can either set a bare event to trigger an In-App (e.g. show it upon every *ArticleShared* event), or make it specific to the context (e.g. show it only if an article was shared by a user with **facebook** value of the loginType attribute).\n\nThe example below shows that the In-App is triggered only if the **buttonPressed** event has the **signout**  value of the buttonLabel attribute.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/vDIttIFR8GAI200Hqo7V_Pushwoosh___Applications___Demo_application___In-Apps.png\",\n        \"Pushwoosh___Applications___Demo_application___In-Apps.png\",\n        \"1099\",\n        \"261\",\n        \"#189e4c\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Frequency Capping\"\n}\n[/block]\nYou can use *Frequency Capping* to limit the number of times In-Apps are displayed to the particular user.\n\n- Limit total number of In-App impressions\n- Limit number of impressions in X days\n- Add a delay (in days) between In-App impressions\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/7e7c195-Pushwoosh___Applications___Frequency___In-Apps.png\",\n        \"Pushwoosh___Applications___Frequency___In-Apps.png\",\n        1092,\n        404,\n        \"#41aae0\"\n      ]\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"In-App Javascript\"\n}\n[/block]\nIn-Apps are HTML-based and support Javascript. Pushwoosh SDK injects *pushManager* variable that provides the following API:\n\nYou can use *postEvent* method to send an event from In-App Javascript code.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"var successCallback = function() {\\n  console.log(\\\"Post event success\\\");\\n}\\n\\nvar errorCallback = function(message) {\\n  console.log(\\\"Post event failed: \\\", message);\\n  alert(\\\"Post event failed: \\\" + message);\\n}\\n\\npushManager.postEvent(JSON.stringify({\\n  \\\"event\\\": \\\"someEvent\\\",\\n  \\\"attributes\\\": {\\n    \\\"AttributeString\\\": \\\"someString\\\",\\n    \\\"AttributeInt\\\": 42,\\n    \\\"AttributeList\\\": [123, 456, \\\"someString\\\"],\\n    \\\"AttributeBool\\\": true,\\n    \\\"AttributeNull\\\": null,\\n    \\\"AttributeDate\\\": \\\"2015-07-28 19:45\\\" // YYYY-MM-DD hh:mm format\\n  };,\\n  \\\"success\\\": \\\"successCallback\\\", // optional\\n  \\\"error\\\": \\\"errorCallback\\\" // optional\\n}));\",\n      \"language\": \"javascript\",\n      \"name\": \"Example:\"\n    }\n  ]\n}\n[/block]\nYou can use *setTags* method to set tags for the device from an In-App:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"pushManager.sendTags(JSON.stringify({\\n  \\\"IntTag\\\": 42,\\n  \\\"BoolTag\\\": true,\\n  \\\"StringTag\\\": \\\"Some String\\\",\\n  \\\"ListTag\\\": [\\\"string1\\\", \\\"string2\\\"]\\n}));\",\n      \"language\": \"javascript\",\n      \"name\": \"Example\"\n    }\n  ]\n}\n[/block]\nIf you want to close an In-App from the Javascript code call `closeInApp()` method:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"pushManager.closeInApp();\",\n      \"language\": \"javascript\",\n      \"name\": \"Example\"\n    }\n  ]\n}\n[/block]\nOr simply use custom scheme URL for the button/link `<a href=\"pushwoosh://close\">`","excerpt":"","slug":"in-app-messages","type":"basic","title":"In-App Messages"}
[block:callout] { "type": "info", "title": "In-App Messaging feature is currently in beta", "body": "Please [contact us](https://pushwoosh.com/contact-us) if you would like to try out this functionality in your apps." } [/block] [block:api-header] { "type": "basic", "title": "Overview" } [/block] In-App messages are notifications that are displayed to a user within the app in response to user interactions. The message itself is deeply customizable as it is based on HTML/CSS/JS, so developers and marketers can make such messages look and feel like a natural part of the application. [block:image] { "images": [ { "image": [ "https://files.readme.io/UsXX1btS3KvEPfPmeVzT_iOS_IAM_NPS_example.png", "iOS_IAM_NPS_example.png", "535", "365", "#587d92", "" ] } ] } [/block] With In-App messages you can reach all your users, opposed to push notifications that can be delivered only to those who opted-in, which increases the overall audience you can connect with. As In-App messages are displayed based on user behavior and actions performed within the app, they are deeply contextual and relevant to a user while push notifications not always can be triggered with such precision. [block:api-header] { "type": "basic", "title": "Creative" } [/block] Your creative can be displayed in 4 different positions on the screen: - fullscreen - covers the whole screen of the device - center box - vertically equally centered - top banner - sticks to the top of the screen - bottom banner - sticks to the bottom of the screen [block:image] { "images": [ { "image": [ "https://files.readme.io/B3HasNqR22K6XG65UuyQ_Pushwoosh___Applications_____Runtastic_PW___In-Apps.png", "Pushwoosh___Applications_____Runtastic_PW___In-Apps.png", "1058", "705", "#1ba2d7", "" ] } ] } [/block] Basically, In-App messages are HTML-based pages that are displayed in a custom web view of the application. An In-App should be compressed to a **.zip** file and comply with the rules below: - an archive should contain an index.html file in its root folder; - all images, CSS and JS files must be included in the .zip archive; - you can use remote images in In-Apps, but for iOS they should use *https* protocol unless you add **Allow Arbitrary Loads** to **Info.plist**; By default web view has no margins, and its content is horizontally centered. For side margins, insert `width: 100%` in the CSS of the page body, and `width: 96%; margin: 0 2%;` in the outermost container. For rounded corners, insert `border-radius: 10px` in the CSS of your outermost CSS container. [block:api-header] { "type": "basic", "title": "Segment" } [/block] Once you've uploaded a .zip with your creative, you should choose the segment of users who should be eligible of receiving this message. This segmentation is divided into two parts - Behavior and Tags. ## Behavior Behavior segmentation is based on [Events](http://pushwoosh.readme.io/docs/events), i.e. based on actions a user performed while using the app. The example below will target all users who successfully logged in at least 1 time during the last 7 days with their Facebook account. [block:image] { "images": [ { "image": [ "https://files.readme.io/ZqbVqSlETtOmlCuuxKIm_Pushwoosh___Applications___Demo_application___In-Apps.png", "Pushwoosh___Applications___Demo_application___In-Apps.png", "472", "507", "#0fa38a", "" ] } ] } [/block] ## Tags Tag segmentation is based on Pushwoosh Tags, such as Country, City, Language, Device model, etc. The example below will narrow the segment to only those devices, which locale is English and on which the application was opened last time between 1 and 3 days ago range. [block:image] { "images": [ { "image": [ "https://files.readme.io/IUdkFXiVSZ6vUGG7MVcV_Pushwoosh___Applications___Demo_application___In-Apps.png", "Pushwoosh___Applications___Demo_application___In-Apps.png", "664", "410", "#0a9ce3", "" ] } ] } [/block] [block:api-header] { "type": "basic", "title": "Rules" } [/block] Now as you have the creative and narrowed down the audience of users who will receive the IAM, you should set up a rule that answers the question "When the message should be displayed?". In-App messages are displayed when a certain event is triggered in the app. You can either set a bare event to trigger an In-App (e.g. show it upon every *ArticleShared* event), or make it specific to the context (e.g. show it only if an article was shared by a user with **facebook** value of the loginType attribute). The example below shows that the In-App is triggered only if the **buttonPressed** event has the **signout** value of the buttonLabel attribute. [block:image] { "images": [ { "image": [ "https://files.readme.io/vDIttIFR8GAI200Hqo7V_Pushwoosh___Applications___Demo_application___In-Apps.png", "Pushwoosh___Applications___Demo_application___In-Apps.png", "1099", "261", "#189e4c", "" ] } ] } [/block] [block:api-header] { "type": "basic", "title": "Frequency Capping" } [/block] You can use *Frequency Capping* to limit the number of times In-Apps are displayed to the particular user. - Limit total number of In-App impressions - Limit number of impressions in X days - Add a delay (in days) between In-App impressions [block:image] { "images": [ { "image": [ "https://files.readme.io/7e7c195-Pushwoosh___Applications___Frequency___In-Apps.png", "Pushwoosh___Applications___Frequency___In-Apps.png", 1092, 404, "#41aae0" ] } ] } [/block] [block:api-header] { "type": "basic", "title": "In-App Javascript" } [/block] In-Apps are HTML-based and support Javascript. Pushwoosh SDK injects *pushManager* variable that provides the following API: You can use *postEvent* method to send an event from In-App Javascript code. [block:code] { "codes": [ { "code": "var successCallback = function() {\n console.log(\"Post event success\");\n}\n\nvar errorCallback = function(message) {\n console.log(\"Post event failed: \", message);\n alert(\"Post event failed: \" + message);\n}\n\npushManager.postEvent(JSON.stringify({\n \"event\": \"someEvent\",\n \"attributes\": {\n \"AttributeString\": \"someString\",\n \"AttributeInt\": 42,\n \"AttributeList\": [123, 456, \"someString\"],\n \"AttributeBool\": true,\n \"AttributeNull\": null,\n \"AttributeDate\": \"2015-07-28 19:45\" // YYYY-MM-DD hh:mm format\n };,\n \"success\": \"successCallback\", // optional\n \"error\": \"errorCallback\" // optional\n}));", "language": "javascript", "name": "Example:" } ] } [/block] You can use *setTags* method to set tags for the device from an In-App: [block:code] { "codes": [ { "code": "pushManager.sendTags(JSON.stringify({\n \"IntTag\": 42,\n \"BoolTag\": true,\n \"StringTag\": \"Some String\",\n \"ListTag\": [\"string1\", \"string2\"]\n}));", "language": "javascript", "name": "Example" } ] } [/block] If you want to close an In-App from the Javascript code call `closeInApp()` method: [block:code] { "codes": [ { "code": "pushManager.closeInApp();", "language": "javascript", "name": "Example" } ] } [/block] Or simply use custom scheme URL for the button/link `<a href="pushwoosh://close">`