{"_id":"5432e4d15b5b950800f4edc9","__v":6,"is_link":false,"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"},"category":{"_id":"5445a098c3eb3808000c76b3","project":"53844557a43e08da4677be0e","version":"53844558a43e08da4677be12","__v":3,"pages":["5432e4d15b5b950800f4edc9","5445c719bfa07c0800f3a12e","5447ea9c0319802200fc06e6","54512f34a66f020800dbab10"],"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2014-10-20T23:54:00.481Z","from_sync":false,"order":5,"slug":"additional-functionality","title":"Additional functionality"},"project":"53844557a43e08da4677be0e","user":"5432d74e8780d4080074d772","updates":[],"next":{"pages":[],"description":""},"createdAt":"2014-10-06T18:52:01.580Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"basic_auth":false,"results":{"codes":[]},"try":true,"auth":"never","params":[],"url":""},"isReference":false,"order":0,"body":"The Knowtify javascript widget is a simple, configurable chunk of javascript you can drop into any web page and start collecting signups immediately. Here's what it looks like (you can see it live on our blog: http://blog.knowtify.io):\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/jHneR3GCT1OZHGs4P9Xm_rss_64_colors.gif\",\n        \"rss_64_colors.gif\",\n        \"993\",\n        \"565\",\n        \"#31465e\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n\nTo try it out, you'll need to insert your Public Token from http://www.knowtify.io/settings into the following code. Then just drop the code into a webpage before the </body> tag and you're ready to go!\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<script>\\n\\twindow.knowtifyJS = {\\tpublic_token: \\\"YOUR_PUBLIC_TOKEN\\\" }\\n</script>\\n<script src=\\\"http://js.knowtify.io/contacts_form.js\\\" type=\\\"text/javascript\\\" defer></script>\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Configuring your widget\"\n}\n[/block]\nNeed to change the fonts, colors or add categories? No problem, we've got you covered! The following is what your javascript will look like if you need to make some serious changes to our design. All of the attributes are fairly self explanatory but we'll go over each one below the code.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<script>\\n\\twindow.knowtifyJS = {\\n\\t\\tpublic_token: \\\"YOUR_PUBLIC_TOKEN\\\",\\n\\t\\tsubscribe_button_text: \\\"Subscribe to our newsletter\\\",\\n\\t\\tsubscribe_button_position: \\\"bottom_right\\\",\\n\\t\\tsubscribe_button_font_color: \\\"#fff\\\",\\n\\t\\tsubscribe_button_color: \\\"#60b6e2\\\",\\n\\t\\tsubscribe_button_font: \\\"helvetica neue\\\",\\n\\t\\tsubscribe_button_font_size: \\\"15px\\\",\\n    subscribe_button_font_weight: 200,\\n\\t\\tpopup_font: \\\"helvetica neue\\\",\\n\\t\\tpopup_font_color: \\\"#444\\\",\\n\\t\\tpopup_font_weight: 500,\\n\\t\\tpopup_letter_spacing: \\\"1px\\\",\\n\\t\\tthank_you_message: \\\"Thanks for subscribing!\\\",\\n\\t\\tcategories: \\\"SaaS,User Engagement,Code,Design\\\"\\n\\t}\\n</script>\\n\\n<script src=\\\"http://js.knowtify.io/contacts_form.js\\\" type=\\\"text/javascript\\\" defer></script>\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n- *public_token:* Be sure to use your Public Token and not the API Token!\n- *subscribe_button_text:* The text inside the button overlay.\n- *subscribe_button_position:* This tells us where to position the button overlay on your page it can be top, top_left, top_right, bottom, bottom_left or bottom_right.\n- *subscribe_button_font_color:* The color of the text in the button overlay.\n- *subscribe_button_color:* The color of the button and mail icon of the overlay.\n- *subscribe_button_font:* Font family of the overlay button.\n- *subscribe_button_font_size:* Font size of the overlay button. If you want your button to be larger to stand out more, try bumping this up to 20-30px.\n- *subscribe_button_font_weight:* Font weight of the button overlay.\n- *popup_font:* The font family for the popup box.\n- *popup_font_color:* The color of the font and buttons on the popup box.\n- *popup_font_weight:* The weight of the heading and text on the popup box.\n- *popup_letter_spacing:* Letter spacing for font on popup box. Some fonts just don't look right without a bit of letter spacing.\n- *thank_you_message:* This is the text that appears after a subscriber adds their name and email.\n- *categories:* If you want to let people subscribe to specific categories, just add a comma separated list of categories.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Automatic Popup\"\n}\n[/block]\nYou can automatically show the popup either immediately after the page loads or after a set number of seconds. To do this add a property called popup_timer to your configuration and the value is the number of seconds before the widget displays. (0 for immediate) It should look something like this.\n\nThe popup will only display for users who have modern browsers that support localStorage and it will only show 1 time per user, per client. So if a user views your site on Chrome they'll see the popup once but not un subsequent views. Then if they open Safari, they'll see it again but only once.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<script>\\n\\twindow.knowtifyJS = {\\n\\t\\tpublic_token: \\\"YOUR_PUBLIC_TOKEN\\\",\\n\\t\\t/* other config properties... */\\n  \\tpopup_timer: 3\\n\\t}\\n</script>\\n\\n<script src=\\\"http://js.knowtify.io/contacts_form.js\\\" type=\\\"text/javascript\\\" defer></script>\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Custom buttons\"\n}\n[/block]\nYou can easily trigger from clicks to buttons, links or any other clickable element on your site. To do this simply add a property to your widget configuration called 'target_elements'  and a CSS selector for 1 or more element you'd like to trigger the popup. The configuration should look like this.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<script>\\n\\twindow.knowtifyJS = {\\n\\t\\tpublic_token: \\\"YOUR_PUBLIC_TOKEN\\\",\\n\\t\\t/* other config properties... */\\n  \\ttarget_elements: \\\"#newsletter_button\\\"\\n\\t}\\n</script>\\n\\n<script src=\\\"http://js.knowtify.io/contacts_form.js\\\" type=\\\"text/javascript\\\" defer></script>\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nYour html which triggers the popup could look like this.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<button id=\\\"newsletter_button\\\" data-categories=\\\"nfl\\\">NFL Newsletter</button>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\nNotice the attribute called 'data-categories'. You can add a list of comma separated categories which are added to the popup can custom to the element. This is particularly valuable if you have multiple buttons on the page.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Hide the default button\"\n}\n[/block]\nIf you don't want to show our default button you can simply set the 'subscribe_button_position' property to 'hide'. It should look like this.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<script>\\n\\twindow.knowtifyJS = {\\n\\t\\tpublic_token: \\\"YOUR_PUBLIC_TOKEN\\\",\\n\\t\\t/* other config properties... */\\n  \\tsubscribe_button_position: \\\"hide\\\"\\n\\t}\\n</script>\\n\\n<script src=\\\"http://js.knowtify.io/contacts_form.js\\\" type=\\\"text/javascript\\\" defer></script>\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]","excerpt":"Javascript widget to collect newsletter signups","slug":"newsletter-signup-widget","type":"basic","title":"Newsletter Signup Widget"}

Newsletter Signup Widget

Javascript widget to collect newsletter signups

The Knowtify javascript widget is a simple, configurable chunk of javascript you can drop into any web page and start collecting signups immediately. Here's what it looks like (you can see it live on our blog: http://blog.knowtify.io): [block:image] { "images": [ { "image": [ "https://files.readme.io/jHneR3GCT1OZHGs4P9Xm_rss_64_colors.gif", "rss_64_colors.gif", "993", "565", "#31465e", "" ] } ] } [/block] To try it out, you'll need to insert your Public Token from http://www.knowtify.io/settings into the following code. Then just drop the code into a webpage before the </body> tag and you're ready to go! [block:code] { "codes": [ { "code": "<script>\n\twindow.knowtifyJS = {\tpublic_token: \"YOUR_PUBLIC_TOKEN\" }\n</script>\n<script src=\"http://js.knowtify.io/contacts_form.js\" type=\"text/javascript\" defer></script>", "language": "javascript" } ] } [/block] [block:api-header] { "type": "basic", "title": "Configuring your widget" } [/block] Need to change the fonts, colors or add categories? No problem, we've got you covered! The following is what your javascript will look like if you need to make some serious changes to our design. All of the attributes are fairly self explanatory but we'll go over each one below the code. [block:code] { "codes": [ { "code": "<script>\n\twindow.knowtifyJS = {\n\t\tpublic_token: \"YOUR_PUBLIC_TOKEN\",\n\t\tsubscribe_button_text: \"Subscribe to our newsletter\",\n\t\tsubscribe_button_position: \"bottom_right\",\n\t\tsubscribe_button_font_color: \"#fff\",\n\t\tsubscribe_button_color: \"#60b6e2\",\n\t\tsubscribe_button_font: \"helvetica neue\",\n\t\tsubscribe_button_font_size: \"15px\",\n subscribe_button_font_weight: 200,\n\t\tpopup_font: \"helvetica neue\",\n\t\tpopup_font_color: \"#444\",\n\t\tpopup_font_weight: 500,\n\t\tpopup_letter_spacing: \"1px\",\n\t\tthank_you_message: \"Thanks for subscribing!\",\n\t\tcategories: \"SaaS,User Engagement,Code,Design\"\n\t}\n</script>\n\n<script src=\"http://js.knowtify.io/contacts_form.js\" type=\"text/javascript\" defer></script>", "language": "javascript" } ] } [/block] - *public_token:* Be sure to use your Public Token and not the API Token! - *subscribe_button_text:* The text inside the button overlay. - *subscribe_button_position:* This tells us where to position the button overlay on your page it can be top, top_left, top_right, bottom, bottom_left or bottom_right. - *subscribe_button_font_color:* The color of the text in the button overlay. - *subscribe_button_color:* The color of the button and mail icon of the overlay. - *subscribe_button_font:* Font family of the overlay button. - *subscribe_button_font_size:* Font size of the overlay button. If you want your button to be larger to stand out more, try bumping this up to 20-30px. - *subscribe_button_font_weight:* Font weight of the button overlay. - *popup_font:* The font family for the popup box. - *popup_font_color:* The color of the font and buttons on the popup box. - *popup_font_weight:* The weight of the heading and text on the popup box. - *popup_letter_spacing:* Letter spacing for font on popup box. Some fonts just don't look right without a bit of letter spacing. - *thank_you_message:* This is the text that appears after a subscriber adds their name and email. - *categories:* If you want to let people subscribe to specific categories, just add a comma separated list of categories. [block:api-header] { "type": "basic", "title": "Automatic Popup" } [/block] You can automatically show the popup either immediately after the page loads or after a set number of seconds. To do this add a property called popup_timer to your configuration and the value is the number of seconds before the widget displays. (0 for immediate) It should look something like this. The popup will only display for users who have modern browsers that support localStorage and it will only show 1 time per user, per client. So if a user views your site on Chrome they'll see the popup once but not un subsequent views. Then if they open Safari, they'll see it again but only once. [block:code] { "codes": [ { "code": "<script>\n\twindow.knowtifyJS = {\n\t\tpublic_token: \"YOUR_PUBLIC_TOKEN\",\n\t\t/* other config properties... */\n \tpopup_timer: 3\n\t}\n</script>\n\n<script src=\"http://js.knowtify.io/contacts_form.js\" type=\"text/javascript\" defer></script>", "language": "javascript" } ] } [/block] [block:api-header] { "type": "basic", "title": "Custom buttons" } [/block] You can easily trigger from clicks to buttons, links or any other clickable element on your site. To do this simply add a property to your widget configuration called 'target_elements' and a CSS selector for 1 or more element you'd like to trigger the popup. The configuration should look like this. [block:code] { "codes": [ { "code": "<script>\n\twindow.knowtifyJS = {\n\t\tpublic_token: \"YOUR_PUBLIC_TOKEN\",\n\t\t/* other config properties... */\n \ttarget_elements: \"#newsletter_button\"\n\t}\n</script>\n\n<script src=\"http://js.knowtify.io/contacts_form.js\" type=\"text/javascript\" defer></script>", "language": "javascript" } ] } [/block] Your html which triggers the popup could look like this. [block:code] { "codes": [ { "code": "<button id=\"newsletter_button\" data-categories=\"nfl\">NFL Newsletter</button>", "language": "html" } ] } [/block] Notice the attribute called 'data-categories'. You can add a list of comma separated categories which are added to the popup can custom to the element. This is particularly valuable if you have multiple buttons on the page. [block:api-header] { "type": "basic", "title": "Hide the default button" } [/block] If you don't want to show our default button you can simply set the 'subscribe_button_position' property to 'hide'. It should look like this. [block:code] { "codes": [ { "code": "<script>\n\twindow.knowtifyJS = {\n\t\tpublic_token: \"YOUR_PUBLIC_TOKEN\",\n\t\t/* other config properties... */\n \tsubscribe_button_position: \"hide\"\n\t}\n</script>\n\n<script src=\"http://js.knowtify.io/contacts_form.js\" type=\"text/javascript\" defer></script>", "language": "javascript" } ] } [/block]