{"metadata":{"image":[],"title":"","description":""},"api":{"url":"","auth":"required","params":[],"results":{"codes":[]},"settings":""},"next":{"description":"","pages":[]},"title":"Ping Widget","type":"basic","slug":"ping-widget","excerpt":"","body":"[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/f975b07-hello29.png\",\n        \"hello29.png\",\n        1062,\n        1677,\n        \"#4d5ce6\"\n      ],\n      \"caption\": \"The Ping Widget in action.\"\n    }\n  ]\n}\n[/block]\nTo access the Ping Widget, open the Menu bar, click on the ****Tools**** tab, and select ****Ping Widget****.\n\nThe Ping Widget is a great way to get started with Sonar and SMS. Simply put the Ping Widget on your website and whenever someone visits your website on a mobile device, a button is generated that says \"Click here to text us\". When clicked, the customer's native SMS app opens up with your Sonar phone number pre-populated. \n[block:callout]\n{\n  \"type\": \"info\",\n  \"title\": \"Note\",\n  \"body\": \"The Ping Widget only appears on *mobile devices*, even when you install it on all pages of your website.\"\n}\n[/block]\n## **Installation**\n\nWith a few lines of a javascript and about 5 minutes of your time, you can easily install the Ping Widget. Here's an example of what the Ping Widget javascript code looks like:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<script data-version=\\\"v1\\\" data-widget-id=\\\"YOUR_ID_GOES_HERE\\\" id=\\\"sonar-ping-async-embedder\\\" type=\\\"text/javascript\\\"> (function() { function async_load(){ var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; var theUrl = '//www.sendsonar.com/assets/send-sonar.js'; s.src = theUrl + ( theUrl.indexOf(\\\"?\\\") >= 0 ? \\\"&\\\" : \\\"?\\\") + 'ref=' + encodeURIComponent(window.location.href); var embedder = document.getElementById('sonar-ping-async-embedder'); embedder.parentNode.insertBefore(s, embedder); } if (window.attachEvent) window.attachEvent('onload', async_load); else window.addEventListener('load', async_load, false); })(); </script>\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"info\",\n  \"title\": \"Placement\",\n  \"body\": \"You should place this JS snippet in the <head> </head> of your website on all pages you'd like for it to pop up on.\"\n}\n[/block]\n## **Settings**\n\nYou can customize a few things about the Ping Widget: \n* Background color\n* Prompt text\n* Delay before appearing \n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/2f8151b-hello30.png\",\n        \"hello30.png\",\n        729,\n        260,\n        \"#efeeea\"\n      ],\n      \"caption\": \"Ping Widget settings page\"\n    }\n  ]\n}\n[/block]\n## **Analytics**\n\nWithin the Sonar Analytics dashboard, you'll be able to see a granular breakdown of the number of views, clicks, and click-through rate of the Ping Widget. \n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/1bb51fa-ping.png\",\n        \"ping.png\",\n        1336,\n        590,\n        \"#10bcda\"\n      ]\n    }\n  ]\n}\n[/block]\n\nThe Ping Widget also provides a lifetime view of your metrics. \n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/QKWb269NTQ6L1v6AlLiy_Screen%20Shot%202015-05-06%20at%2012.02.27%20PM.png\",\n        \"Screen Shot 2015-05-06 at 12.02.27 PM.png\",\n        \"770\",\n        \"230\",\n        \"#449cbc\",\n        \"\"\n      ],\n      \"caption\": \"\"\n    }\n  ]\n}\n[/block]","updates":[],"order":21,"isReference":true,"hidden":false,"sync_unique":"","link_url":"","link_external":false,"_id":"55496535a5ecbc1900321683","githubsync":"","category":{"sync":{"isSync":false,"url":""},"pages":["55496509c634cf2d0012507c","5549650ecd09b317005f8f4e","55496535a5ecbc1900321683","5549654dcd09b317005f8f53","55496557c634cf2d0012507e","55496563cd09b317005f8f55","55496673a5ecbc190032168a","55496682cd09b317005f8f5e","5549668da5ecbc190032168c","55497c3ea5ecbc19003216bd","55c1047d81dc010d00d50678","55c3cad1b0778d2100a7ebd8","5638e41e3539050d0008205f","563a2ac1f0c29b1700daaf98","563a2b7ef0c29b1700daafa2","563a2d83d25e8919005f3f05"],"title":"Features","slug":"features","order":2,"from_sync":false,"reference":true,"_id":"55494bc1ee219b0d001743cc","project":"55208137623ff50d009b2bec","version":"55208137623ff50d009b2bef","__v":16,"createdAt":"2015-05-05T23:01:21.408Z"},"project":"55208137623ff50d009b2bec","version":{"version":"1.0","version_clean":"1.0.0","codename":"","is_stable":true,"is_beta":true,"is_hidden":false,"is_deprecated":false,"categories":["55208138623ff50d009b2bf0","55494a226a82a10d00817ae5","55494ba7ee219b0d001743c8","55494bc1ee219b0d001743cc","56ead8c1df765617008bccaf","573a2073dd007d1700cf288f","579695b1f64c9f0e007cd76c","57969e3dfa1ff60e006a1274","579a4592fd9f3c0e008e4f4a","57ab9afe54fa780e006c5430","57b784f5b7ebd60e009cb4a6","58f686818193090f008cec76","59e79fbd4cf31900341d50c6","5b2436973fd93f0003dcf99d","5d824fb2ce98a801366098a2"],"_id":"55208137623ff50d009b2bef","createdAt":"2015-04-05T00:26:31.564Z","releaseDate":"2015-04-05T00:26:31.563Z","__v":15,"project":"55208137623ff50d009b2bec"},"createdAt":"2015-05-06T00:49:57.681Z","parentDoc":null,"__v":14,"user":"55208129504fd6230022ae20"}

Getting Started Guide

How Sonar Works

Features

Public API

Integrations

Facebook Messenger

Product Updates

Salesforce Package Updates

Ping Widget

[block:image] { "images": [ { "image": [ "https://files.readme.io/f975b07-hello29.png", "hello29.png", 1062, 1677, "#4d5ce6" ], "caption": "The Ping Widget in action." } ] } [/block] To access the Ping Widget, open the Menu bar, click on the ****Tools**** tab, and select ****Ping Widget****. The Ping Widget is a great way to get started with Sonar and SMS. Simply put the Ping Widget on your website and whenever someone visits your website on a mobile device, a button is generated that says "Click here to text us". When clicked, the customer's native SMS app opens up with your Sonar phone number pre-populated. [block:callout] { "type": "info", "title": "Note", "body": "The Ping Widget only appears on *mobile devices*, even when you install it on all pages of your website." } [/block] ## **Installation** With a few lines of a javascript and about 5 minutes of your time, you can easily install the Ping Widget. Here's an example of what the Ping Widget javascript code looks like: [block:code] { "codes": [ { "code": "<script data-version=\"v1\" data-widget-id=\"YOUR_ID_GOES_HERE\" id=\"sonar-ping-async-embedder\" type=\"text/javascript\"> (function() { function async_load(){ var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; var theUrl = '//www.sendsonar.com/assets/send-sonar.js'; s.src = theUrl + ( theUrl.indexOf(\"?\") >= 0 ? \"&\" : \"?\") + 'ref=' + encodeURIComponent(window.location.href); var embedder = document.getElementById('sonar-ping-async-embedder'); embedder.parentNode.insertBefore(s, embedder); } if (window.attachEvent) window.attachEvent('onload', async_load); else window.addEventListener('load', async_load, false); })(); </script>", "language": "javascript" } ] } [/block] [block:callout] { "type": "info", "title": "Placement", "body": "You should place this JS snippet in the <head> </head> of your website on all pages you'd like for it to pop up on." } [/block] ## **Settings** You can customize a few things about the Ping Widget: * Background color * Prompt text * Delay before appearing [block:image] { "images": [ { "image": [ "https://files.readme.io/2f8151b-hello30.png", "hello30.png", 729, 260, "#efeeea" ], "caption": "Ping Widget settings page" } ] } [/block] ## **Analytics** Within the Sonar Analytics dashboard, you'll be able to see a granular breakdown of the number of views, clicks, and click-through rate of the Ping Widget. [block:image] { "images": [ { "image": [ "https://files.readme.io/1bb51fa-ping.png", "ping.png", 1336, 590, "#10bcda" ] } ] } [/block] The Ping Widget also provides a lifetime view of your metrics. [block:image] { "images": [ { "image": [ "https://files.readme.io/QKWb269NTQ6L1v6AlLiy_Screen%20Shot%202015-05-06%20at%2012.02.27%20PM.png", "Screen Shot 2015-05-06 at 12.02.27 PM.png", "770", "230", "#449cbc", "" ], "caption": "" } ] } [/block]