{"_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,"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":"","githubsync":"","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"}

Widgets and Website Integration

REST API

Partners API

Widget Configuration

Methods to control the behavior of the LiveSite widget
The LiveSite SDK allows you to control the behavior of the widget on a per website \ per page basis. This 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. For a live demo of a page with built in LiveSite actions see our [sample site library](http://www.betterwebsitetoday.com/) # The init() function Once 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. [block:code] { "codes": [ { "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>", "language": "html" } ] } [/block] To 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 [block:code] { "codes": [ { "code": "// reset of embed code ...\n\nLiveSite.init({\n\tid : 'your-livesite-widget-id',\n activeEngage: false\n});\n\n// ... reset of embed code", "language": "javascript" } ] } [/block] As mentioned above, options may depend on your website logic, for example [block:code] { "codes": [ { "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", "language": "javascript" } ] } [/block] #Commonly Used Options [block:parameters] { "data": { "h-0": "Option", "h-1": "Value", "h-2": "String", "0-0": "activeEngage", "0-1": "true / false", "0-2": "Whether to show the LiveSite Invite", "1-0": "engageButton", "1-1": "true / false", "1-2": "Whether to show the LiveSite Invite engage button (showing in close mode)", "4-0": "actionButtons", "4-1": "true / false", "4-2": "Whether to show the LiveSite action buttons menu", "5-0": "myAccountAction", "5-1": "true / false", "5-2": "Whether to show the *My Account* action", "6-0": "identifyClient", "6-1": "true / false", "6-2": "Whether to identify returning clients and present notifications accordingly", "8-0": "defaultContactTitle", "2-0": "inlineActions", "2-1": "true / false", "2-2": "Whether to show the actions stripe on the bottom of the Livesite Invite", "3-0": "collapsedActions", "3-1": "true / false", "3-2": "Whether to show the collapsed actions menu button besides the main LiveSite Invite action", "7-0": "cookie", "7-1": "true / false", "7-2": "Disable cookies", "8-1": "String", "8-2": "Change the default action title across all *contact* actions", "9-0": "ui", "9-1": "true / false", "9-2": "Whether to show the widget layer of the LiveSite SDK", "10-0": "engageButtonText", "10-1": "String", "10-2": "Customize the text on the LiveSite widget label (closed state)" }, "cols": 3, "rows": 11 } [/block] #Using Your Own Lightbox for Actions Livesite.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 [block:code] { "codes": [ { "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", "language": "javascript" } ] } [/block]