{"_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 its 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://developers.vcita.com/docs/quickstart-1#section--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, increases engagements on your web-page, thanks to its eye-catching design. Using the SDK you can:\n\n* [Edit the CSS](http://developers.vcita.com/docs/css-customization) to customize the Client Portal widget look and feel\n* [Add custom actions](http://developers.vcita.com/docs/custom-actions-1) to the Client Portal widget \n* [Configure 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 calls to action - schedule, leave your details, share a document, pay online and login to the client portal can be triggered separately, or integrated into your web-page 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 calls to action require that you include the 'LiveSite' init function (below) to your web-page 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>Website Widget>Client Portal Widget>Add to Website](https://app.vcita.com/app/my-livesite?section=website-widgets) 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 its behavior * Use your own layout and design to call the Client Portal actions Both methods require that you include the [LiveSite init function](http://developers.vcita.com/docs/quickstart-1#section--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, increases engagements on your web-page, thanks to its eye-catching design. Using the SDK you can: * [Edit the CSS](http://developers.vcita.com/docs/css-customization) to customize the Client Portal widget look and feel * [Add custom actions](http://developers.vcita.com/docs/custom-actions-1) to the Client Portal widget * [Configure the init function](doc:advanced) to control the behavior of the widget # Using Client Portal actions in your design Any of the Client Portal calls to action - schedule, leave your details, share a document, pay online and login to the client portal can be triggered separately, or integrated into your web-page 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 calls to action require that you include the 'LiveSite' init function (below) to your web-page 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>Website Widget>Client Portal Widget>Add to Website](https://app.vcita.com/app/my-livesite?section=website-widgets) 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).