{"_id":"5b4f89c431267e0003700154","project":"55208137623ff50d009b2bec","version":{"_id":"55208137623ff50d009b2bef","__v":15,"project":"55208137623ff50d009b2bec","createdAt":"2015-04-05T00:26:31.564Z","releaseDate":"2015-04-05T00:26:31.563Z","categories":["55208138623ff50d009b2bf0","55494a226a82a10d00817ae5","55494ba7ee219b0d001743c8","55494bc1ee219b0d001743cc","56ead8c1df765617008bccaf","573a2073dd007d1700cf288f","579695b1f64c9f0e007cd76c","57969e3dfa1ff60e006a1274","579a4592fd9f3c0e008e4f4a","57ab9afe54fa780e006c5430","57b784f5b7ebd60e009cb4a6","58f686818193090f008cec76","59e79fbd4cf31900341d50c6","5b2436973fd93f0003dcf99d","5d824fb2ce98a801366098a2"],"is_deprecated":false,"is_hidden":false,"is_beta":true,"is_stable":true,"codename":"","version_clean":"1.0.0","version":"1.0"},"category":{"_id":"55494bc1ee219b0d001743cc","pages":["55496509c634cf2d0012507c","5549650ecd09b317005f8f4e","55496535a5ecbc1900321683","5549654dcd09b317005f8f53","55496557c634cf2d0012507e","55496563cd09b317005f8f55","55496673a5ecbc190032168a","55496682cd09b317005f8f5e","5549668da5ecbc190032168c","55497c3ea5ecbc19003216bd","55c1047d81dc010d00d50678","55c3cad1b0778d2100a7ebd8","5638e41e3539050d0008205f","563a2ac1f0c29b1700daaf98","563a2b7ef0c29b1700daafa2","563a2d83d25e8919005f3f05"],"project":"55208137623ff50d009b2bec","version":"55208137623ff50d009b2bef","__v":16,"sync":{"url":"","isSync":false},"reference":true,"createdAt":"2015-05-05T23:01:21.408Z","from_sync":false,"order":3,"slug":"features","title":"Features"},"user":"58dd58d815f4150f00839ba0","githubsync":"","__v":0,"parentDoc":null,"metadata":{"title":"","description":"","image":[]},"updates":[],"next":{"pages":[],"description":""},"createdAt":"2018-07-18T18:41:08.175Z","link_external":false,"link_url":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":true,"order":7,"body":"[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/0da7076-ChatWidgetDocs.png\",\n        \"ChatWidgetDocs.png\",\n        658,\n        482,\n        \"#34b4fb\"\n      ],\n      \"caption\": \"Chat Widget Image\"\n    }\n  ]\n}\n[/block]\n# Installation\n\nTo add the chat widget to a page, add the following HTML tag within the `<head></head>` tag of the page:\n\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<script src=\\\"https://s3.amazonaws.com/sonar-chat-widget/production/bundle.js\\\" data-widget-id=\\\"[your-chat-widget-id]\\\" id=\\\"sonar-chat-async-embedder\\\"></script>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\nYou can then display the chat widget on the page using the following Javascript:\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"window.SonarChatWidget && window.SonarChatWidget.display()\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"info\",\n  \"title\": \"Note\",\n  \"body\": \"We recommend having the `window.SonarChatWidget &&` check (or something similar) in case there is some issue with the script or the user's browser\"\n}\n[/block]\n# Settings\n\nThere are a number of settings that you can use to customize your chat widget. The following settings are configurable:\n\n\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"Setting Key\",\n    \"h-1\": \"Description\",\n    \"0-0\": \"initial_message_text\",\n    \"0-1\": \"The text displayed when the widget first opens\",\n    \"1-0\": \"success_text\",\n    \"1-1\": \"The text that appears after a successful submission\",\n    \"2-0\": \"delay\",\n    \"2-1\": \"The delay in milliseconds before the widget opens\",\n    \"3-0\": \"primary_color\",\n    \"3-1\": \"The hex color for the widget (e.g. \\\"#00B4FF\\\")\",\n    \"5-0\": \"avatar_user_email\",\n    \"5-1\": \"The email of the Sonar user whose avatar will appear in the widget\",\n    \"6-0\": \"campaign_id\",\n    \"6-1\": \"The slug of the campaign that should go out to a customer who submits their number. You can get this slug from the Campaigns page in Sonar\",\n    \"7-0\": \"customer_properties\",\n    \"7-1\": \"A set of properties to set on the customer in Sonar.The following properties will be updated directly on the customer:\\n- first_name\\n- last_name\\n\\nAll other values will be created as properties attached to the customer.\\n\\nExample:\\n```\\n{\\n  first_name: 'Tom',\\n  from_widget: 'true'\\n}\\n```\\n\\nThat will update the customer's first name to \\\"Tom\\\" and set a property on the customer with the name \\\"from_widget\\\" and a value of \\\"true\\\".\",\n    \"4-0\": \"margin\",\n    \"4-1\": \"Custom CSS margin applied to the widget. Should be a string matching the standard CSS margin syntax (e.g. \\\"0px 25px 0px 0px\\\") to set a margin of 25 pixels on the right side\"\n  },\n  \"cols\": 2,\n  \"rows\": 8\n}\n[/block]\nYou should set defaults for each of these settings, but you can also override the default setting on a page. To override any settings, you would pass them into the call of `SonarChatWidget.display` like the following:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"SonarChatWidget.display({\\n  initial_message_text: 'Hey, this is a different message!',\\n  campaign_id: 'Other_Campaign_12345',\\n  // default properties will be preserved unless overwritten by a matching property here\\n  customer_properties: {\\n\\t\\tprop_with_default: 'new value',\\n    other_prop: 'true'\\n  }\\n})\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nIn addition to the `display` method, there is also an `update` method that you can use to update the settings of the widget using JS. This can be useful if you need to change message text or customer properties based on the user's actions on the page.\n\nIt is called with a settings object with the same structure as the call to display:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"SonarChatWidget.update({\\n  initial_message_text: 'Looks like you clicked a button on the page!',\\n  customer_properties: {\\n    button_clicked: true\\n  }\\n})\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nThese settings and properties will be merged with the existing ones, preserving any that are not overwritten and adding new ones. This will reset the delay timer (to an updated delay if provided, or to the original delay) if the widget had not yet opened.","excerpt":"","slug":"chat-widget","type":"basic","title":"Chat Widget"}
[block:image] { "images": [ { "image": [ "https://files.readme.io/0da7076-ChatWidgetDocs.png", "ChatWidgetDocs.png", 658, 482, "#34b4fb" ], "caption": "Chat Widget Image" } ] } [/block] # Installation To add the chat widget to a page, add the following HTML tag within the `<head></head>` tag of the page: [block:code] { "codes": [ { "code": "<script src=\"https://s3.amazonaws.com/sonar-chat-widget/production/bundle.js\" data-widget-id=\"[your-chat-widget-id]\" id=\"sonar-chat-async-embedder\"></script>", "language": "html" } ] } [/block] You can then display the chat widget on the page using the following Javascript: [block:code] { "codes": [ { "code": "window.SonarChatWidget && window.SonarChatWidget.display()", "language": "javascript" } ] } [/block] [block:callout] { "type": "info", "title": "Note", "body": "We recommend having the `window.SonarChatWidget &&` check (or something similar) in case there is some issue with the script or the user's browser" } [/block] # Settings There are a number of settings that you can use to customize your chat widget. The following settings are configurable: [block:parameters] { "data": { "h-0": "Setting Key", "h-1": "Description", "0-0": "initial_message_text", "0-1": "The text displayed when the widget first opens", "1-0": "success_text", "1-1": "The text that appears after a successful submission", "2-0": "delay", "2-1": "The delay in milliseconds before the widget opens", "3-0": "primary_color", "3-1": "The hex color for the widget (e.g. \"#00B4FF\")", "5-0": "avatar_user_email", "5-1": "The email of the Sonar user whose avatar will appear in the widget", "6-0": "campaign_id", "6-1": "The slug of the campaign that should go out to a customer who submits their number. You can get this slug from the Campaigns page in Sonar", "7-0": "customer_properties", "7-1": "A set of properties to set on the customer in Sonar.The following properties will be updated directly on the customer:\n- first_name\n- last_name\n\nAll other values will be created as properties attached to the customer.\n\nExample:\n```\n{\n first_name: 'Tom',\n from_widget: 'true'\n}\n```\n\nThat will update the customer's first name to \"Tom\" and set a property on the customer with the name \"from_widget\" and a value of \"true\".", "4-0": "margin", "4-1": "Custom CSS margin applied to the widget. Should be a string matching the standard CSS margin syntax (e.g. \"0px 25px 0px 0px\") to set a margin of 25 pixels on the right side" }, "cols": 2, "rows": 8 } [/block] You should set defaults for each of these settings, but you can also override the default setting on a page. To override any settings, you would pass them into the call of `SonarChatWidget.display` like the following: [block:code] { "codes": [ { "code": "SonarChatWidget.display({\n initial_message_text: 'Hey, this is a different message!',\n campaign_id: 'Other_Campaign_12345',\n // default properties will be preserved unless overwritten by a matching property here\n customer_properties: {\n\t\tprop_with_default: 'new value',\n other_prop: 'true'\n }\n})", "language": "javascript" } ] } [/block] In addition to the `display` method, there is also an `update` method that you can use to update the settings of the widget using JS. This can be useful if you need to change message text or customer properties based on the user's actions on the page. It is called with a settings object with the same structure as the call to display: [block:code] { "codes": [ { "code": "SonarChatWidget.update({\n initial_message_text: 'Looks like you clicked a button on the page!',\n customer_properties: {\n button_clicked: true\n }\n})", "language": "javascript" } ] } [/block] These settings and properties will be merged with the existing ones, preserving any that are not overwritten and adding new ones. This will reset the delay timer (to an updated delay if provided, or to the original delay) if the widget had not yet opened.