{"__v":16,"_id":"55129599147ac60d000aa5eb","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":["55d5df9e988e130d000b4121"],"next":{"pages":[],"description":""},"createdAt":"2015-03-25T11:01:45.170Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":3,"body":"The LiveSite SDK offers different methods to edit the actions which appear on your website. You can even change the LiveSite Invite main action according to the visiting users, time of day, etc'. \n\nHere are some common ways to use custom actions: \n\n**For LiveSite built in actions:**\n\n* Hiding \\ Showing some of the actions on a per site \\ per page basis\n* Passing default parameters into one of the LiveSite built in actions \n* Using the same action type with two different names \\ icons on the widget (e.g. \"schedule a face-to-face meeting\" and \"schedule an online meeting\" \n\n** Or - for external actions:**\n\n* Adding an action of your own to the widget design (e.g. link to your Facebook Page, \"join my mailing list\"\n\nManipulating the LiveSite actions will take affect everywhere the actions are used, the Actions Menu, the LiveSite Invite inline actions and the Collapsed Actions Menu beside the LiveSite Invite main action – all depending on the LiveSite configuration.\n\n# Understanding The Actions Object\n\nThe LiveSite actions configuration specifies which actions are to be rendered. The following represents a LiveSite where all the actions are turned on -\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"actions : [{\\n    name    : 'schedule',\\n    action  : 'schedule',\\n    text    : 'Schedule Now',\\n    icon    : 'cal'\\n  }, {\\n    name    : 'contact',\\n    action  : 'contact',\\n    text    : 'Leave Your Details',\\n    icon    : 'env'\\n  }, {\\n    name    : 'call',\\n    action  : 'call',\\n    options : 'number: 1800000000',\\n    text    : 'Call 1-800-000-000',\\n    icon    : 'phone'\\n  }, {\\n    name    : 'pay',\\n    action  : 'pay',\\n    text    : 'Make a Payment',\\n    icon    : 'credit-card'\\n  }, {\\n    name    : 'document',\\n    action  : 'document',\\n    text    : 'Send a Document',\\n    icon    : 'doc'\\n  }]\",\n      \"language\": \"json\"\n    }\n  ]\n}\n[/block]\nEach action object consists of the following attributes -\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"Attribute\",\n    \"h-1\": \"Description\",\n    \"0-0\": \"name\",\n    \"0-1\": \"The name of the action, should be a valid css class name, no spaces allowed\",\n    \"1-0\": \"action\",\n    \"1-1\": \"Can be one of *schedule*, *contact*, *call*, *pay*, *document* or can omitted for custom action\",\n    \"2-0\": \"options\",\n    \"2-1\": \"Semi-colon separated options (e.g. option1:value;option2:value). See [Embedding Actions](doc:embedding-actions) for per-action options. **(optional)**\",\n    \"3-0\": \"text\",\n    \"3-1\": \"Caption describing the action\",\n    \"4-0\": \"icon\",\n    \"4-1\": \"Name of the icon to show for the action, we have hand-picked relevant icons from the [Elusive Webfonts](http://press.codes/downloads/elusive-icons-webfont/) Icons. To see a full list of the icons go [here](http://www.vcita.com/livesite_sdk/icons.html).\",\n    \"5-0\": \"url\",\n    \"5-1\": \"URL for custom actions **(optional)**\",\n    \"6-0\": \"target\",\n    \"6-1\": \"For custom actions with a URL, can be *_blank*, *_self*, *_parent*, *_top*, *framename* **(optional)**\",\n    \"7-0\": \"lightbox\",\n    \"7-1\": \"For custom actions with a URL, whether to use the LiveSite built-in Lightbox, true/false **(optional)**\"\n  },\n  \"cols\": 2,\n  \"rows\": 8\n}\n[/block]\n# Adjusting Existing Actions\n\nThe following JS allows you to customize the actions which appear on your widget on the per site \\ per page basis: show \\ hide actions, present their parameters or change their names. \n\nFor example - the following code presets the email, first name and last name according to GET parameters passed to the page:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"window.liveSiteAsyncInit = function() {\\n    \\n  // Make changes after configuration has been loaded \\n  // but before the widget is rendered\\n  LiveSite.on('beforeRender', function() {\\n    var i, query_params = LiveSite.fn.getQueryParams();           \\n\\n    // Here we are iterating over the actions object and modify it,\\n     // any modification that follows the attributes table above can\\n     // be made\\n     for (i=0; i<LiveSite.config.actions.length; i++) {\\n        if (LiveSite.config.actions[i].name == \\\"schedule\\\") {\\n   \\t\\t\\t\\tLiveSite.config.actions[i].options = \\n            \\\"email:\\\"       + query_params[\\\"email\\\"] + \\t\\t\\t \\n            \\\";first_name:\\\" + query_params[\\\"first_name\\\"] +\\n            \\\";last_name:\\\"  + query_params[\\\"last_name\\\"];\\n        }\\n     }\\n  });\\n\\n  LiveSite.init({\\n    id : 'your-livesite-widget-id'\\n  });\\n};\\n\\n// rest of embed code goes here ...\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n# Customizing Built-in Actions\n\nTo customize and add built in actions to the LiveSite, you can push another action object to the actions array and it will be rendered. \n\nYou manipulate the actions as you like, and add it in any location on the widget, the rendering follows the array order. \n\nFor example - the following code adds another scheduling type button, with a filter to show only services at the office:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"window.liveSiteAsyncInit = function() {\\n    \\n  // Make changes after configuration has been loaded \\n  // but before the widget is rendered\\n  LiveSite.on('beforeRender', function() {\\n    \\n    // The new action can added at any position and the rendering\\n    // will follow the array order\\n    LiveSite.config.actions.push({\\n        name:    'office_appointment',\\n        type:    'schedule',\\n        icon:    'briefcase',\\n        options: 'service_name:office',\\n        text:    'Appointment at the Office'\\n     });\\n  });\\n\\n  LiveSite.init({\\n    id : 'your-livesite-widget-id'\\n  });\\n};\\n\\n// rest of embed code goes here ...\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n# Adding Your Own Custom Actions\n\nYou can use the look and feel of the LiveSite widget to promote calls to action which do not lead to one of vCita's built-in actions. \n\nFor example, the following JS will add an action to your widget that sends site visitors to your book's page on amazon -\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"window.liveSiteAsyncInit = function() {\\n    \\n  // Make changes after configuration has been loaded\\n  // but before the widget is rendered\\n  LiveSite.on('beforeRender', function() {\\n\\n    // Notice the lightbox:true attribute which uses the LiveSite built-in\\n    // lightbox which gives a slick and consistent look & feel. You may \\n    // as well pass target:_blank instead to open the action in a new tab\\n    LiveSite.config.actions.unshift({\\n      name: \\t  'buy_my_book',\\n      icon:     'book',\\n      url:      'http://www.amazon.com/mybook',\\n      lightbox: true,\\n      text:     'Buy My Book (20% Discount)'\\n      });\\n  });\\n\\n  LiveSite.init({\\n    id : 'your-livesite-widget-id'\\n  });\\n};\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nIn case the action should trigger some JavaScript code you can omit the URL attribute and bind your JavaScript code to the *livesite-action-buy_my_book* class (where *buy_my_book* is your action name). In that case, make sure you bind the callback correctly as the LiveSite might render after you document.ready code has been called. \n\nBoth examples assumes jQuery is used - \n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"// Option 1 (preferred) - using the LiveSite render event\\nwindow.liveSiteAsyncInit = function() {\\n    \\n  // Make changes after configuration has been loaded\\n  // but before the widget is rendered\\n  LiveSite.on('render', function() {\\n    $('.livesite-action-buy_my_book').on('click', function() {\\n      buyMyBook(); // Run the \\\"Buy my Book\\\" code\\n    });\\n  });\\n    \\n  // .. rest of embed code\\n}\\n\\n// Option 2 - using the document.ready event\\n$(function() {\\n  $(\\\"body\\\").on('.livesite-action-buy_my_book', 'click', function() {\\n    buyMyBook(); // Run the \\\"Buy my Book\\\" code\\n  });\\n});\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n#Customizing LiveSite Invite Main Action\n\nYou can change the main action on the widget per page or per a specific business logic. \n\nFor example, the following code will show a *Call* button during working hours and a *Leave Details* button off working hours -\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"window.liveSiteAsyncInit = function() {\\n    \\n  // Make changes after configuration has been loaded\\n  // but before the widget is rendered\\n  LiveSite.on('beforeRender', function() {\\n\\n    // any logic can go here\\n    var showCall = (new Date().getHours() > 8 && new Date().getHours() < 18); \\n\\n    // You can switch between any of the actions, whether they are\\n    // built-in or custom actions. You can even adjust on the text or\\n    // options\\n    if (showCall) {\\n      LiveSite.config.activeEngageAction        = 'call';\\n      LiveSite.config.activeEngageActionText    = 'Call 1-800-800-800'\\n      LiveSite.config.activeEngageActionOptions = 'number:1-800-800-800'\\n    } else {\\n      LiveSite.config.activeEngageAction        = 'contact';\\n      LiveSite.config.activeEngageActionText    = 'Leave Details'\\n      LiveSite.config.activeEngageActionOptions = ''\\n    }\\n  });\\n\\n  LiveSite.init({\\n    id : 'your-livesite-widget-id'\\n  });\\n};\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]","excerpt":"Change, add or remove built-in and custom actions on a per-page / per-website basis","slug":"custom-actions-1","type":"basic","title":"Widget Custom Actions"}

Widget Custom Actions

Change, add or remove built-in and custom actions on a per-page / per-website basis

The LiveSite SDK offers different methods to edit the actions which appear on your website. You can even change the LiveSite Invite main action according to the visiting users, time of day, etc'. Here are some common ways to use custom actions: **For LiveSite built in actions:** * Hiding \ Showing some of the actions on a per site \ per page basis * Passing default parameters into one of the LiveSite built in actions * Using the same action type with two different names \ icons on the widget (e.g. "schedule a face-to-face meeting" and "schedule an online meeting" ** Or - for external actions:** * Adding an action of your own to the widget design (e.g. link to your Facebook Page, "join my mailing list" Manipulating the LiveSite actions will take affect everywhere the actions are used, the Actions Menu, the LiveSite Invite inline actions and the Collapsed Actions Menu beside the LiveSite Invite main action – all depending on the LiveSite configuration. # Understanding The Actions Object The LiveSite actions configuration specifies which actions are to be rendered. The following represents a LiveSite where all the actions are turned on - [block:code] { "codes": [ { "code": "actions : [{\n name : 'schedule',\n action : 'schedule',\n text : 'Schedule Now',\n icon : 'cal'\n }, {\n name : 'contact',\n action : 'contact',\n text : 'Leave Your Details',\n icon : 'env'\n }, {\n name : 'call',\n action : 'call',\n options : 'number: 1800000000',\n text : 'Call 1-800-000-000',\n icon : 'phone'\n }, {\n name : 'pay',\n action : 'pay',\n text : 'Make a Payment',\n icon : 'credit-card'\n }, {\n name : 'document',\n action : 'document',\n text : 'Send a Document',\n icon : 'doc'\n }]", "language": "json" } ] } [/block] Each action object consists of the following attributes - [block:parameters] { "data": { "h-0": "Attribute", "h-1": "Description", "0-0": "name", "0-1": "The name of the action, should be a valid css class name, no spaces allowed", "1-0": "action", "1-1": "Can be one of *schedule*, *contact*, *call*, *pay*, *document* or can omitted for custom action", "2-0": "options", "2-1": "Semi-colon separated options (e.g. option1:value;option2:value). See [Embedding Actions](doc:embedding-actions) for per-action options. **(optional)**", "3-0": "text", "3-1": "Caption describing the action", "4-0": "icon", "4-1": "Name of the icon to show for the action, we have hand-picked relevant icons from the [Elusive Webfonts](http://press.codes/downloads/elusive-icons-webfont/) Icons. To see a full list of the icons go [here](http://www.vcita.com/livesite_sdk/icons.html).", "5-0": "url", "5-1": "URL for custom actions **(optional)**", "6-0": "target", "6-1": "For custom actions with a URL, can be *_blank*, *_self*, *_parent*, *_top*, *framename* **(optional)**", "7-0": "lightbox", "7-1": "For custom actions with a URL, whether to use the LiveSite built-in Lightbox, true/false **(optional)**" }, "cols": 2, "rows": 8 } [/block] # Adjusting Existing Actions The following JS allows you to customize the actions which appear on your widget on the per site \ per page basis: show \ hide actions, present their parameters or change their names. For example - the following code presets the email, first name and last name according to GET parameters passed to the page: [block:code] { "codes": [ { "code": "window.liveSiteAsyncInit = function() {\n \n // Make changes after configuration has been loaded \n // but before the widget is rendered\n LiveSite.on('beforeRender', function() {\n var i, query_params = LiveSite.fn.getQueryParams(); \n\n // Here we are iterating over the actions object and modify it,\n // any modification that follows the attributes table above can\n // be made\n for (i=0; i<LiveSite.config.actions.length; i++) {\n if (LiveSite.config.actions[i].name == \"schedule\") {\n \t\t\t\tLiveSite.config.actions[i].options = \n \"email:\" + query_params[\"email\"] + \t\t\t \n \";first_name:\" + query_params[\"first_name\"] +\n \";last_name:\" + query_params[\"last_name\"];\n }\n }\n });\n\n LiveSite.init({\n id : 'your-livesite-widget-id'\n });\n};\n\n// rest of embed code goes here ...", "language": "javascript" } ] } [/block] # Customizing Built-in Actions To customize and add built in actions to the LiveSite, you can push another action object to the actions array and it will be rendered. You manipulate the actions as you like, and add it in any location on the widget, the rendering follows the array order. For example - the following code adds another scheduling type button, with a filter to show only services at the office: [block:code] { "codes": [ { "code": "window.liveSiteAsyncInit = function() {\n \n // Make changes after configuration has been loaded \n // but before the widget is rendered\n LiveSite.on('beforeRender', function() {\n \n // The new action can added at any position and the rendering\n // will follow the array order\n LiveSite.config.actions.push({\n name: 'office_appointment',\n type: 'schedule',\n icon: 'briefcase',\n options: 'service_name:office',\n text: 'Appointment at the Office'\n });\n });\n\n LiveSite.init({\n id : 'your-livesite-widget-id'\n });\n};\n\n// rest of embed code goes here ...", "language": "javascript" } ] } [/block] # Adding Your Own Custom Actions You can use the look and feel of the LiveSite widget to promote calls to action which do not lead to one of vCita's built-in actions. For example, the following JS will add an action to your widget that sends site visitors to your book's page on amazon - [block:code] { "codes": [ { "code": "window.liveSiteAsyncInit = function() {\n \n // Make changes after configuration has been loaded\n // but before the widget is rendered\n LiveSite.on('beforeRender', function() {\n\n // Notice the lightbox:true attribute which uses the LiveSite built-in\n // lightbox which gives a slick and consistent look & feel. You may \n // as well pass target:_blank instead to open the action in a new tab\n LiveSite.config.actions.unshift({\n name: \t 'buy_my_book',\n icon: 'book',\n url: 'http://www.amazon.com/mybook',\n lightbox: true,\n text: 'Buy My Book (20% Discount)'\n });\n });\n\n LiveSite.init({\n id : 'your-livesite-widget-id'\n });\n};", "language": "javascript" } ] } [/block] In case the action should trigger some JavaScript code you can omit the URL attribute and bind your JavaScript code to the *livesite-action-buy_my_book* class (where *buy_my_book* is your action name). In that case, make sure you bind the callback correctly as the LiveSite might render after you document.ready code has been called. Both examples assumes jQuery is used - [block:code] { "codes": [ { "code": "// Option 1 (preferred) - using the LiveSite render event\nwindow.liveSiteAsyncInit = function() {\n \n // Make changes after configuration has been loaded\n // but before the widget is rendered\n LiveSite.on('render', function() {\n $('.livesite-action-buy_my_book').on('click', function() {\n buyMyBook(); // Run the \"Buy my Book\" code\n });\n });\n \n // .. rest of embed code\n}\n\n// Option 2 - using the document.ready event\n$(function() {\n $(\"body\").on('.livesite-action-buy_my_book', 'click', function() {\n buyMyBook(); // Run the \"Buy my Book\" code\n });\n});", "language": "javascript" } ] } [/block] #Customizing LiveSite Invite Main Action You can change the main action on the widget per page or per a specific business logic. For example, the following code will show a *Call* button during working hours and a *Leave Details* button off working hours - [block:code] { "codes": [ { "code": "window.liveSiteAsyncInit = function() {\n \n // Make changes after configuration has been loaded\n // but before the widget is rendered\n LiveSite.on('beforeRender', function() {\n\n // any logic can go here\n var showCall = (new Date().getHours() > 8 && new Date().getHours() < 18); \n\n // You can switch between any of the actions, whether they are\n // built-in or custom actions. You can even adjust on the text or\n // options\n if (showCall) {\n LiveSite.config.activeEngageAction = 'call';\n LiveSite.config.activeEngageActionText = 'Call 1-800-800-800'\n LiveSite.config.activeEngageActionOptions = 'number:1-800-800-800'\n } else {\n LiveSite.config.activeEngageAction = 'contact';\n LiveSite.config.activeEngageActionText = 'Leave Details'\n LiveSite.config.activeEngageActionOptions = ''\n }\n });\n\n LiveSite.init({\n id : 'your-livesite-widget-id'\n });\n};", "language": "javascript" } ] } [/block]