{"_id":"55103e2749806219000632cf","__v":11,"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"},"project":"54ad7b1d9219922100751796","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","updates":[],"next":{"pages":[],"description":""},"createdAt":"2015-03-23T16:24:07.403Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"auth":"required","params":[],"url":""},"isReference":false,"order":0,"body":"vCita LiveSite offers a wealth of engagement tools to drive more business and deliver amazing customer service through your website. The LiveSite SDK offers you complete freedom in designing and customizing the LiveSite actions to suit your needs. \n\nThis SDK offers two ways of customizing the LiveSite and enhance your site:\n* Customize the LiveSite widget and control it's behavior \n* Use your own layout and design to call the LiveSite actions\n\nBoth methods require that you include the [LiveSite init function](http://vcita.readme.io/v2.0/docs/quickstart-20-1#basic-setup-livesite-init-function) in your code first. \n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/iipNSOr9RHiVItX67ukf_Widget%20vs%20Embedded.png\",\n        \"Widget vs Embedded.png\",\n        \"357\",\n        \"124\",\n        \"#8e7459\",\n        \"\"\n      ],\n      \"caption\": \"Left: a LiveSite widget \\\\ Right: an embedded LiveSite action\"\n    }\n  ]\n}\n[/block]\n\n\n\n# Customization of the LiveSite Widget\n\nUsing the LiveSite widget design increases engagements on your page thanks to it's eye catching design. Using the SDK you can:\n\n* [Editing the CSS](doc:css) to customize the LiveSite look and feel \n* [Adding custom actions](doc:custom) to the LiveSite widget \n* [Configuring the init function](doc:advanced) to control the behavior of the widget\n\n# Using LiveSite actions in your design\n\nAny of the LiveSite flows - scheduling, leaving your details, sharing a document, paying and entering the client portal can be triggered separately, or integrated into your layout. This gives you the ultimate control over your front end, without compromising on the backend. \n\nSee the following to:\n\n* [Embed actions](doc:embedding) in buttons in your design\n* [Embed forms](doc:*missing*) in your layout \n\n#**Basic Setup - LiveSite init Function**\n\nUsing the LiveSite actions require that you include the LiveSite init function (below) to your code. The code will load the SDK and all needed resources asynchronously.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<script>\\n  window.liveSiteAsyncInit = function() {\\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        r = Math.floor(new Date().getTime() / 1000000);\\n    if (d.getElementById(id)) {return;}\\n    js = d.createElement(s); js.id = id;\\n    js.src = p + \\\"www.vcita.com/assets/livesite.js?\\\" + r;\\n    fjs.parentNode.insertBefore(js, fjs);\\n  }(document, 'script', 'vcita-jssdk'));\\n</script>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"danger\",\n  \"body\": \"Replace the value in **your-livesite-widget-id** with the ID of your own vCita LiveSite. You can find the embed code with your own ID in the [LiveSite Embed Page](https://www.vcita.com/my/widgets/active_engage/embed) under **Other websites (HTML)**.\"\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"info\",\n  \"body\": \"Note that if you're using the LiveSite via a plugin (through vCita's platform integrations) this code will be added automatically to your page once you install the widget.\"\n}\n[/block]\n#**Need help?**\n\nThe LiveSite SDK has been built to enhance your website and to meet the unique needs of every website. If there is something you are not sure how to do or don't know if it is possible to, don't hesitate and [Contact Us](http://support.vcita.com).","excerpt":"","slug":"quickstart-1","type":"basic","title":"LiveSite.js - Quickstart"}

LiveSite.js - Quickstart


vCita LiveSite offers a wealth of engagement tools to drive more business and deliver amazing customer service through your website. The LiveSite SDK offers you complete freedom in designing and customizing the LiveSite actions to suit your needs. This SDK offers two ways of customizing the LiveSite and enhance your site: * Customize the LiveSite widget and control it's behavior * Use your own layout and design to call the LiveSite actions Both methods require that you include the [LiveSite init function](http://vcita.readme.io/v2.0/docs/quickstart-20-1#basic-setup-livesite-init-function) in your code first. [block:image] { "images": [ { "image": [ "https://files.readme.io/iipNSOr9RHiVItX67ukf_Widget%20vs%20Embedded.png", "Widget vs Embedded.png", "357", "124", "#8e7459", "" ], "caption": "Left: a LiveSite widget \\ Right: an embedded LiveSite action" } ] } [/block] # Customization of the LiveSite Widget Using the LiveSite widget design increases engagements on your page thanks to it's eye catching design. Using the SDK you can: * [Editing the CSS](doc:css) to customize the LiveSite look and feel * [Adding custom actions](doc:custom) to the LiveSite widget * [Configuring the init function](doc:advanced) to control the behavior of the widget # Using LiveSite actions in your design Any of the LiveSite flows - scheduling, leaving your details, sharing a document, paying and entering the client portal can be triggered separately, or integrated into your layout. This gives you the ultimate control over your front end, without compromising on the backend. See the following to: * [Embed actions](doc:embedding) in buttons in your design * [Embed forms](doc:*missing*) in your layout #**Basic Setup - LiveSite init Function** Using the LiveSite actions require that you include the LiveSite init function (below) to your code. The code will load the SDK and all needed resources asynchronously. [block:code] { "codes": [ { "code": "<script>\n window.liveSiteAsyncInit = function() {\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 r = Math.floor(new Date().getTime() / 1000000);\n if (d.getElementById(id)) {return;}\n js = d.createElement(s); js.id = id;\n js.src = p + \"www.vcita.com/assets/livesite.js?\" + r;\n fjs.parentNode.insertBefore(js, fjs);\n }(document, 'script', 'vcita-jssdk'));\n</script>", "language": "html" } ] } [/block] [block:callout] { "type": "danger", "body": "Replace the value in **your-livesite-widget-id** with the ID of your own vCita LiveSite. You can find the embed code with your own ID in the [LiveSite Embed Page](https://www.vcita.com/my/widgets/active_engage/embed) under **Other websites (HTML)**." } [/block] [block:callout] { "type": "info", "body": "Note that if you're using the LiveSite via a plugin (through vCita's platform integrations) this code will be added automatically to your page once you install the widget." } [/block] #**Need help?** The LiveSite SDK has been built to enhance your website and to meet the unique needs of every website. If there is something you are not sure how to do or don't know if it is possible to, don't hesitate and [Contact Us](http://support.vcita.com).