API-Banking: Kommunikationsrad

Home API-Banking API-Banking: Kommunikationsrad
Description
Integration Method 1
Integration Method 2
Complete example
API Documentation

Description

This component lets you easily get in contact with your users. It offers creation of appointments with your customers, email messaging and notification, live chat and map assisted support requests.

Requirements

To use the component, you will need these third-party libraries:
• JQuery
• Underscore
• Bootstrap Modal
• jQuery Mustache Plugin

The following CSS Stylesheets are recommended:
• Bootstrap

Integration Method 1

Integration

You will need additional scripts and stylesheets to use the component:

• The app-specific CSS rules, the default theme is included by default.
• The app-specific scripts files to get the plugin up and running.

Include the stylesheets to your page:

Simply copy this block into the HTML-HEAD section of your website. It is required to load the correct styling of the component.

The component is based on the Bootstrap markup and classes definition. You don’t need the first line, if you already have the Bootstrap stylesheet included. Just make sure that the stylesheets of our component is positioned after the Bootstrap import.

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" crossorigin="anonymous">
<link rel="stylesheet" href="https://api.niiio.me/public/kommunikationsrad/css/kommunikationsrad.css">

Asynchronous loading of required files with RequireJS

Include the required script files to your page:

• Advantage: You only need to import a few files, all required script will get loaded asynchronously through RequireJS
• Disadvantage: If you already have a script file which defines an anonoymous AMD module, then sadly this method won’t work for you.

Inlude the required javascript files:

Load the plugin scripts by adding this block at the end of the BODY section.

<script type="text/javascript" src="https://api.niiio.me/public/require-config.js"></script>
<script type="text/javascript" src="https://api.niiio.me/public/common/require.js"></script>

Setup and initialize the component:

Add this block right after the included script files.

You don’t need a separate container in your page. The component will be appended to the body of your page.

<script type="text/javascript">
   require(['dser.kommunikationsrad'], function (Kommunikationsrad) {
      Kommunikationsrad.init({
         receiver: '<your-email-address>',
         token: '<your-custom-api-token>'
      });
   });
</script>

Please send us an email to receive your custom API token. It is required to initialize the plugin. Replace the part with your actual token.

Contact notifications to you will be sent to the mail address specified on initialization. Replace the with your desired mail address. Make sure it is a valid email address.

Please refer to the chapter “API documentation” for a complete overview of all options and properties and how to customize the component.

Integration Method 2

Integration

You will need additional scripts and stylesheets to use the component:

• The app-specific CSS rules, the default theme is included by default.
• The app-specific scripts files to get the plugin up and running.

Include the stylesheets to your page:

Simply copy this block into the HTML-HEAD section of your website. It is required to load the correct styling of the component.

The component is based on the Bootstrap markup and classes definition. You don’t need the first line, if you already have the Bootstrap stylesheet included. Just make sure that the stylesheets of our component is positioned after the Bootstrap import.

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" crossorigin="anonymous">
<link rel="stylesheet" href="https://api.niiio.me/public/kommunikationsrad/css/kommunikationsrad.css">

Regular loading of script files, without RequireJS

Include the required script files to your page:

• Advantage: This method will work on most pages.
• Disadvantage: You have to include a lot more scripts.

Inlude the required javascript files:

Load the plugin scripts by adding this block at the end of the BODY section.

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.js"></script>
<script type="text/javascript" src="https://api.niiio.me/public/common/bootstrap/bootstrap-modal.js"></script>
<script type="text/javascript" src="https://api.niiio.me/public/common/services/PluginPropertyCheckService.js"></script>
<script type="text/javascript" src="https://api.niiio.me/public/common/jquery.mustache.js"></script>
<script type="text/javascript" src="https://api.niiio.me/public/kommunikationsrad/kommunikationsrad.js"></script>
<script type="text/javascript" src="https://api.niiio.me/public/kommunikationsrad/telephone-appointment/dser.TelephoneAppointmentTimeSelector.js"></script>
<script type="text/javascript" src="https://api.niiio.me/public/kommunikationsrad/telephone-appointment/dser.TelephoneAppointmentService.js"></script>
<script type="text/javascript" src="https://api.niiio.me/public/kommunikationsrad/telephone-appointment/dser.TelephoneAppointment.js"></script>

Setup and initialize the component:

Add this block right after the included script files.

You don’t need a separate container in your page. The component will be appended to the body of your page.

<script type="text/javascript">
   $(function () {
      $.kommunikationsrad({
         receiver: '<your-email-address>',
         token: '<your-custom-api-token>'
      });
   });
</script>

Please send us an email to receive your custom API token. It is required to initialize the plugin. Replace the part with your actual token.

Contact notifications to you will be sent to the mail address specified on initialization. Replace the with your desired mail address. Make sure it is a valid email address.

Please refer to the chapter “API documentation” for a complete overview of all options and properties and how to customize the component.

Complete example

<!doctype html>
<html class="no-js" lang="">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Kommunikationsrad Demo</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" crossorigin="anonymous">
    <link rel="stylesheet" href="https://api.niiio.me/public/kommunikationsrad/css/kommunikationsrad.css">
</head>
<body>
<h1>This is an example page</h1>
<div class="container-fluid">
    <p>Present your users any content you like.</p>
</div>

<script type="text/javascript" src="https://api.niiio.me/public/require-config.js"></script>
<script type="text/javascript" src="https://api.niiio.me/public/common/require.js"></script>
<script type="text/javascript">
   require(['dser.kommunikationsrad'], function (Kommunikationsrad) {
      Kommunikationsrad.init({
         receiver: 'email@test.de',
         token: 'valid-api-token'
      });
   });
</script>
</body>
</html>

API Documentation

Initialize

Initialize the plugin by calling the function below. It takes exactly one configuration object as parameter.

Please provide your custom API token and your desired email address for notifications on initialization, otherwise the plugin won’t work.

require(['dser.kommunikationsrad'], function (Kommunikationsrad) {
        Kommunikationsrad.init({ config });
});

Required configuration options

Key Description
token The security-token to check if your connection is valid.
receiver Email-Address of the receiver. Contact notifications (appointments, chat messages, email request) will be sent to this address.

Extended and optional configuration options

Key Description Default
baseUrl URL to the server. All requests needed to load or send data will go to that address. https://api.niiio.me/
theme Customize this option if you want to override the default style of the plugin. This value will be interpreted as CSS class. dser-theme
logoUrl URL to the image used as company logo for the contact information. https://api.niiio.me/public/kommunikationsrad/images/kommunikationsrad-default-logo.png
successImageUrl URL to the image displayed after an appointment was successfully arranged. https://api.niiio.me/public/kommunikationsrad/images/kommunikationsrad-success.png
failureImageUrl URL to the image displayed if an appointment could not be made. https://api.niiio.me/public/kommunikationsrad/images/kommunikationsrad-failure.png
companyData A JSON object structure for your contact information. see section "Customize your company information"

Customize your company information
The companyData option lets you define information about you and your company. You can specify your address, telephone number and business times.

Key Description Default
address The name and address of your company. You may specify

• name
• street
• zipCode
• city

All those parameters are optional. Left out fields will be rendered blank.
If you specify businessData but do not customize the address object, it will be missing from the contact view.

{
name: "Deutsche Software Engineering & Research GmbH",
street: "Elisabethstr. 42 / 43",
zipCode: "02826",
city: "Görlitz"
}
contact The telephone number your users are supposed to call and a welcoming text about you and your business times. You may specify

• telephoneNumber
• text (You can use plain text or HTML markup)

If you specify businessData but do not customize the contact object, it will be missing from the contact view.

{
text: "Wir sind auch telefonisch für Sie erreichbar.<br>" +
"Montag bis Freitag: 08.00 - 17.00 Uhr",
telephoneNumber: "+49 35 81 / 37 4 99 - 0"
}
businessTimes An Array of time periods representing your company's business times.
If you specify businessData but do not customize the businessTimes object,the default setup will be used instead.
If you decide to define your own businessTimes object, make sure to include all required properties:

• dayOfWeek (0 to 6)
• intervals: each with a name and a times array containing integers for from and to

Example

businessTimes : [{
dayOfWeek: 0, //sunday
intervals: [{
name: 'Morning',
times: [
{from: 8, to: 9},
{from: 9, to: 10},
{from: 10, to: 11}
]
}, {
name: 'Noon',
times: [
{from: 11, to: 12},
{from: 12, to: 13}
]
}]
}]

With theses lines of code, you specify that you are open for customer requests each sunday morning and noon from 8 AM to 1 PM.

[{ dayOfWeek: 0, //sunday
intervals: [ ]
}, {
dayOfWeek: 1, //monday
intervals: [{
name: 'Vormittags',
times: [
{from: 8, to: 9},
{from: 9, to: 10},
{from: 10, to: 11}
]}, {
name: 'Mittags',
times: [
{from: 11, to: 12},
{from: 12, to: 13}
]
}, {
name: 'Nachmittags',
times: [
{from: 13, to: 14},
{from: 14, to: 15},
{from: 15, to: 16},
{from: 16, to: 17}
]
}]

}, {
dayOfWeek: 2, //tuesday
intervals: [ see previous day ]
}, {
dayOfWeek: 3, //wednesday
intervals: [ see previous day ]
}, {
dayOfWeek: 4, //thursday
intervals: [ see previous day ]
}, {
dayOfWeek: 5, //friday
intervals: [ see previous day ]
}, {
dayOfWeek: 6, //saturday
intervals: [ ]
}];

emailReactionTime The maximum time on hours your support will need to react to a customer email request. 48

Customize with themes

The theme defines main colors, font sizes and other visual gimmicks used by the plugin’s user interface. You may specify your own theme during plugin initialization.

By default the theme used is the dser-theme. It specifies:

• the main text color
• the main font
• text color, background color, hover color and border color for buttons
• text color and background color of the dialog components

You can override those rules by creating your own theme. Simply define your CSS rules, give your theme a name and bind it to the plugin. Make sure to use the respective CSS classes correctly.