{"__v":21,"_id":"55103dc70f12ba0d00b2e1ca","category":{"__v":11,"_id":"55055820728deb23005ec0f5","pages":["55055820728deb23005ec0f8","55055820728deb23005ec0f9","55055820728deb23005ec0fa","55055820728deb23005ec0fb","55055820728deb23005ec0fc","55055820728deb23005ec0fd","55055820728deb23005ec0fe","550eaf4c76b3980d00973807","550eaf6a76b3980d00973809","55103d637f4a7a1900f5793b","55103dc70f12ba0d00b2e1ca","55103e2749806219000632cf","551255784fc2a82500c08bbe","551282a13228bc2500819b20","55129599147ac60d000aa5eb","551295fc6f6de80d00790439","55a39ad35f54460d000d4c98"],"project":"54ad7b1d9219922100751796","version":"5505581f728deb23005ec0f4","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","user":"54d350b5eefae10d0016cfbc","version":{"__v":4,"_id":"5505581f728deb23005ec0f4","forked_from":"54ad7b1d9219922100751799","project":"54ad7b1d9219922100751796","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"},"updates":[],"next":{"pages":[],"description":""},"createdAt":"2015-03-23T16:22:31.963Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"auth":"required","params":[],"url":""},"isReference":false,"order":4,"body":"Adding vCita action buttons throughout your website will help increase the number of engagements on the page. The LiveSite SDK offers seven actions that can be included in your website:\n\n* Schedule a meeting [(action reference)](http://developers.vcita.com/v2.0/docs/actions-reference#-schedule-options-)\n* Send a message [(action reference)](http://developers.vcita.com/v2.0/docs/actions-reference#-contact-options-)\n* Click to call \n* Share a Document [(action reference)](http://developers.vcita.com/v2.0/docs/actions-reference#-document-options-)\n* Pay online [(action reference)](http://developers.vcita.com/v2.0/docs/actions-reference#-pay-options-)\n* Launch My Account screen \n* Launch client Login screen [(action reference)](http://developers.vcita.com/v2.0/docs/actions-reference#-login-options-) \n\nFor a live demo of a page with built in LiveSite actions see our [sample site library](http://www.betterwebsitetoday.com/)\n\nEach action can be embedded as HTML or called using Javascript as part of your website logic. Actions added to your website can be customized with a variety of parameters. This article will cover different methods of embedding actions and the different parameters you can pass.\n\n#Embedding as HTML\n\nLiveSite Actions can be embedded using predefined css classes. This method does not require JavaScript and applies to any HTML element (<a>, <div>, <button> etc'). \n\nThe following code will open the *schedule* action when clicking on the <div> tag,\nnotice the **class=\"livesite-schedule\"** which does all the magic.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<div class=\\\"livesite-schedule\\\">Schedule an Appointment</div>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\nAccordingly, you can embed any of the actions\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<div class=\\\"livesite-contact\\\">Send a Message</div>\\n\\n<div class=\\\"livesite-call\\\">Call Us</div>\\n\\n<div class=\\\"livesite-document\\\">Share a Document</div>\\n\\n<div class=\\\"livesite-pay\\\">Pay Online</div>\\n\\n<div class=\\\"livesite-myaccount\\\">My Account</div>\\n\\n<div class=\\\"livesite-login\\\">Login</div>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\n#Passing Action Parameters\n\nLiveSite also accepts parameters that are passed to it using the *data* attributes. In the example below we add a button to register to an english class by passing a predefined *title* to the *Contact* action. \n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<!-- The data-title attribute represents the title option, title being the option name -->\\n<button class=\\\"livesite-contact\\\" data-title=\\\"Registration to your English Class\\\">Register to English Class</button>\\n\\n<!-- You can pass the parameters as one options string by using the data-options attribute -->\\n<button class=\\\"livesite-contact\\\" data-options=\\\"title:Registration to your English Class\\\">Register to English Class</button>\\n\\n<!-- You can even define the action dynamically in the data-options attribute -->\\n<button class=\\\"livesite-action\\\" data-options=\\\"action:contact;title:Registration to your English Class\\\">Register to English Class</button>\\n\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\nThe [Actions Reference](doc:actions-reference) sections covers the built-in actions and their parameters.\n\n#Calling an Action using Javascript\n\nTo call an action based on a certain behaviour on the page, you can make a JS call to initiate any of the actions. As with the embedded HTML action, you can also pass [action parameters](doc:actions-reference) to the actions.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"// JS call to the schedule action\\nLiveSite.schedule();\\n\\n// Initiate the schedule action with the name already in place\\nLiveSite.schedule({first_name: \\\"John\\\", last_name: \\\"Doe\\\"});\\n\\n// The parameters can depend on your own logic, the variable below can be \\n// from get parameters or any other flow you desire\\nvar email      = \\\"some:::at:::email.com\\\",\\n    first_name = \\\"John\\\",\\n    last_name  = \\\"Dow\\\";\\n\\nLiveSite.schedule({email: email, first_name: first_name, last_name: last_name});\\n\\n// As with the embedded actions, you can also pass the action type as a parameter according to your flow\\nLiveSite.action('schedule', {email: \\\"some@email.com\\\"});\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]","excerpt":"Add built-in actions with dynamic or static parameters to your natural website flow","slug":"embedding-action","type":"basic","title":"Website Embedded Actions"}

Website Embedded Actions

Add built-in actions with dynamic or static parameters to your natural website flow

Adding vCita action buttons throughout your website will help increase the number of engagements on the page. The LiveSite SDK offers seven actions that can be included in your website: * Schedule a meeting [(action reference)](http://developers.vcita.com/v2.0/docs/actions-reference#-schedule-options-) * Send a message [(action reference)](http://developers.vcita.com/v2.0/docs/actions-reference#-contact-options-) * Click to call * Share a Document [(action reference)](http://developers.vcita.com/v2.0/docs/actions-reference#-document-options-) * Pay online [(action reference)](http://developers.vcita.com/v2.0/docs/actions-reference#-pay-options-) * Launch My Account screen * Launch client Login screen [(action reference)](http://developers.vcita.com/v2.0/docs/actions-reference#-login-options-) For a live demo of a page with built in LiveSite actions see our [sample site library](http://www.betterwebsitetoday.com/) Each action can be embedded as HTML or called using Javascript as part of your website logic. Actions added to your website can be customized with a variety of parameters. This article will cover different methods of embedding actions and the different parameters you can pass. #Embedding as HTML LiveSite Actions can be embedded using predefined css classes. This method does not require JavaScript and applies to any HTML element (<a>, <div>, <button> etc'). The following code will open the *schedule* action when clicking on the <div> tag, notice the **class="livesite-schedule"** which does all the magic. [block:code] { "codes": [ { "code": "<div class=\"livesite-schedule\">Schedule an Appointment</div>", "language": "html" } ] } [/block] Accordingly, you can embed any of the actions [block:code] { "codes": [ { "code": "<div class=\"livesite-contact\">Send a Message</div>\n\n<div class=\"livesite-call\">Call Us</div>\n\n<div class=\"livesite-document\">Share a Document</div>\n\n<div class=\"livesite-pay\">Pay Online</div>\n\n<div class=\"livesite-myaccount\">My Account</div>\n\n<div class=\"livesite-login\">Login</div>", "language": "html" } ] } [/block] #Passing Action Parameters LiveSite also accepts parameters that are passed to it using the *data* attributes. In the example below we add a button to register to an english class by passing a predefined *title* to the *Contact* action. [block:code] { "codes": [ { "code": "<!-- The data-title attribute represents the title option, title being the option name -->\n<button class=\"livesite-contact\" data-title=\"Registration to your English Class\">Register to English Class</button>\n\n<!-- You can pass the parameters as one options string by using the data-options attribute -->\n<button class=\"livesite-contact\" data-options=\"title:Registration to your English Class\">Register to English Class</button>\n\n<!-- You can even define the action dynamically in the data-options attribute -->\n<button class=\"livesite-action\" data-options=\"action:contact;title:Registration to your English Class\">Register to English Class</button>\n", "language": "html" } ] } [/block] The [Actions Reference](doc:actions-reference) sections covers the built-in actions and their parameters. #Calling an Action using Javascript To call an action based on a certain behaviour on the page, you can make a JS call to initiate any of the actions. As with the embedded HTML action, you can also pass [action parameters](doc:actions-reference) to the actions. [block:code] { "codes": [ { "code": "// JS call to the schedule action\nLiveSite.schedule();\n\n// Initiate the schedule action with the name already in place\nLiveSite.schedule({first_name: \"John\", last_name: \"Doe\"});\n\n// The parameters can depend on your own logic, the variable below can be \n// from get parameters or any other flow you desire\nvar email = \"some@email.com\",\n first_name = \"John\",\n last_name = \"Dow\";\n\nLiveSite.schedule({email: email, first_name: first_name, last_name: last_name});\n\n// As with the embedded actions, you can also pass the action type as a parameter according to your flow\nLiveSite.action('schedule', {email: \"some@email.com\"});", "language": "javascript" } ] } [/block]