Hooks
The lpTag
handles the interfere of many events that occur on the vistor's webpage by executing a callback.
These tag hooks provide transparency into the lifecycle flows of engagements, embeddeded chat windows, and cobrowse sessions, among others.
Below you can find a list of hooks available on a web page by the Web Tag, each organized under a given eventName
.
Definition
Hook callback parameters: The “hook” function will get always one object:
Hook callback return parameters: The “hook” function MUST return always one object — if the “hook” returns non-object parameter, the executor will ignore the returned parameter and will take the previous one.
Execute order: The hooks will be executed by the order they were “pushed”.
If param1 was changed on hook1, hook2 will get param1 after the change.
Valid hook
function _hookCallback_(options){
return options;
}
Invalid hooks
function hookCallback(option1, option2){
return option1;
}
function hookCallback(options){
return null;
}
function hookCallback(options){
return "some string";
}
Limitations
- The customers need to make sure to integrate properly and to not cause bugs / edge cases
- Hooks will not be executed on external window. In the future when taglet “scope” will be supported, hooks will be supported only if the hook is inside a site taglet.
Register to hook
lpTag.hooks = lpTag.hooks || [];
lpTag.hooks.push({
name: "BEFORE_SURVEY_SUBMIT",
callback: function (options) {
options.data.answers = "masking answer";
return options;
}
});
lpTag.hooks.push({
name: "BEFORE_SURVEY_SUBMIT",
callback: function (options) {
options.data.answers = "masking the masked answer";
return options;
}
});
Places
SMT
NAME: BEFORE_SUBMIT_SDE
Use case: SDE submit.
Interference: change / prevent sending SDE data before it's sent to server (push and send flows)
Place: TBD
Timing: Before
Parameters: TBD
Rendering
NAME: BEFORE_ENG_DISPLAY
Use case: Change engagement state / click target / display / etc.
Interference: Change engagement configuration before engagement display.
Place: rendererStub.js → engagement.createInstance
Timing: Before
Parameters: TBD
NAME: BEFORE_ENG_CHANNEL_OPEN
Use case: Open the content (window / target) in different way.
Interference: The flow after engagement click.
Place:
baseOffer.js → click → _openChannel
Timing: Before
Parameters: TBD
Unified Window
NAME: AFTER_GET_SURVEY
Use case: Change pre-chat / post-chat / offline survey data structure or fill in part of the answers
Interference: Pre-chat / post-chat / offline survey data before rendering the view
Timing: After
Parameters:
{
"data": {
"surveyType": surveyType,
"surveyData": surveyData
}
}
Parameter name | Type | Role | Data structure |
surveyType | string | Which survey type is the one submitted | “offlineSurvey” | “preChatSurvey” | “postChatSurvey” |
surveyData | Object | Survey questions which would be render by the given data | See below for data structure |
{
"header":"",
"id":1058794,
"questions":{
"question":[
{
"type":"Text Field",
"validationType":"alpha_numeric",
"id":5567213,
"logicId":2,
"order":0,
"mandatory":true,
"label":"From Name:",
"lastKnownValue":""
}
]
}
}
NAME: BEFORE_SUBMIT_SURVEY
Use case: Change answers
Interference: Pre-chat / post-chat / offline survey answers before submit
Timing: Before
Parameters:
{
"data": {
"surveyType": offlineSurvey/ preChatSurvey / postChatSurvey,
"questionsInfo": questionInfo,
"surveyData": surveyData
}
}
Parameter name | Type | Role | Data structure |
surveyType | string | Which survey type is the one submitted | “offlineSurvey”/ “preChatSurvey” / “postChatSurvey” / |
questionsInfo | Array of objects - [{}] | General info about the questions (Data is not meant to be changed) | See data structure below |
surveyData | Object | The actual submitted data — changing the surveyData actually affect the submitted data | See data structure below |
Array of Object — Data structure
[{
"type":"Text Field",
"validationType":"alpha_numeric",
"id":5567213,
"logicId":2,
"order":0,
"mandatory":true,
"label":"From Name:",
"lastKnownValue":"asf"
}]
surveyData — Data structure
{
"survey":{
"id":1058794,
"question":[
{
"id":5567213,
"answer":"asf"
},
{
"id":5567214,
"answer":"sadf@asf.con"
},
{
"id":5567217,
"answer":"asdf"
}
]
}
}
NAME: BEFORE_SEND_VISITOR_LINE
Use case: Change / prevent visitor lines on chat
Interference: Visitor lines text
Place:
TrabscriptManager.js → sendLine
Timing: Before
Parameters:
{
"data": {
"line": line
}
}
Parameter name | Type | Role | Data structure |
line | Object | Text the visitor sending to agent | See data structure below |
{
"text":"Can you help me?"
}
NAME: AFTER_GET_LINES
Use case: Change / prevent agent lines (e.g. change the look&feel of co-browse invitation)
Interference: All lines presented on visitor side only
Timing: After
Parameters:
{
"data": {
"lines": lines
}
}
Parameter name | Type | Role | Data structure |
lines | Array of objects - [{}] | Lines data before saved in model. The rational value to change is only the “text” | See data structure below |
[
{
"@id":"4",
"@type":"line",
"time":"2017-03-02T11:51:02.545+02:00",
"textType":"html",
"text":"<div dir=\"ltr\" style=\"direction: ltr; text-align: left;\">how are you?</div>",
"by":"margalitb@liveperson.com",
"source":"agent",
"subType":"REGULAR",
"type":"line",
"localId":2
}
]
NAME: ON_ADD_TO_CART
Use case: Allows brands to hook into the add to cart process to customize or modify the behavior of adding items to the cart.
Interference: Occurs when a customer clicks on a button in order to add items to the cart.
Timing: On adding items to the cart.
Parameters:
{
"data": {
"type": "addToCart",
"items": [
{
"productId": productId,
"quantity": quantity
}
]
}
}
Parameter name | Type | Role | Data structure |
type | String | The type of action, which should always be "addToCart". | Enum with value "addToCart" |
items | Array of objects - [{}] | The items being added to the cart. | See data structure below |