{"_id":"57b474526f47ab2000247411","parentDoc":null,"project":"56cecbdb44c5700b0095c03a","version":{"_id":"56cecbdc44c5700b0095c03d","project":"56cecbdb44c5700b0095c03a","__v":10,"createdAt":"2016-02-25T09:39:40.121Z","releaseDate":"2016-02-25T09:39:40.121Z","categories":["56cecbdc44c5700b0095c03e","56d1d2c05ad7ad0b00b7e809","56d1d2fa5ad7ad0b00b7e80a","56d369331660770b00081159","56d3693d1660770b0008115a","56e5361e7990160e002e3fbc","56e5362775eb791700a9c4d2","57a9030947f2f419009188d4","57b4705ee9e4c60e00f6f4c3","5828f5b04774ab0f005179a2"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"1.0.0","version":"1.0"},"user":"56cecbb2e50c9c1b008303eb","githubsync":"","__v":0,"category":{"_id":"57b4705ee9e4c60e00f6f4c3","project":"56cecbdb44c5700b0095c03a","__v":0,"version":"56cecbdc44c5700b0095c03d","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2016-08-17T14:10:38.587Z","from_sync":false,"order":5,"slug":"web","title":"Website"},"metadata":{"title":"","description":"","image":[]},"updates":[],"next":{"pages":[],"description":""},"createdAt":"2016-08-17T14:27:30.971Z","link_external":false,"link_url":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":1,"body":"In order to send notifications to your Chrome users, you need first to configure some credentials in the Google Developer Console.\n\n1. Go to the [Google Developers Console](https://console.developers.google.com).\n\n2. On the top left corner, choose Project and create a new one (or use an existing one).\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/02e809e-Screen_Shot_2016-08-17_at_4.21.06_PM.png\",\n        \"Screen Shot 2016-08-17 at 4.21.06 PM.png\",\n        454,\n        239,\n        \"#f0f3f6\"\n      ]\n    }\n  ]\n}\n[/block]\n3. Give your app a name and select the other properties as you wish. When finished, click the Create button.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/8f06cdc-Screen_Shot_2016-08-17_at_4.24.12_PM.png\",\n        \"Screen Shot 2016-08-17 at 4.24.12 PM.png\",\n        493,\n        349,\n        \"#2c4065\"\n      ]\n    }\n  ]\n}\n[/block]\n4. After a few seconds your project will be created and automatically selected. On the left menu, select Credentials and click on the Create credentials button.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/d8ee5b2-Screen_Shot_2016-08-17_at_4.28.06_PM.png\",\n        \"Screen Shot 2016-08-17 at 4.28.06 PM.png\",\n        987,\n        401,\n        \"#f6f7f8\"\n      ]\n    }\n  ]\n}\n[/block]\n5. From the opened list, choose the API key.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/70feb65-Screen_Shot_2016-08-17_at_4.28.58_PM.png\",\n        \"Screen Shot 2016-08-17 at 4.28.58 PM.png\",\n        601,\n        384,\n        \"#ececed\"\n      ]\n    }\n  ]\n}\n[/block]\n6. In the popup, choose the Browser option.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/4664e75-Screen_Shot_2016-08-17_at_4.29.43_PM.png\",\n        \"Screen Shot 2016-08-17 at 4.29.43 PM.png\",\n        548,\n        189,\n        \"#3e547c\"\n      ]\n    }\n  ]\n}\n[/block]\n7. Give this key a name and leave the refferer empty. Once finished, click on the create button.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/b2567ee-Screen_Shot_2016-08-17_at_4.33.55_PM.png\",\n        \"Screen Shot 2016-08-17 at 4.33.55 PM.png\",\n        644,\n        452,\n        \"#cdcdce\"\n      ]\n    }\n  ]\n}\n[/block]\n8. A popup with your new API key will appear, you can close it. Copy the API key.\n\n9. On the left side menu, select Library and search for \"gcm\".\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/b6c3bca-Screen_Shot_2016-08-17_at_4.37.57_PM.png\",\n        \"Screen Shot 2016-08-17 at 4.37.57 PM.png\",\n        1203,\n        297,\n        \"#f3f4f6\"\n      ]\n    }\n  ]\n}\n[/block]\n10. Choose the Google Cloud Messaging and on the next screen, click on the Enable button.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/dac94e2-Screen_Shot_2016-08-17_at_4.38.49_PM.png\",\n        \"Screen Shot 2016-08-17 at 4.38.49 PM.png\",\n        1255,\n        362,\n        \"#f3f4f5\"\n      ]\n    }\n  ]\n}\n[/block]\n11. We've now enabled the chrome web notifications! One last thing we need is the Project number. Click on the 3 dots menu button, on the top right corner, and choose the Project Settings.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/905cc9b-Screen_Shot_2016-08-17_at_4.42.02_PM.png\",\n        \"Screen Shot 2016-08-17 at 4.42.02 PM.png\",\n        330,\n        230,\n        \"#efefef\"\n      ]\n    }\n  ]\n}\n[/block]\n12. Copy your project number and that's it! You should now have the API Key and the Project Number, which are the needed credentials, in order to start sending notifications.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/8bfd406-Screen_Shot_2016-08-17_at_4.48.15_PM.png\",\n        \"Screen Shot 2016-08-17 at 4.48.15 PM.png\",\n        716,\n        311,\n        \"#f5f7f9\"\n      ]\n    }\n  ]\n}\n[/block]","excerpt":"","slug":"chrome-configuration","type":"basic","title":"Configure Chrome Notifications"}

Configure Chrome Notifications


In order to send notifications to your Chrome users, you need first to configure some credentials in the Google Developer Console. 1. Go to the [Google Developers Console](https://console.developers.google.com). 2. On the top left corner, choose Project and create a new one (or use an existing one). [block:image] { "images": [ { "image": [ "https://files.readme.io/02e809e-Screen_Shot_2016-08-17_at_4.21.06_PM.png", "Screen Shot 2016-08-17 at 4.21.06 PM.png", 454, 239, "#f0f3f6" ] } ] } [/block] 3. Give your app a name and select the other properties as you wish. When finished, click the Create button. [block:image] { "images": [ { "image": [ "https://files.readme.io/8f06cdc-Screen_Shot_2016-08-17_at_4.24.12_PM.png", "Screen Shot 2016-08-17 at 4.24.12 PM.png", 493, 349, "#2c4065" ] } ] } [/block] 4. After a few seconds your project will be created and automatically selected. On the left menu, select Credentials and click on the Create credentials button. [block:image] { "images": [ { "image": [ "https://files.readme.io/d8ee5b2-Screen_Shot_2016-08-17_at_4.28.06_PM.png", "Screen Shot 2016-08-17 at 4.28.06 PM.png", 987, 401, "#f6f7f8" ] } ] } [/block] 5. From the opened list, choose the API key. [block:image] { "images": [ { "image": [ "https://files.readme.io/70feb65-Screen_Shot_2016-08-17_at_4.28.58_PM.png", "Screen Shot 2016-08-17 at 4.28.58 PM.png", 601, 384, "#ececed" ] } ] } [/block] 6. In the popup, choose the Browser option. [block:image] { "images": [ { "image": [ "https://files.readme.io/4664e75-Screen_Shot_2016-08-17_at_4.29.43_PM.png", "Screen Shot 2016-08-17 at 4.29.43 PM.png", 548, 189, "#3e547c" ] } ] } [/block] 7. Give this key a name and leave the refferer empty. Once finished, click on the create button. [block:image] { "images": [ { "image": [ "https://files.readme.io/b2567ee-Screen_Shot_2016-08-17_at_4.33.55_PM.png", "Screen Shot 2016-08-17 at 4.33.55 PM.png", 644, 452, "#cdcdce" ] } ] } [/block] 8. A popup with your new API key will appear, you can close it. Copy the API key. 9. On the left side menu, select Library and search for "gcm". [block:image] { "images": [ { "image": [ "https://files.readme.io/b6c3bca-Screen_Shot_2016-08-17_at_4.37.57_PM.png", "Screen Shot 2016-08-17 at 4.37.57 PM.png", 1203, 297, "#f3f4f6" ] } ] } [/block] 10. Choose the Google Cloud Messaging and on the next screen, click on the Enable button. [block:image] { "images": [ { "image": [ "https://files.readme.io/dac94e2-Screen_Shot_2016-08-17_at_4.38.49_PM.png", "Screen Shot 2016-08-17 at 4.38.49 PM.png", 1255, 362, "#f3f4f5" ] } ] } [/block] 11. We've now enabled the chrome web notifications! One last thing we need is the Project number. Click on the 3 dots menu button, on the top right corner, and choose the Project Settings. [block:image] { "images": [ { "image": [ "https://files.readme.io/905cc9b-Screen_Shot_2016-08-17_at_4.42.02_PM.png", "Screen Shot 2016-08-17 at 4.42.02 PM.png", 330, 230, "#efefef" ] } ] } [/block] 12. Copy your project number and that's it! You should now have the API Key and the Project Number, which are the needed credentials, in order to start sending notifications. [block:image] { "images": [ { "image": [ "https://files.readme.io/8bfd406-Screen_Shot_2016-08-17_at_4.48.15_PM.png", "Screen Shot 2016-08-17 at 4.48.15 PM.png", 716, 311, "#f5f7f9" ] } ] } [/block]