Contact system (wheel)

Comfortable contact: Offer your users a simple but feature-rich communication tool. With the help of our API-Tools, users can organize appointments, initiate chats, send email, or locate the nearest contact partner on a map.

Requirements
Complete example
API Documentation

Requirements

The following CSS Stylecheets are recommended:

• Bootstrap

You will also need an additional Google Maps Javascript v3 API key.
You don’t have to include additional javascript files. the component comes bundled with all required dependencies.

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-public.niiio.me/public/kommunikationsrad/css/kommunikationsrad.css">
</head>
<body>

<div class="container-fluid">
   <h1>Lorem ipsum dolor sit amet consectetuer adipiscing elit</h1>
   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,ultricies nec, pellentesque eu, pretium quis, sem.</p>
</div>

<script type="text/javascript" src="https://api-public.niiio.me/public/kommunikationsrad/kommunikationsrad.bundle.min.js"></script>
<script type="text/javascript">
   dser.require(['dser.kommunikationsrad'], function (Kommunikationsrad) {
      Kommunikationsrad.init({
            receiver: 'demo@test.de',
            token: '<your-custom-api-token>',
            mapsToken: '<your-google-maps-javascript-api-token>',
            features: {
                mail: true
                telephone: true,
                map: true,
                chat: true
            },
        language: 'de',
        mailSettings:{
            logoUrl: 'https://api2.niiio.me/consultation_components_2/public/common/images/logo/DSER-simple.png',
            mainColor: '#5c723b',
            signature: {
                    companyName:"companyNameDemoData",
                    companyStreet:"companyStreetDemoData",
                    companyZip:"companyZipDemoData",
                    companyLocation:"companyLocationDemoData",
                    companyMail:"companyMailDemoData",
                    companyWeb:"companyWebDemoData",
                    registrationOffice:"registrationOfficeDemoData",
                    companyPhone:"companyPhoneDemoData",
                    salesTaxIdentificationNumber:"salesTaxIdentificationNumberDemoData",
                    authorizedRepresentative:"authorizedRepresentative"
                }
        },
            chat: {
                room: 'demo-room',
                user: undefined //chat will run in guest mode, since there's no user provided
            }
      });
   });
</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 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.
mapsToken valid Google Maps Javascript API token

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"
consultants An array of Consultants, each consultant is described as a JSOn Object Structure like companyData. This property is only required for the map view. see section "Customize your company information"
sender A JSON object structure to initially fill the component with the current user data (if available)

Example:

{
name: "Lorem ipsum",
telephone: "+123 456 789",
mail: "lorem@ipsum.com",
address: {
street: "Lorem ipsum",
zipCode: "12345",
city: "Ipsum"
}
}

Similar to companyData object.

also see section "Customize your company information" for more details
features You can disabled single features, if you don't need them. JSON object structure. {
telephone: true,
mail: true,
chat: false, //not supported yet
map: true
}
circle menu properties (please look in the documentation of the circle menu)
position 'bottom'
title 'Kontakt'
size 'regular'
appendTo jQuery selector 'body'

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
name The name of your company or contact person 'Deutsche Software Engineering & Research GmbH'
address The 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.

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

telephoneNumber
contactText (You can use plain text or HTML markup)
If you specify business data but do not customize the contactText or telephone properties, they will be missing from the contact view.

Wir sind auch telefonisch für Sie erreichbar.<br/>" +
"Montag bis Freitag: 08.00 - 17.00 Uhr"

"+49 35 81 / 37 4 99 - 0"

email email address of a consultant or company, required only for map view. this will be used as receiver address for the telephone appointment dialog when the user selects a marker on the map.
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

Customization 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.

Customize chat

The chat JSON Structure contains the following keys:

Die Tabelle mit ID 19 existiert nicht.

Example:

chat: {
    room: 'my_chat_room',
    user: {
        id: 'your-internal-user-id',
        name: 'Max Mustermann',
        title: 'Support',
        picture: 'http://yourdomain.com/mustermann/max.jpg'
    },
    payload: {
        'authentication-token' : 'jufhuidsgfisdbftc87z465',
        'related-object': 857345
    }
}

Integration

You will need additional scripts and stylesheets to use the component:
•The default theme for the app (CSS) 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.

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" crossorigin="anonymous">
<link rel="stylesheet" href="https://api-public.niiio.me/public/kommunikationsrad/css/kommunikationsrad.css">
<!--[if lte IE 9]>
   <link rel="stylesheet" type="text/css" href="https://api-public.niiio.me/public/kommunikationsrad/css/ie/ie-kommunikationsrad.css" />
<![endif]-->

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.

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-public.niiio.me/public/kommunikationsrad/kommunikationsrad.bundle.min.js"></script>
Setup and initialize the component

Add this block right after the included script files:

<script type="text/javascript">
   dser.require(['dser.kommunikationsrad'], function (Kommunikationsrad) {
      Kommunikationsrad.init({
        receiver: '<your-email-address>',
        token: '<your-custom-api-token>',
        mapsToken: '<your-google-maps-javascript-api-token>',
        language: 'de',
        mailSettings:{
            logoUrl: 'https://api2.niiio.me/consultation_components_2/public/common/images/logo/DSER-simple.png',
            mainColor: '#5c723b',
            signature: {
                    companyName:"companyNameDemoData",
                    companyStreet:"companyStreetDemoData",
                    companyZip:"companyZipDemoData",
                    companyLocation:"companyLocationDemoData",
                    companyMail:"companyMailDemoData",
                    companyWeb:"companyWebDemoData",
                    registrationOffice:"registrationOfficeDemoData",
                    companyPhone:"companyPhoneDemoData",
                    salesTaxIdentificationNumber:"salesTaxIdentificationNumberDemoData",
                    authorizedRepresentative:"authorizedRepresentative"
                }
        },
        features: {
            mail: true
            telephone: true,
            map: true,
            chat: true
        }
      });
   });
</script>

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

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.

Replace “ with your actual Google Maps Javascript API Token.
If you don’t have one: You can obtain your Google Maps Javascript API Token here: Google Developers Console.
Create a new or use an existing project and register a new API key for the following bundle: „Google Maps Javascript API“.

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

Get your API-Token