Last Chance

Overview

The "last chance" component is a modal window that returns search results when a user wants to initiate a contact. As the name indicates, it is the last try to get a match before a ticket is created.

Important: This component does not track the contact_ticket event, however you should log when a ticket is created. See the Tracking section below to see how you can log contact_ticket.

Usage

How to create this component.

sdk.component('lastChance', '#target', options);

Sample

By default, this component looks like this:

Target

This is the HTML component. For example, the "#inbenta" target is:

<div id="inbenta"></div>

Options

Available options to set in this component

Name Type Default Description
categoryId integer 0 KM App category Id
maxResults integer 3 Maximum number of shown results. Minimum: 1. Max: 100.

Methods

Methods can be used in this component.

Method Description
show(query:string) Show the last chance modal. If the query is defined will do the search with that query, if not, will do the search with the linked inputs
hide() Hide the last chance modal
setQuery(query: String) Set the current query
setContentsDataInterceptor(interceptor:function) Set a contents interceptor.

Subcomponents

This component has some components inside which can be configured. This components are:

Name Description
contents Component to render each content

Events

Events to listen on this component:

Name Params Description
click content: content object clicked Click on Content
expand content: content object expanded Click on expand Content
rateContent data:Object with rating data Click on content ratings
submit - Fired when the user clicks the submit button
cancel - Fired when the user clicks the cancel button

Tracking

This component calls the API to do the following:

  • every time a search is performed, it sends a /search request with the type parameter set to contact to get the result of the question and track the search as contact.
  • it sends a contact_start and a contact_submit event using the /tracking/events endpoint.
  • it triggers the contact_click event when a user clicks on a content.
  • it triggers a submit event. This allows you to register the contact_ticket event with the client or API when a user clicks on the "Submit" button of the component.

Labels

Labels of this component. The default labels of each component can be rewritten in the SDK creation configuration.

Name Default Description
LAST_CHANCE_TITLE Last Chance The text for the title of the component
LAST_CHANCE_CANCEL Cancel The text for the cancel button
LAST_CHANCE_SUBMIT Submit The text for the submit button

Example

The example below shows a Last Chance component that is linked to a textarea, which is placed within a generic form. When the user submits the form, it shows the Last Chance component. Clicking the submit button on the component creates the ticket and logs the contact_ticket event.

var lastChance = sdk.component('lastChance', '#last-chance', {});
lastChance.linkToInput(document.getElementById('textarea'));
// Submit form
document.getElementById('form').addEventListener('submit', function(event) {
    lastChance.show();
});
lastChance.$on('submit', function() {
    // Send ticket
    <code to send the ticket>
    // Track the contact_ticket event
    sdk.client.track(
        'contact_ticket',
        {
            'value': lastChance.getQuery()
        }
    );
});