Instructions
User Manual:
Open the PDF directly: View PDF 
.
Page Count: 21
| Download | |
| Open PDF In Browser | View PDF |
Zendesk
Integration
Index
Introduction
4
Features
4
Setting up a Zendesk app
5
Step 1: Create a Zendesk page
5
Step 2: Download the Inbenta Search for Zendesk template
5
Step 3: Configuring the Inbenta template
6
General configuration
6
Common components
7
Search
7
Results
8
Autocompleter
8
Integration
9
Search Integration
Go to guide theming in the admin panel
Add the needed files and include them in the desired page
Deflection Integration
In the Guide admin view, add the needed files and include them in the desired page
Autocompleter Integration
9
9
12
14
14
17
Follow the same steps as the Search Integration but with the autocompleter configuration 17
Include the scripts and CSS at the top of the file
17
Start typing in the search bar and check that the autocompleter is shown
17
Zendesk styles modified
18
All the components activated
19
Live examples
21
Document history
Version Number
Modification Date
1.0
02/26/2019
2
3
Introduction
The purpose of this documentation is to define the integration of a search SDK in a Zendesk portal.
Zendesk uses a template to create or modify all the pages. The following SDK setup was done using
the basic template "Zendesk Copenhagen" because it is the default template.
More info about the Zendesk Templates.
Features
This application uses the Inbenta search SDK with the following used and supported components:
●
●
●
●
●
●
●
●
●
●
●
●
●
Autocompleter
Instants
Last Chance
Loader
No Results
Pagination
Refinement Lists
Refinement Tabs
Results
Results per Page Selector
Router
Sort By Selector
Stats
4
Setting up a Zendesk app
The purpose of this section is to showcase how a Zendesk Free Trial can be.
Step 1: Create a Zendesk page
Follow this step only if you don’t have an available Zendesk Sandbox where the Inbenta Search
could be tested in.
1. Go to the Zendesk main page and click on the "Free trial" option.
2. Register an account and follow the Zendesk registration guide to obtain it.
Step 2: Download the Inbenta Search for Zendesk template
All of the code provided by Inbenta is located in a GIT repository. Download the Inbenta code from
https://github.com/inbenta-integrations/zendesk_search_template and move it into the UI
repository.
5
Step 3: Configuring the Inbenta template
Although this template is designed with most of the search components, it also allows for their
deactivation (except for the results components). Modify the c
onf files to activate/deactivate the
different components in order to adapt the application to fit your requirements. To deactivate a
component remove the whole component from the config file.
In order for the application to work properly, only one conf file should be loaded per
page.
General configuration
The config file has some general configuration that is not related to the components.
sdkVersion: '1.22.0',
sdkIntegrity:
"sha384-ifuG86EAWx0kUeqJZTJxHpdJDFlKrXW0JcaBz2UsA5hdIXbvM9OmBQt6I98payUv",
sdkAuth: {
publicKey: " ---------------- ",
domainKey: " ---------------- "
},
// Inbenta standard SDK configuration - Check inbenta API/SDK documentation
: {
target: '#component-name',
conf: {
}
}
●
●
●
target: Id or class of the HTML element that this component will use. The application will
add this div and replace it with the corresponding component.
conf: Object with the configuration of the component. This object can be empty and it
will use the default configuration.
Check the components page to learn about all the available options. To remove
a component, remove it and all its configuration options from the config file.
The results and search configuration are special as they can't be deactivated and have
additional options.
Search
If this option is activated, the Zendesk search bar will be replaced and the Inbenta Search
results will load on that page.
If this option is inactive, the script will load an Autocompleter component or deflection tools
components only, and any existing search bar on the page will redirect to the search results
page.
7
search: {
active: true
}
Results
results: {
container: '#inbenta-container', // Div where inbenta will be loaded
target: '#inbenta-results',
conf: {}
}
●
●
●
container: Id or class where the application will be loaded. The application will add the
needed elements above this div and will hide it when a search is performed.
target: Id or class of the HTML element that this component will use. The application will
add this div to the page and then replace it with the ‘results’ component.
conf: Object with the configuration of the component. If the object is empty, it will use the
default configuration.
If this element doesn't exist, the application will launch an error. This component
is required for the application to work. Do not remove it.
Autocompleter
autocompleter: {
input: '#query', // Input to be linked to the autocompleter
target: '#inbenta-autocompleter',
conf: {
showViewAllButton: false
}
}
●
●
●
input: Id or class of the input to be linked. The autocomplete component will listen to
changes in this input. The input will only be replaced if the search is active.
target: Id or class of the HTML element that this component will use. The application will
add this div to the page and then replace it with the ‘autocomplete’ component.
conf: Object with the configuration of the component. This object can be empty and it
will use the default configuration.
The linked HTML input must have the attribute autocomplete="off", to avoid
the browser’s autocomplete from loading.
8
Integration
This section is a guide for knowing how to integrate the Inbenta Search SDK into the Zendesk
page. There are many possible options for integrating the SDK. In this document, only a search
,autocompleter and ‘New Request’ deflection integration will be exemplified as those are the
most common use-cases.
Search Integration
This integration will link the search to the search bar and show the results in the same page.
Remember to modify the configuration file to select the components, where the application
should be loaded, the input id or class to be linked...
Go to guide theming in the admin panel
1. Select the Guide view
9
2. Go to the Guide admin
3. Select the theming option on the left menu
10
4. Select the theme to change it.
5. Select Search settings and disable Instant search to avoid conflicts with Inbenta
autocompleter.
11
6. Click on the three dots and select edit code.
Add the needed files and include them in the desired page
1. Add the “inbenta-core.js”, “inbenta-core.css” and the conf files (i.e:
inbenta-conf-results.js) as a resource.
12
2. Include them in the desired pages.
a. Include the scripts and CSS at the top of the file. The conf files must be added
before the “inbenta-core.js”.
b. Add the needed div or modify the conf file to use an existing one and load the
application
3. Perform a search on the integrated page to check that everything went well
13
Deflection Integration
This integration is designed for a page with a form where the user sends an email or ticket.
Remember to modify the configuration file to select the components, inputs id or class...
In the Guide admin view, add the needed files and include them in the
desired page
1. Follow the same steps as the Search Integration but with the deflection configuration
a. Go to the contact page to include the scripts and CSS at the top of the file
b. Remember to add the needed div to load the application
14
2. Fill the form and check that the instant answers and/or last chance are shown
3. Add a script to control the form submission and show the last chance
The id and classes used can be different so be sure to change them to use the same
ones as the integrated page.
/*-------------------------------------------------|
EXAMPLE CODE TO BE ADDED BY CUSTOMER
|-------------------------------------------------|
| This is just an example code of how to use the Deflection tools.
| We provided the functions window.inbentaEventTrigger() and
| window.inbentaEventListener(), but we will be firing/listening events
| so feel free to do the solution that fits better
*/
// We are capturing submit event, but lastChanceShow should be called
// before submitting and after doing any validation on the form
var canSubmit, hasSubmitted = false;
var formSelector = "#new_request";
var submitButtonSelector = formSelector + " input[type=submit]";
if (window.inbentaEventTrigger) {
// Clone the submit button to use inbenta
var originalSubmit = $(submitButtonSelector);
var inbentaSubmit = $(originalSubmit).clone(false);
15
$(originalSubmit).hide();
$(inbentaSubmit).insertAfter(originalSubmit);
$(inbentaSubmit).on('click', function(e) {
if (!canSubmit) {
e.preventDefault();
// These Events have to be called when inbenta has already loaded,
// doing it here should be a good idea
window.inbentaEventTrigger(document, 'lastChanceShow');
}
// Check if the form has been already submitted to avoid multiple submits
else if (hasSubmitted) {
e.preventDefault();
}
});
window.inbentaEventListener(document, 'lastChanceSubmit', function(e) {
canSubmit = true;
// Check if the form has been already submitted to avoid multiple submits
if (!hasSubmitted) {
// Submit the form
$(originalSubmit).click();
hasSubmitted = true;
}
});
}
16
Autocompleter Integration
This integration is designed for a page with a search bar that will only use the autocompleter
component. This search bar should redirect to the results page as this redirection won't be done
by Inbenta. In the Guide admin view, add the needed files and include them in the header page
1. Follow the same steps as the Search Integration but with the autocompleter configuration
a. Include the scripts and CSS at the top of the file
b. Start typing in the search bar and check that the autocompleter is shown
17
Zendesk styles modified
To avoid style conflicts with Inbenta and Zendesk template, we changed some of the Zendesk
styles. This change is to show the autocompleter component properly. The styles changed are:
.section.hero{
z-index: 9;
position: relative;
}
18
All the components activated
This is an example of a configuration file with all the possible components of the search SDK
that this application allows. Use it as a guide to add any component needed.
{
appConfig: {
autocompleter: {
input: '#query', // Input to be linked to the autocompleter
target: '#inbenta-autocompleter',
conf: {
showViewAllButton: false
}
},
loader: {
target: '#inbenta-loader',
conf: {}
},
noResults: {
target: '#inbenta-no-results',
conf: {}
},
pagination: {
target: '#inbenta-pagination',
conf: {
padding: 1 // pages before and after the actual
}
},
filters: {
target: '#inbenta-filters',
conf: {
refinements: [
{
attributeName: 'CATEGORY',
}
]
}
},
tabs: {
target: '#inbenta-tabs',
conf: {
attributeName: 'CONTENT_TYPE'
}
},
results: {
// Div where inbenta will be loaded
container: '#inbenta-container',
target: '#inbenta-results',
19
conf: {}
},
search: {
// Activate/Deactivate the search engine in the page,
// If deactivated is recommended to disable the router too.
active: true
},
resultsPerPageSelector: {
target: '#inbenta-results-per-page',
conf: {
options: [5, 10, 15]
}
},
router: {
target: '#inbenta-router',
conf: {}
},
stats: {
target: '#inbenta-stats',
conf: {}
},
sortBy: {
target: '#inbenta-sort-by',
conf: {
attributes: [
{name: 'desc(_relevance)', label: 'Relevance'},
{name: 'desc(Source)', label: 'Source - Descending'},
{name: 'asc(Source)', label: 'Source - Ascending'},
],
}
},
resultsPerPage: {
target: '#inbenta-results-per-page',
conf: {}
},
instants: {
target: '#inbenta-instants',
input: ['#request_subject', '#request_description'],
conf: {}
},
lastChance: {
target: '#inbenta-last-chance',
input: ['#request_subject', '#request_description'],
conf: {}
}
}
}
20
Live examples
Here you can find a list of Inbenta Search and Deflection integration examples for a Zendesk
Help Center, using the default configuration options explained in this document. You can use
these examples to review how a vanila example looks in a basic Zendesk template:
●
●
●
●
Autocompleter page
Deflection page
Community Deflection page
Results page
21
Source Exif Data:
File Type : PDF File Type Extension : pdf MIME Type : application/pdf PDF Version : 1.5 Linearized : Yes Producer : Skia/PDF m75 Page Count : 21EXIF Metadata provided by EXIF.tools