Hinweis: Die Dokumentation ist nicht aktuell. Bitte kontaktieren Sie uns, wenn sie diese Komponente in Ihre Seite einbinden möchten.

Anforderungen
Vollständiges Beispiel
API Dokumentation

Anforderungen

Um diese Komponente nutzen zu können, benötigen Sie folgende Drittanbieter-Sammlungen:

• JQuery
• Underscore
• Bootstrap Modal
• jQuery Mustache Plugin
• jQuery Validate Plugin

Folgendes CSS Stylecheet wird empfohlen:

• Bootstrap

Sie benötigen zusätzlich auch eine Google Maps JavaScript API v3 Schlüssel.

Vollständiges Beispiel

<!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/require-config.js"></script>
<script type="text/javascript" src="https://api-public.niiio.me/public/common/libs/require/require.js"></script>
<script type="text/javascript">
   require(['dser.kommunikationsrad'], function (Kommunikationsrad) {
      Kommunikationsrad.init({
         receiver: 'demo@test.de',
         token: '<your-custom-api-token>',
            mapsToken: '<your-google-maps-javascript-api-token>'
      });
   });
</script>

</body>
</html>

API Dokumentation

Initialisieren

Bitte geben Sie Ihren Benutzerdefinierten API-Schlüssel bei der Initialisierung an damit das Plug-In funktioniert.

Initialisieren Sie das Plugin, indem Sie die folgende Funktion aufrufen. Es benötigt genau ein Konfigurationsobjekt als Parameter.

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

Erforderliche Konfigurationsoptionen

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

Erweiterte und optionale Konfigurationsmöglichkeiten

Key Description Default
baseUrl URL to the server. All requests needed to load or send data will go to that address. https://api-public.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-public.niiio.me/public/kommunikationsrad/images/kommunikationsrad-default-logo.png
successImageUrl URL to the image displayed after an appointment was successfully arranged. https://api-public.niiio.me/public/kommunikationsrad/images/kommunikationsrad-success.png
failureImageUrl URL to the image displayed if an appointment could not be made. https://api-public.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 refer to the documentation of the circle menu)
position 'bottom'
title 'Kontakt'
size 'regular'
appendTo jQuery selector 'body'

Anpassen der Unternehmensinformationen

Durch die Unternehmensinformationen können Sie Ihre persönlichen Informationen und die Ihres Unternehmens anpassen. Hierbei kann die Adresse, Telefonnummer und Öffnungszeiten angepasst werden.

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

Anpassung mit Themes

Das Theme definiert die wichtigsten Farben, Schriftgrößen und andere visuelle Gimmicks, die von der Benutzeroberfläche des Plugins verwendet werden. Sie können Ihr eigenes Theme im Plugin-Initialisierung angeben.

Standardmäßig wird das DSER-Theme verwendet. Es beinhaltet:
• die Haupttextfarbe
• die Hauptschriftart
• Textfarbe, Hintergrundfarbe, Hover-Farbe und Randfarben der Bedienflächen
• Textfarbe und Hintergrundfarbe des Dialogteils

Sie können diese Regeln des Themes überschreiben, indem Sie ein eigenes Theme erstellen. Definieren Sie einfach Ihre CSS-Regeln, Geben Sie Ihrem Theme einen Namen und verbinden Sie es zu dem Plugin. Stellen Sie sicher, die entsprechenden CSS-Klassen richtig zu verwenden.

Integration

Sie benötigen zusätzliche Skripte und Stylesheets, um die Komponente verwenden zu können:
• Die App-spezifischen CSS-Regeln wird das Standard-Theme erhalten.
• Die App-spezifischen Skript-Dateien, um das PlugIn zum laufen zu bekommen.

Fügen Sie die Stylesheets in Ihre Seite ein

Kopieren Sie diesen Block in den HTML-Head Ihrer Webseite. Es ist für das korrekte Darstellen dieser Komponente erforderlich.

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

Diese Komponente basiert auf dem Bootstrap Markup und deren Klassen Definition. Sie benötigen die erste Zeile nicht, im Falle dass Sie das Bootstrap Stylesheet bereits implementiert haben. Gehen Sie nur Sicher, dass diese Komponente nach der Importierung von Bootstrap eingesetzt wird.

Fügen Sie erforderliche Skriptdateien in Ihrer Seite ein

Es existieren 2 Wege um die Skriptdateien einzufügen:

Option 1: Asynchrones Laden der erforderlichen Dateien mit RequireJS

• Vorteil: Sie brauchen nur wenige Dateien implementieren, alle benötigten Skripte werden asynchron durch RequireJS bezogen.
• Nachteil: Wenn Sie bereits über eine Skriptdatei verfügen, die eine anonyme AMD definiert, funktioniert diese Option leider nicht für Sie.

Implementieren der erforderlichen JavaSkript-Dateien

Laden Sie die Plugin-Skripte, indem Sie folgenden Block an das Ende des Bodys einfügen:

<script type="text/javascript" src="https://api-public.niiio.me/public/require-config.js"></script>
<script type="text/javascript" src="https://api-public.niiio.me/public/common/libs/require/require.js"></script>
Konfiguration und Initialisierung der Komponente

Fügen Sie diesen Block nach den Skript-Dateien ein:

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

Option 2: Regelmäßiges Laden von Skript-Dateien, ohne RequireJS

• Vorteil: Diese Methode funktioniert auf den meisten Webseiten.
• Nachteil: Sie werden mehr Skripte einbinden müssen.

Einfügen der erforderlichen Javascript-Dateien

Laden Sie die Plugin-Skripte, indem Sie folgenden Block an das Ende des Bodys einfügen:

<script type="text/javascript" src="https://api-public.niiio.me/public/common/libs/jquery/jquery.min.js"></script>
<script type="text/javascript" src="https://api-public.niiio.me/public/common/libs/jquery/jquery.validate.js"></script>
<script type="text/javascript" src="https://api-public.niiio.me/public/common/libs/bootstrap/bootstrap-modal.js"></script>
<script type="text/javascript" src="https://api-public.niiio.me/public/common/services/PluginPropertyCheckService.js"></script>
<script type="text/javascript" src="https://api-public.niiio.me/public/common/services/UuidService.js"></script>
<script type="text/javascript" src="https://api-public.niiio.me/public/common/libs/jquery/jquery.mustache.js"></script>
<script type="text/javascript" src="https://api-public.niiio.me/public/common/google/GoogleMapsLoader.js"></script>
<script type="text/javascript" src="https://api-public.niiio.me/public/common/google/GoogleMapsStyle.js"></script>
<script type="text/javascript" src="https://api-public.niiio.me/public/circle-menu/jquery.circleMenu.js"></script>
<script type="text/javascript" src="https://api-public.niiio.me/public/kommunikationsrad/dser.CommunicationWheelService.js"></script>
<script type="text/javascript" src="https://api-public.niiio.me/public/kommunikationsrad/telephone-appointment/dser.TelephoneAppointmentTimeSelector.js"></script>
<script type="text/javascript" src="https://api-public.niiio.me/public/kommunikationsrad/telephone-appointment/dser.TelephoneAppointment.js"></script>
<script type="text/javascript" src="https://api-public.niiio.me/public/kommunikationsrad/mail-request/dser.MailRequest.js"></script>
<script type="text/javascript" src="https://api-public.niiio.me/public/kommunikationsrad/consultant-map/dser.ConsultantMap.js"></script>
<script type="text/javascript" src="https://api-public.niiio.me/public/kommunikationsrad/kommunikationsrad.js"></script>
Konfiguration und Initialisierung der Komponente

Fügen Sie diesen Block nach den Skript-Dateien ein:

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

Sie benötigen keinen separaten Container. Diese Komponente heftet sich automatisch an das Ende der Webseite.

Ersetzen Sie “ mit Ihrem aktuellen Google Maps Javascript API Schlüssel. Wenn sie noch keinen haben, erhalten Sie Ihn über die Google Entwickler Konsole. Erstellen Sie ein neues oder ein vorhandenes Projekt und einen neuen API-Schlüssel für das folgende Paket: „Google Maps JavaScript API“.

Hier erhalten Sie Ihren API-Schlüssel

Durch die weitere Nutzung der Seite stimmst du der Verwendung von Cookies zu. Weitere Informationen

Die Cookie-Einstellungen auf dieser Website sind auf "Cookies zulassen" eingestellt, um das beste Surferlebnis zu ermöglichen. Wenn du diese Website ohne Änderung der Cookie-Einstellungen verwendest oder auf "Akzeptieren" klickst, erklärst du sich damit einverstanden.

Schließen