{"_id":"55d3aaa6f77e6d0d00b1b232","user":{"_id":"5384345d90c19d5e43a8170c","username":"","name":"Derek Skaletsky"},"__v":0,"initVersion":{"_id":"53844558a43e08da4677be12","version":"1.0"},"project":"53844557a43e08da4677be0e","hidden":false,"createdAt":"2015-08-18T21:59:02.353Z","fullscreen":false,"htmlmode":false,"html":"","body":"One of the easiest ways to get started with Knowtify is through our javascript widget. With a few lines of frontend code you can be adding new contacts, updating contacts, sending transactional emails and powering your own in-app Notification center (which we call, InBox).\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"INSTALLING KNOWTIFY\"\n}\n[/block]\nTo get started, you'll need to add our script to any web page you'd like to use Knowtify. We recommend adding this to your layout files above the closing </body> tag. You'll need to include your **Public Token** found in [Knowtify Settings](http://www.knowtify.io/settings).\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]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"ADDING CONTACTS\"\n}\n[/block]\nAfter loading our script you'll be able to send us new contacts.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<script>\\n\\t_knowtify.push(['add_contact', {\\n    email: \\\"joe@test.com\\\",\\n    id: 123,\\n    name: \\\"Joe\\\",\\n    followers: 12\\n\\t}]);\\n</script>\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n- **email** - Required\n- **id** - Recommended\n- **other attributes** - Optional. You can send us any data associated with your contact which is used as content in emails and for segmentation. In this case we added 'name' and 'followers'. You can add as many attributes as you need.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"UPDATING CONTACTS\"\n}\n[/block]\nIf you need to update any attributes associated with a contact you can send an update request.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<script>\\n  _knowtify.push(['update_contact', {\\n    id: 123,\\n    email: \\\"joe@test.com\\\",\\n    lessons_created: 1,\\n    followers: 100,\\n    sessions:\\\"+1\\\",\\n  }]);\\n</script>\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n- **id is required for updates** - This should be set to a unique number or string that isn't publicly available. This is to prevent unauthorized requests from updating contacts and sending transactional emails without your permission. This can be any random number that you create. \n- **email** - Required\n-  **attributes you want to create** - In the above case, if \"lessons_created\" didn't exist, it will create this data point on the contact record with the value you provide.\n- **attributes you want to change** - In this case we're changing the 'followers' count to 100.\n- **increment value** - In the case above, the attribute \"sessions\" would automatically be incremented by 1. \n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"EVENTS AND TRIGGERED MESSAGES\"\n}\n[/block]\nYou can use events to trigger transactional emails or InBox messages. You can ship these events over via this JavaScript API or you can use our REST API.\n \nFor the JavaScript API, it would look like this:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"_knowtify.push(['event', 'receipt', {\\n  id: 123,\\n  email: \\\"joe@test.com\\\",\\n  purchase_name: \\\"Chair\\\",\\n  purchase_price: \\\"$100\\\"\\n}]);\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nIn this case, the event 'receipt' would update the contact \"joe@test.com\" as well as deliver a message/email for which there is a corresponding template in Knowtify. That message/email would trigger upon the delivery of this event. If there is no corresponding message template in Knowtify, no message will be delivered. \n\nYou can learn more about sending alerts via InBox [here](http://api.knowtify.io/docs/sending-alerts-to-inbox).\n\n**If you send the same event multiple times it will trigger multiple messages**. \n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"GETTING STARTED WITH INBOX\"\n}\n[/block]\nOne you install the Knowtify Javascript plugin, you are ready to put your Knowtify InBox in action. The next thing to do is to actually create the element in your page which will 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).\n\nWhat you use for this element is completely up to you (it can be an icon, a link, an image - whatever you want). \n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/1Id3LRAFTyKKOu1iSOZ9_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        \"#05556b\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\nWhen 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/TDFnABTLQbKhoM2230sC_inbox_button.jpg\",\n        \"inbox_button.jpg\",\n        \"1340\",\n        \"506\",\n        \"#6ca4d4\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n###Styling your InBox\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\n###Start Firing Notifications\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]","slug":"javascript-api-inbox","title":"Javascript API & InBox"}

Javascript API & InBox


One of the easiest ways to get started with Knowtify is through our javascript widget. With a few lines of frontend code you can be adding new contacts, updating contacts, sending transactional emails and powering your own in-app Notification center (which we call, InBox). [block:api-header] { "type": "basic", "title": "INSTALLING KNOWTIFY" } [/block] To get started, you'll need to add our script to any web page you'd like to use Knowtify. We recommend adding this to your layout files above the closing </body> tag. You'll need to include your **Public Token** found in [Knowtify Settings](http://www.knowtify.io/settings). [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] [block:api-header] { "type": "basic", "title": "ADDING CONTACTS" } [/block] After loading our script you'll be able to send us new contacts. [block:code] { "codes": [ { "code": "<script>\n\t_knowtify.push(['add_contact', {\n email: \"joe@test.com\",\n id: 123,\n name: \"Joe\",\n followers: 12\n\t}]);\n</script>", "language": "javascript" } ] } [/block] - **email** - Required - **id** - Recommended - **other attributes** - Optional. You can send us any data associated with your contact which is used as content in emails and for segmentation. In this case we added 'name' and 'followers'. You can add as many attributes as you need. [block:api-header] { "type": "basic", "title": "UPDATING CONTACTS" } [/block] If you need to update any attributes associated with a contact you can send an update request. [block:code] { "codes": [ { "code": "<script>\n _knowtify.push(['update_contact', {\n id: 123,\n email: \"joe@test.com\",\n lessons_created: 1,\n followers: 100,\n sessions:\"+1\",\n }]);\n</script>", "language": "javascript" } ] } [/block] - **id is required for updates** - This should be set to a unique number or string that isn't publicly available. This is to prevent unauthorized requests from updating contacts and sending transactional emails without your permission. This can be any random number that you create. - **email** - Required - **attributes you want to create** - In the above case, if "lessons_created" didn't exist, it will create this data point on the contact record with the value you provide. - **attributes you want to change** - In this case we're changing the 'followers' count to 100. - **increment value** - In the case above, the attribute "sessions" would automatically be incremented by 1. [block:api-header] { "type": "basic", "title": "EVENTS AND TRIGGERED MESSAGES" } [/block] You can use events to trigger transactional emails or InBox messages. You can ship these events over via this JavaScript API or you can use our REST API. For the JavaScript API, it would look like this: [block:code] { "codes": [ { "code": "_knowtify.push(['event', 'receipt', {\n id: 123,\n email: \"joe@test.com\",\n purchase_name: \"Chair\",\n purchase_price: \"$100\"\n}]);", "language": "javascript" } ] } [/block] In this case, the event 'receipt' would update the contact "joe@test.com" as well as deliver a message/email for which there is a corresponding template in Knowtify. That message/email would trigger upon the delivery of this event. If there is no corresponding message template in Knowtify, no message will be delivered. You can learn more about sending alerts via InBox [here](http://api.knowtify.io/docs/sending-alerts-to-inbox). **If you send the same event multiple times it will trigger multiple messages**. [block:api-header] { "type": "basic", "title": "GETTING STARTED WITH INBOX" } [/block] One you install the Knowtify Javascript plugin, you are ready to put your Knowtify InBox in action. The next thing to do is to actually create the element in your page which will 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 (it can be an icon, a link, an image - whatever you want). [block:image] { "images": [ { "image": [ "https://files.readme.io/1Id3LRAFTyKKOu1iSOZ9_Screen%20Shot%202015-07-29%20at%205.15.26%20PM.png", "Screen Shot 2015-07-29 at 5.15.26 PM.png", "1528", "330", "#05556b", "" ] } ] } [/block] 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/TDFnABTLQbKhoM2230sC_inbox_button.jpg", "inbox_button.jpg", "1340", "506", "#6ca4d4", "" ] } ] } [/block] ###Styling your InBox 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). ###Start Firing Notifications 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]