About the Lucep library
The Lucep library is designed to allow any form on a website, or any specific interaction, to send leads directly to sales people so that customers can be converted faster. This could be from anything to with an enquiry form being completed, to a new signup being completed prompting the team to welcome the new registrant, all the way through to a registered user abandoning a cart.
Whatever the circumstance is that you believe requires immediate personalised attention, the Lucep library facilitates that exercise by driving immediate engagement from your team.
Loading the library
The JavaScript library can be loaded in two ways, and which one you choose will depend on your site and expected user interaction.
Dynamic loading (load speed friendly / default)
The following snippet will load the library as a dynamic script on the page; this is typically used when the primary focus is related to the speed of the page loading and is usually considered best practice. The reason why this helps perceived page load speed is because it is downloaded in parallel with all other page content – and does not prevent other scripts or objects being loaded before it. Where the functionality of the page does not depend on the library being immediately available, this is usually a good option.
(function (l,u,c,e,p){ ... })(a,b,c,d,e);The callback is fired immediately after the browser has finished downloading the script (not necessarily completely loaded it) and is an opportune place to either fire any other dependent scripts, or bind buttons with events.
Included in the header (easiest)
Including the Lucep JS library in the header guarantees its availability on the page to every script called after it, but has the downside of blocking page load until it is downloaded. The impact of this is usually only seen once, and it is cached by the browser for subsequent loads.
To include the script in the page header simply add this between the <head> </head> tags:
<script type='text/javascript' src='https://8d69a4badb4c0e3cd487-efd95a2de0a33cb5b6fcd4ec94d1740c.ssl.cf2.rackcdn.com/js/L.SalesGorilla.stable.latest.min.js'></script>A note on build channels
Two channels are actively maintained, and they are referred to as follows: Stable The stable channel contains the most thoroughly tested and reliable version of the library. It is updated more slowly, but only updated when backward compatibility is assured and has been tested as a working library. The stable library is available from https://8d69a4badb4c0e3cd487-efd95a2de0a33cb5b6fcd4ec94d1740c.ssl.cf2.rackcdn.com/js/L.SalesGorilla.stable.latest.min.jsBleeding The bleeding channel contains builds that can be considered as being in the middle of development. Cool new features are added to this library on an ad hoc basis, but they may not completely work, may not even be documented, and almost always run the risk of breaking other functionality – some may never make it over to the stable channel. It is really only recommended for development purposes and to get a peek under the hood of what is coming next The bleeding library is available from: https://8d69a4badb4c0e3cd487-efd95a2de0a33cb5b6fcd4ec94d1740c.ssl.cf2.rackcdn.com/js/L.SalesGorilla.bleeding.latest.min.js
Checking if the library is loaded
Depending on how the library is included, it may be necessary for you to check if the library is available before performing any actions with it.
Listening for the library announcement
The Lucep library will announce it is available by firing the event lucep-library-ready on the document, so it is possible to create an event listener for this:
document.addEventListener("lucep-library-ready",
function(){
//the library is ready, do something here
}, false);NOTE: This is not compatible with browsers IE9 and before Please check compatibility with your target browsers.
Checking for object existance
Checking if $lucep is available as an object is a simple and effective way to validate the library is available for use
if ($lucep) {
//the library is available, do something
}A combined approach to work with the library
A reliable way to work with the library is to combine these two ways of checking for the availability of the library:
if ($lucep){
//launch your custom event
} else {
document.addEventListener("lucep-library-ready",
function(){
//launch your custom event
}, false);
}Initialising the library
The Lucep library requires to be initialised before it can be used, and it can be initialised by providing only the account name with which it should be used.
$lucep.init( { domain: YOUR-DOMAIN-HERE } );The init function can be called repeatedly without any adverse impact, as only the first call is processed.
Once the init method is fired, all of the other library methods can be used. It is recommended that the init function is fired as early as possible as this will prevent long waiting times for other functions to complete.
$lucep.init ( params )
This method can be invoked multiple times – however only the variables passed in the first call are considered. All other subsequent calls are ignored.
params should be a JavaScript object with the following properties:
| Property Name | Required | Description | Example/Default |
|---|---|---|---|
| domain | Yes | The account to bind all subsequent actions to | mydomain (no default) |
| id | Recommended | The kiosk identifier which contains all the settings that should be applied to this instance. This can also impact the widget UI if it is loaded, as the ID drives what menu is loaded, and associated visual config | 1 |
| lang | Recommended | The default language to load any UI components in, and request strings from the server in | eng |
| no_ui | No | Instructs the library to load the default UI when set to false, by default no UI is loaded as the parameter is set to true | true |
| mobile | No | Instructs the library to not load any of its own dependencies from the internet, and reference relative URLs only, by default this is not the case | false |
| load_ui | No | Path to a custom UI library to load. See CornerWidgetUI for an example of how such a library can be structured | false |
| callback | No | Callback function to receive updates on the various components that the library will load as it starts up | null |
$lucep.raise_lead ( params )
Immediately raises a lead to the appropriate team based on the service_id supplied. Notifications are pushed directly to the relevant users as defined in the Lucep console.
params should be a JavaScript object with the following properties:
| Property Name | Required | Description | Example/Default |
|---|---|---|---|
| phone_number | Yes | The international dialling number that the customer should be called back on. | +1 213 555 1234 (no default) |
| name | Yes | The name of the customer to be asked for when calling back | John Appleseed (no default) |
| service_id | Yes | The ID of the requested service by the customer. This ID determines which group of people in the organisation receive the lead/notification | 1 (no default) |
| service_name | Yes | The user-friendly name of the service that the customer has requested for | Bill payment (no default) |
| additional_info | No | Any additional personal information about the user that would be useful for the company representative. To be sent in JSON name/value pairs. | {"e-mail": "bob@bob.com","Home town": "London"} |
| callback | Recommended | A callback to receive confirmation of lead creation, and updates on the lead processing status as it progresses through the lifecycle of being created, retrieved by a representative, and then closed. If supplied, the callback is supplied in the format `{“ticket-status”: [new / processing / finished ], “server”: true | false}-see$lucep.get_ticket_statusformore info : function (resp){ … }` |
$lucep.send_intelligence ( params )
Sending intelligence instructs the server to maintain a record of a specific significant event with this particular customer. This event is communicated to the sales person when a lead is raised by user in question. This could be anything from a customer scrolling past a particular point on a page, to the customer viewing a specific image. The general guidance is to send events that will be relevant, and helpful, the person that is going to be reviewing the lead ahead of engaging with the customer.
NOTE: It is important to recognise that personally identifiable information should not be sent as data in this method
params should be a JavaScript object with the following properties:
| Property Name | Required | Description | Example/Default |
|---|---|---|---|
| event_type | Yes | A user friendly headline description of what the event type is | viewed image (no default) |
| payload | Recommended | A JSON formatted set of key/value pairs that describe the event | {"your-property": "your information"} (no default) |
| callback | No | A callback to your function once the server has acknowledged receipt of the intelligence | function (resp) { ... } (no default) |
$lucep.put_data ( params )
This method stores data in the browser for retrieval between sessions. It allows for custom identifiers or references to be placed within browser storage using your custom key references. The library will detect if the browser supports WebStorage[1][2] and use that if available, else it will fall back to Cookies.
This method can be called any number of times, it does not return any data. If the method is called multiple times with the same key, it will overwrite the data stored by the previous call.
params should be a JavaScript object with the following properties:
| Property Name | Required | Description | Example/Default |
|---|---|---|---|
| key | Yes | The key to store the data with | your-key-here (no default) |
| value | Yes | The value to store (text only) | {"your-property":"your property details"} (no default) |
$lucep.get_data ( params )
This method retrieves data that has been stored using $lucep.put_data method. It returns the value associated with the key as a result of the function call.
params should be a JavaScript object with the following properties:
| Property Name | Required | Description | Example/Default |
|---|---|---|---|
| key | Yes | The key the data has been stored with | your-key-here (no default) |
The method will then return the value string that was previously associated with the key (if any)
$lucep.get_kiosk_details ( params )
Once initialisation has completed, the details of the kiosk can be passed to a callback so that necessary actions can be taken to render it or incorporate it into the page as needed. This function can be called as many times as needed, and as soon as the kiosk is available, all the callbacks will be fired sequentially.
params should be a JavaScript object with the following properties:
| Property Name | Required | Description | Example/Default |
|---|---|---|---|
| callback | Yes | A custom function to handle the kiosk information when it is successfully loaded/retrieved from the Lucep server | function (resp){ ... }(no default) |
When the callback is triggered, an object describing the kiosk properties will be supplied. Kiosk properties can be customised as needed on the Lucep console – this means that a kiosk can return as many, or as few, properties as needed for your implementation. An example of how this object can be structured is as follows:
| Property Name | Description | Reference Example |
|---|---|---|
| default_lang | The default language that the kiosk text should be displayed in, and the language pack guaranteed to have all necessary text | eng |
| kiosk_id | The unique identifier for the kiosk that has been retrieved. Multiple different types of kiosks can be configured on the server, each with different properties as needed | 1 |
| button_cta | The text desired on the call to action button | Call me! |
| color | The desired colour properties of the widget in hexadecimal format. Different properties can be configured for each kiosk as needed. | {"background": "#000"} |
| extra_fields | Additional fields to solicit information on from the user. This will be a structured object. Enforcement is up to your implementation and will not be validated by the server or the Lucep library. | { "dom-property-id": {"label": "User friendly label","type":"text/checkbox/dropdown", "help_txt": "Any applicable help text (optional)", "options": [{"option1-id":"Option 1 User Text"}] } } |
| closed_txt | The text to be displayed by the widget when it is minimised. This may not be applicable in all scenarios. | Click here to get a callback! |
| open_txt | The text to be displayed by the widget when it is expanded. This may not be applicable in all scenarios. | Tell us how to contact you! |
The extra_fields property
Extra fields is a kiosk configuration property that is used to instruct the webpage that some additional data is required in order for the submission to be useful to the person processing the customer’s request. Enforcement and use of this is down to your implementation, and it is not validated by the Lucep library or servers. In most circumstances, the accompanying data is fired as additional_info when a lead is raised – but this must be implemented by you.
| Property Name | Description | Reference Example |
|---|---|---|
| dom-property-id | This is the property-id that is expected to be submitted | email |
Within the dom-property-id another object is nested that contains additional descriptors:
| Property Name | Description | Reference Example |
|---|---|---|
| label | The user-friendly label for this field | Your email address |
| type | The type of field that should be presented to the user. This can be customised by you on the Lucep console, but a few default options exist, e.g. text, checkbox, dropdown | text |
| help_txt | Some additional help text to supply to the user (if any) | An email address looks like "bob@bob.com" |
| options | For checkboxes or dropdowns, options need to be provided. By default, these are supplied as id/reference pairs in an object array. | [{"my-option1": "A nice option 1"},{"awesome-option2" : "get me a number 2"}] |
$lucep.get_ticket_status
Performs a check on the last known lead processing status. Returns synchronously with an object describing the state. The object looks as follows:
| Property Name | Description | Reference Example |
|---|---|---|
| status | A descriptor of the lead state that can be any one of the following: new, processing, finished, no-ticket | processing |
| server | An indicator if this return is fresh from the server, or if it is a cached response based on the last action taken. Cached responses are the standard and are generally reliable indicators, and so expect a false in this field | false |
$lucep.create_profile ( params )
This method should not need to be called on a regular basis.
create_profile purges any record of the existing customer profile from the browser, and requests for the server to create an entirely one. This forces references to any previous intelligence or leads to be lost.
As customer behaviour profile identifiers are securely generated, and correlating them with leads is a one-way process this process can not be undone, and once executed, past customer information is only available in an anonymised aggregated format.
params should be a JavaScript object with the following properties:
| Property Name | Required | Description | Example/Default |
|---|---|---|---|
| callback | Recommended | A custom function to receive notification when the old customer profile has been purged and a new one has been created | function (resp){ ...} (no default) |
If you have any queries or suggestions or complaints, please reach out to us at this email address: support@lucep.com
