{"_id":"551282a13228bc2500819b20","version":{"_id":"5505581f728deb23005ec0f4","forked_from":"54ad7b1d9219922100751799","project":"54ad7b1d9219922100751796","__v":4,"createdAt":"2015-03-15T09:59:59.748Z","releaseDate":"2015-03-15T09:59:59.748Z","categories":["55055820728deb23005ec0f5","55055820728deb23005ec0f6","554213dacbc48d0d001544ef","55421a598aeff51700a20db6","55a64fe680c8a30d00b325e0"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"2.0.0","version":"2.0"},"user":"54d350b5eefae10d0016cfbc","__v":12,"githubsync":"","project":"54ad7b1d9219922100751796","category":{"_id":"55055820728deb23005ec0f5","pages":["55055820728deb23005ec0f8","55055820728deb23005ec0f9","55055820728deb23005ec0fa","55055820728deb23005ec0fb","55055820728deb23005ec0fc","55055820728deb23005ec0fd","55055820728deb23005ec0fe","550eaf4c76b3980d00973807","550eaf6a76b3980d00973809","55103d637f4a7a1900f5793b","55103dc70f12ba0d00b2e1ca","55103e2749806219000632cf","551255784fc2a82500c08bbe","551282a13228bc2500819b20","55129599147ac60d000aa5eb","551295fc6f6de80d00790439","55a39ad35f54460d000d4c98"],"__v":11,"version":"5505581f728deb23005ec0f4","project":"54ad7b1d9219922100751796","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-01-08T12:49:43.339Z","from_sync":false,"order":0,"slug":"widgets-and-website-integration","title":"Widgets and Website Integration"},"updates":[],"next":{"pages":[],"description":""},"createdAt":"2015-03-25T09:40:49.912Z","link_external":false,"link_url":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":2,"body":"The LiveSite SDK allows you to control the behavior of the widget on a per website \\ per page basis. \n\nThis section presents the most commonly requested customizations, a full list of options can be found in the [Complete Options Reference](doc:under-the-hood#complete-options-reference) section.\n\nFor a live demo of a page with built in LiveSite actions see our [sample site library](http://www.betterwebsitetoday.com/)\n\n# The init() function\n\nOnce the LiveSite SDK [embed code](doc:quickstart#embed-code) has been added to the page the *liveSiteAsyncInit()* function will be called during the [initialization process](doc:under-the-hood#the-initialization-process). Notice the LiveSite.init()* function being called inside that function -- this is the function which initiates the configuration and rendering of the UI -- it must be called in order for the SDK to finish loading.\n[block:code]\n{\n \"codes\": [\n {\n \"code\": \"<script>\\n window.liveSiteAsyncInit = function() {\\n \\n // Your per-website / per-page logic goes here\\n \\n LiveSite.init({\\n id : 'your-livesite-widget-id' \\n });\\n };\\n (function(d, s, id){\\n var js, fjs = d.getElementsByTagName(s)[0],\\n p = (('https:' == d.location.protocol) ? 'https://' : 'http://');\\n if (d.getElementById(id)) {return;}\\n js = d.createElement(s); js.id = id;\\n js.src = p + \\\"www.vcita.com/assets/livesite.js\\\";\\n fjs.parentNode.insertBefore(js, fjs);\\n }(document, 'script', 'vcita-jssdk'));\\n</script>\",\n \"language\": \"html\"\n }\n ]\n}\n[/block]\nTo control the SDK and UI, the LiveSite.init function can receive different options. For instance, to hide the LiveSite Invite box on a specific page you can set the *activeEngage* option to false\n[block:code]\n{\n \"codes\": [\n {\n \"code\": \"// reset of embed code ...\\n\\nLiveSite.init({\\n\\tid : 'your-livesite-widget-id',\\n activeEngage: false\\n});\\n\\n// ... reset of embed code\",\n \"language\": \"javascript\"\n }\n ]\n}\n[/block]\nAs mentioned above, options may depend on your website logic, for example\n[block:code]\n{\n \"codes\": [\n {\n \"code\": \"// rest of embed code ...\\n\\nwindow.liveSiteAsyncInit = function() {\\n\\n\\t// LiveSite.fn.isMobile() is a utility method provided by the LiveSite\\n // SDK, in this case we show the Invite box only for desktop browsing\\n var show = !LiveSite.fn.isMobile();\\n\\n LiveSite.init({\\n id : 'your-livesite-widget-id',\\n activeEngage: show\\n });\\n};\\n\\n// ... rest of embed code\",\n \"language\": \"javascript\"\n }\n ]\n}\n[/block]\n#Commonly Used Options\n[block:parameters]\n{\n \"data\": {\n \"h-0\": \"Option\",\n \"h-1\": \"Value\",\n \"h-2\": \"String\",\n \"0-0\": \"activeEngage\",\n \"0-1\": \"true / false\",\n \"0-2\": \"Whether to show the LiveSite Invite\",\n \"1-0\": \"engageButton\",\n \"1-1\": \"true / false\",\n \"1-2\": \"Whether to show the LiveSite Invite engage button (showing in close mode)\",\n \"4-0\": \"actionButtons\",\n \"4-1\": \"true / false\",\n \"4-2\": \"Whether to show the LiveSite action buttons menu\",\n \"5-0\": \"myAccountAction\",\n \"5-1\": \"true / false\",\n \"5-2\": \"Whether to show the *My Account* action\",\n \"6-0\": \"identifyClient\",\n \"6-1\": \"true / false\",\n \"6-2\": \"Whether to identify returning clients and present notifications accordingly\",\n \"8-0\": \"defaultContactTitle\",\n \"2-0\": \"inlineActions\",\n \"2-1\": \"true / false\",\n \"2-2\": \"Whether to show the actions stripe on the bottom of the Livesite Invite\",\n \"3-0\": \"collapsedActions\",\n \"3-1\": \"true / false\",\n \"3-2\": \"Whether to show the collapsed actions menu button besides the main LiveSite Invite action\",\n \"7-0\": \"cookie\",\n \"7-1\": \"true / false\",\n \"7-2\": \"Disable cookies\",\n \"8-1\": \"String\",\n \"8-2\": \"Change the default action title across all *contact* actions\",\n \"9-0\": \"ui\",\n \"9-1\": \"true / false\",\n \"9-2\": \"Whether to show the widget layer of the LiveSite SDK\",\n \"10-0\": \"engageButtonText\",\n \"10-1\": \"String\",\n \"10-2\": \"Customize the text on the LiveSite widget label (closed state)\"\n },\n \"cols\": 3,\n \"rows\": 11\n}\n[/block]\n#Using Your Own Lightbox for Actions\n\nLivesite.js comes with a built in Lightbox which provides a slick and consistent look & feel. In some cases you might want to use your own Lightbox or present the actions in a different method (new tab for example). The LiveSite SDK provides a hook for replacing the container for all actions as displayed in the example below\n[block:code]\n{\n \"codes\": [\n {\n \"code\": \"// reset of embed code ...\\n\\nLiveSite.init({\\n\\tid : 'your-livesite-widget-id',\\n openerFunc: function(url) {\\n \\n lightbox(url); // Replace the lightbox call with your own lightbox, IFrame or method of your choice\\n }\\n});\\n\\n// ... reset of embed code\",\n \"language\": \"javascript\"\n }\n ]\n}\n[/block]","excerpt":"Methods to control the behavior of the LiveSite widget","slug":"advanced-widget-configuration","type":"basic","title":"Widget Configuration"}
Widget Configuration
Methods to control the behavior of the LiveSite widget