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

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]