{"_id":"55b8324ad9caa30d001aae3a","version":{"_id":"53844558a43e08da4677be12","__v":8,"project":"53844557a43e08da4677be0e","createdAt":"2014-05-27T07:57:12.136Z","releaseDate":"2014-05-27T07:57:12.136Z","categories":["53844558a43e08da4677be13","538619e1ef91f96d49aa1a0b","541e82877eb16bb64f83c0ca","5445a073c3eb3808000c76b2","5445a098c3eb3808000c76b3","54bb05ab522f03150054d9e8","54bb05cf9741c81500078f73","55b7d0e5568be2230092bb92"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"false","version_clean":"1.0.0","version":"1.0"},"user":"5384345d90c19d5e43a8170c","__v":16,"category":{"_id":"55b7d0e5568be2230092bb92","project":"53844557a43e08da4677be0e","version":"53844558a43e08da4677be12","pages":["55b7f917568be2230092bc55","55b800e2568be2230092bc85","55b83216d9caa30d001aae38","55b8324ad9caa30d001aae3a","55d3a5bac336ec0d007c222b","55d7732f4ad876170027fa1d"],"__v":6,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-07-28T18:58:45.698Z","from_sync":false,"order":2,"slug":"inbox-by-knowtify-in-app-notifications","title":"InBox by Knowtify - In-app Notifications"},"project":"53844557a43e08da4677be0e","updates":[],"next":{"pages":[],"description":""},"createdAt":"2015-07-29T01:54:18.661Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":0,"body":"[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"What is InBox by Knowtify?\"\n}\n[/block]\nInBox by Knowtify is a simple JavaScript plugin that will allow you to power a notification center in your app. You can learn more about why you might want to use InBox [here](http://knowtify.io/inbox).\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/QszZzrcxSWW3FSgKrb3I_inbox_hero_gif.gif\",\n        \"inbox_hero_gif.gif\",\n        \"885\",\n        \"577\",\n        \"#109cd5\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\nWith this JavaScript plugin, you will be able to:\n\n(a) Display a notification InBox in your application (web applications only right now)\n\n(b) Target any element on your page to create a custom InBox Button. The InBox Button is the button/icon/link that will display the number of new notifications for a user and, upon click, open up the actual InBox in your application. You control this button on your end. You can determine whatever icon or text link you want to use for this purpose. \n\nHere are a few common examples:\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/GXJpVIHTqGtHwndCiY9j_Screen%20Shot%202015-07-29%20at%205.15.26%20PM.png\",\n        \"Screen Shot 2015-07-29 at 5.15.26 PM.png\",\n        \"1528\",\n        \"330\",\n        \"#1c546b\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n(b) Style your InBox. Your InBox comes with solid \"out-of-the-box\" styling, but you will be able to customize the look and feel of your InBox as well.\n\n(c) Connect your InBox with the Knowtify interface, enabling you to deliver messages created in Knowtify to your InBox. If you haven't signed up for a Knowtify account, you will need to do that [here](http://knowtify.io). \n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"STEP 1: Configure and Install InBox Javascript\"\n}\n[/block]\nInBox is a simple JavaScript plugin. You can find the code here: \n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<script>\\n    var _knowtify = _knowtify || [];\\n    var _knowtifyInbox = _knowtifyInbox || [];\\n    _knowtify.public_token = \\\"FROM_YOUR_KNOWTIFY_ACCOUNT\\\";\\n\\n    (function(d,s,t,u){var j = d.createElement(s);var p = d.getElementsByTagName(s)[0];\\n        j.type = t;j.async = true;j.src = u;p.parentNode.insertBefore(j, p);})(document,'script','text/javascript', 'https://s3.amazonaws.com/js.knowtify.io/knowtify.js');\\n\\n    _knowtify.push(['load_inbox', 'YOUR_BUTTON_ID', {email: \\\"REQUIRED\\\", id: \\\"REQUIRED\\\" }]);\\n</script>\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nSome important notes about configuring your InBox JavaScript:\n\n1. You will create an element on your page to serve as your InBox Button (the button/icon/link that will display the alert number from InBox and, upon click, open up the actual InBox). What you use for this element is completely up to you. When configuring your Knowtify InBox, you will just add the ID of that element on your page in the JavaScript code (*the positioning of this element should be set to either Static or Relative).\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/OQJeKgsETUaz37uzVWT1_inbox_button.jpg\",\n        \"inbox_button.jpg\",\n        \"1340\",\n        \"506\",\n        \"#6ca4d4\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n2. You will need to add your Public Token that can be found on your [Knowtify Account page](http://www.knowtify.io/settings). \n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/77tcMbFPRy20ZbbCtTpF_skitch.png\",\n        \"skitch.png\",\n        \"982\",\n        \"650\",\n        \"#ee3566\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n4. You must add this JavaScript just before the </body> tag on each page you want your notification InBox to appear.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"STEP 2: Add Contacts to Knowtify\"\n}\n[/block]\nAny contact that signs into your application after this JavaScript has been installed will automatically added to your Knowtify account. This is also the case when you send trigger an alert to your InBox via an event in your code.\n\nHowever, to be able to take full advantage of the power of the InBox messaging functionality, you should add your existing contacts to Knowtify. You can do this several ways via:\n\n- [Our Javascript API](http://api.knowtify.io/docs/javascript-widget)\n- [Our REST API](http://api.knowtify.io/v1.0/docs/knowtify-api-basics)\n- [SEGMENT](doc:segmentio) \n- [A MixPanel integration](http://api.knowtify.io/docs/mixpanel-integration) \n- [CSV upload](https://knowtify.groovehq.com/knowledge_base/topics/can-i-upload-my-contacts-via-csv?from_search=true)\n\nWhen your contacts are all in Knowtify, your ability to create smart, relevant notification programs grows tremendously. \n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"STEP 3: Style your InBox (optional)\"\n}\n[/block]\nYou have the option of styling all the elements of your InBox from the font used to the background color to the size of the message cards and more. You can do this by referencing your own CSS stylesheet in the JavaScript. \n\nYou can learn more about styling your InBox and grab a sample style sheet [**here**](http://api.knowtify.io/docs/styling-your-inbox).\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"STEP 4: Start firing notifications\"\n}\n[/block]\nThe power of InBox is that it allows you to send any type of message to your new in-app notification center. You can access the messaging interface in Knowtify here: [http://knowtify.io/inbox/messages](http://knowtify.io/inbox/messages). These include:\n\n- **Events**: This are typical alerts based on specific events in your app. A friend request, task assignment, post comment, etc. You can learn how to trigger these alerts from your product [**here**](http://api.knowtify.io/docs/sending-alerts-to-inbox)\n- **Behavioral**: These are notifications that are delivered the first time a user meets a specific rule set that you create in the Knowtify interface. This will allow you to trigger a notification the first time someone logs in, five days after signup or only if they haven’t used a specific feature. There are many uses for this type of notification.\n- **Scheduled**: This functionality allows you to send messages on a schedule - good for weekly or daily notifications or any other schedule you want to create.\n- **Manual**: This is a simple one-off announcement. Good for sending all, or a group of users, a product announcement, special news, etc. \n\nTo see how to create messages in the Knowtify interface, you can watch this video:\n[block:html]\n{\n  \"html\": \"<iframe src=\\\"//fast.wistia.net/embed/iframe/jtg7x2xzhk\\\" allowtransparency=\\\"true\\\" frameborder=\\\"0\\\" scrolling=\\\"no\\\" class=\\\"wistia_embed\\\" name=\\\"wistia_embed\\\" allowfullscreen mozallowfullscreen webkitallowfullscreen oallowfullscreen msallowfullscreen width=\\\"700\\\" height=\\\"360\\\"></iframe><script src=\\\"//fast.wistia.net/assets/external/E-v1.js\\\" async></script>\"\n}\n[/block]","excerpt":"A quick overview on how to get InBox by [Knowtify](http://knowtify.io) installed in your application","slug":"get-started-with-inbox","type":"basic","title":"GET STARTED WITH INBOX"}

GET STARTED WITH INBOX

A quick overview on how to get InBox by [Knowtify](http://knowtify.io) installed in your application

[block:api-header] { "type": "basic", "title": "What is InBox by Knowtify?" } [/block] InBox by Knowtify is a simple JavaScript plugin that will allow you to power a notification center in your app. You can learn more about why you might want to use InBox [here](http://knowtify.io/inbox). [block:image] { "images": [ { "image": [ "https://files.readme.io/QszZzrcxSWW3FSgKrb3I_inbox_hero_gif.gif", "inbox_hero_gif.gif", "885", "577", "#109cd5", "" ] } ] } [/block] With this JavaScript plugin, you will be able to: (a) Display a notification InBox in your application (web applications only right now) (b) Target any element on your page to create a custom InBox Button. The InBox Button is the button/icon/link that will display the number of new notifications for a user and, upon click, open up the actual InBox in your application. You control this button on your end. You can determine whatever icon or text link you want to use for this purpose. Here are a few common examples: [block:image] { "images": [ { "image": [ "https://files.readme.io/GXJpVIHTqGtHwndCiY9j_Screen%20Shot%202015-07-29%20at%205.15.26%20PM.png", "Screen Shot 2015-07-29 at 5.15.26 PM.png", "1528", "330", "#1c546b", "" ] } ] } [/block] (b) Style your InBox. Your InBox comes with solid "out-of-the-box" styling, but you will be able to customize the look and feel of your InBox as well. (c) Connect your InBox with the Knowtify interface, enabling you to deliver messages created in Knowtify to your InBox. If you haven't signed up for a Knowtify account, you will need to do that [here](http://knowtify.io). [block:api-header] { "type": "basic", "title": "STEP 1: Configure and Install InBox Javascript" } [/block] InBox is a simple JavaScript plugin. You can find the code here: [block:code] { "codes": [ { "code": "<script>\n var _knowtify = _knowtify || [];\n var _knowtifyInbox = _knowtifyInbox || [];\n _knowtify.public_token = \"FROM_YOUR_KNOWTIFY_ACCOUNT\";\n\n (function(d,s,t,u){var j = d.createElement(s);var p = d.getElementsByTagName(s)[0];\n j.type = t;j.async = true;j.src = u;p.parentNode.insertBefore(j, p);})(document,'script','text/javascript', 'https://s3.amazonaws.com/js.knowtify.io/knowtify.js');\n\n _knowtify.push(['load_inbox', 'YOUR_BUTTON_ID', {email: \"REQUIRED\", id: \"REQUIRED\" }]);\n</script>", "language": "javascript" } ] } [/block] Some important notes about configuring your InBox JavaScript: 1. You will create an element on your page to serve as your InBox Button (the button/icon/link that will display the alert number from InBox and, upon click, open up the actual InBox). What you use for this element is completely up to you. When configuring your Knowtify InBox, you will just add the ID of that element on your page in the JavaScript code (*the positioning of this element should be set to either Static or Relative). [block:image] { "images": [ { "image": [ "https://files.readme.io/OQJeKgsETUaz37uzVWT1_inbox_button.jpg", "inbox_button.jpg", "1340", "506", "#6ca4d4", "" ] } ] } [/block] 2. You will need to add your Public Token that can be found on your [Knowtify Account page](http://www.knowtify.io/settings). [block:image] { "images": [ { "image": [ "https://files.readme.io/77tcMbFPRy20ZbbCtTpF_skitch.png", "skitch.png", "982", "650", "#ee3566", "" ] } ] } [/block] 4. You must add this JavaScript just before the </body> tag on each page you want your notification InBox to appear. [block:api-header] { "type": "basic", "title": "STEP 2: Add Contacts to Knowtify" } [/block] Any contact that signs into your application after this JavaScript has been installed will automatically added to your Knowtify account. This is also the case when you send trigger an alert to your InBox via an event in your code. However, to be able to take full advantage of the power of the InBox messaging functionality, you should add your existing contacts to Knowtify. You can do this several ways via: - [Our Javascript API](http://api.knowtify.io/docs/javascript-widget) - [Our REST API](http://api.knowtify.io/v1.0/docs/knowtify-api-basics) - [SEGMENT](doc:segmentio) - [A MixPanel integration](http://api.knowtify.io/docs/mixpanel-integration) - [CSV upload](https://knowtify.groovehq.com/knowledge_base/topics/can-i-upload-my-contacts-via-csv?from_search=true) When your contacts are all in Knowtify, your ability to create smart, relevant notification programs grows tremendously. [block:api-header] { "type": "basic", "title": "STEP 3: Style your InBox (optional)" } [/block] You have the option of styling all the elements of your InBox from the font used to the background color to the size of the message cards and more. You can do this by referencing your own CSS stylesheet in the JavaScript. You can learn more about styling your InBox and grab a sample style sheet [**here**](http://api.knowtify.io/docs/styling-your-inbox). [block:api-header] { "type": "basic", "title": "STEP 4: Start firing notifications" } [/block] The power of InBox is that it allows you to send any type of message to your new in-app notification center. You can access the messaging interface in Knowtify here: [http://knowtify.io/inbox/messages](http://knowtify.io/inbox/messages). These include: - **Events**: This are typical alerts based on specific events in your app. A friend request, task assignment, post comment, etc. You can learn how to trigger these alerts from your product [**here**](http://api.knowtify.io/docs/sending-alerts-to-inbox) - **Behavioral**: These are notifications that are delivered the first time a user meets a specific rule set that you create in the Knowtify interface. This will allow you to trigger a notification the first time someone logs in, five days after signup or only if they haven’t used a specific feature. There are many uses for this type of notification. - **Scheduled**: This functionality allows you to send messages on a schedule - good for weekly or daily notifications or any other schedule you want to create. - **Manual**: This is a simple one-off announcement. Good for sending all, or a group of users, a product announcement, special news, etc. To see how to create messages in the Knowtify interface, you can watch this video: [block:html] { "html": "<iframe src=\"//fast.wistia.net/embed/iframe/jtg7x2xzhk\" allowtransparency=\"true\" frameborder=\"0\" scrolling=\"no\" class=\"wistia_embed\" name=\"wistia_embed\" allowfullscreen mozallowfullscreen webkitallowfullscreen oallowfullscreen msallowfullscreen width=\"700\" height=\"360\"></iframe><script src=\"//fast.wistia.net/assets/external/E-v1.js\" async></script>" } [/block]