API-Banking: Kommunikationsrad

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.

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

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>

Integration

• 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>

<!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>

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

Extended and optional configuration options

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.

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.