{"_id":"55103e2749806219000632cf","link_url":"","sync_unique":"","title":"LiveSite.js - Quickstart","type":"basic","__v":12,"category":"55055820728deb23005ec0f5","slug":"quickstart-1","githubsync":"","project":"54ad7b1d9219922100751796","excerpt":"","link_external":false,"order":0,"version":"5505581f728deb23005ec0f4","body":"vCita Client Portal 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 Client Portal actions to suit your needs. \n\nThis SDK offers two ways of customizing the Client Portal and enhance your site:\n* Customize the Client Portal widget and control it's behavior \n* Use your own layout and design to call the Client Portal 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 Client Portal Widget\n\nUsing the Client Portal widget design increases engagements on your page thanks to it's eye catching design. Using the SDK you can:\n\n* [Editing the CSS](http://developers.vcita.com/docs/css-customization) to customize the Client Portal look and feel\n* [Adding custom actions](http://developers.vcita.com/docs/custom-actions-1) to the Client Portal widget \n* [Configuring the init function](doc:advanced) to control the behavior of the widget\n\n# Using Client Portal actions in your design\n\nAny of the Client Portal 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](http://developers.vcita.com/docs/embedding-action) in buttons in your design\n* [Embed forms](https://support.vcita.com/hc/en-us/articles/227894448) in your layout \n\n#**Basic Setup - LiveSite init Function**\n\nUsing the Client Portal 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 Client Portal. You can find the embed code with your own ID in the [Client Portal 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 Client Portal 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).","hidden":false,"updates":[],"user":"54d350b5eefae10d0016cfbc","api":{"params":[],"results":{"codes":[]},"url":"","auth":"required","settings":""},"createdAt":"2015-03-23T16:24:07.403Z","isReference":false,"next":{"description":"","pages":[]},"childrenPages":[]}

LiveSite.js - Quickstart


vCita Client Portal 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 Client Portal actions to suit your needs. This SDK offers two ways of customizing the Client Portal and enhance your site: * Customize the Client Portal widget and control it's behavior * Use your own layout and design to call the Client Portal 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 Client Portal Widget Using the Client Portal widget design increases engagements on your page thanks to it's eye catching design. Using the SDK you can: * [Editing the CSS](http://developers.vcita.com/docs/css-customization) to customize the Client Portal look and feel * [Adding custom actions](http://developers.vcita.com/docs/custom-actions-1) to the Client Portal widget * [Configuring the init function](doc:advanced) to control the behavior of the widget # Using Client Portal actions in your design Any of the Client Portal 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](http://developers.vcita.com/docs/embedding-action) in buttons in your design * [Embed forms](https://support.vcita.com/hc/en-us/articles/227894448) in your layout #**Basic Setup - LiveSite init Function** Using the Client Portal 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 Client Portal. You can find the embed code with your own ID in the [Client Portal 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 Client Portal 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).