Über das Support-Widget kann MEMOIO sehr einfach in eigene Webseiten oder Web-Anwendungen als Dialog eingebaut werden. Dabei kann entweder eine Unterhaltung mit einem Teilnehmer eines Channels gestartet werden, oder mit einer Person direkt (über deren TalkToMe-ID).

Welche Cookies und Daten das Support-Widget im Browser Ihrer Besucher speichert, beschreibt der Artikel Cookies und gespeicherte Daten.

Einbindung

Das folgende Skript bindet MEMOIO als Badge unten rechts auf der Seite ein und ermöglicht es, eine Unterhaltung mit dem angegebenen Channel (CHANNEL-ID) zu starten.

Sobald die Datei web.js geladen ist, löst sie einmalig das Ereignis memoio-ready aus. Registrieren Sie Ihre Funktionen dafür deshalb vor dem Einbinden von web.js: Da die Datei asynchron geladen wird, kann das Ereignis sonst bereits vorbei sein, bevor Ihr Skript ausgeführt wird.

<script>
    window.document.addEventListener('memoio-ready', function () {
        memoio.createBadge({
            partner: 'channel:CHANNEL-ID',

            position: 'bottom-right',
            expandBadgeOnSmallScreen: true,

            reference: 'MEMOIO-123-456-789',
            name: 'Name des Anwenders, falls bekannt',
            email: 'E-Mail des Anwenders, falls bekannt',
            silentMessage: 'Hier könnten Informationen zum Anwender oder zu der aktuellen Seite angegeben werden',

            font: '"Open Sans",Verdana,Tahoma,Arial,sans-serif',
            primaryColor: '#0097a7',
            header: {
                logo: 'https://test.com/logo.png'
            },
            intro: 'Kleiner Begrüßungstext',
            footer: {
                href: 'https://test.com/impressum',
                text: 'Impressum & Datenschutz'
            }
        });
    });
</script>
<script src="https://memoio.test.scireum.com/assets/web/web.js" async defer></script>

Sie können die Einstellungen auch an anderen Stellen oder später noch mit memoio.updateSettings({...}) überschreiben. So können Sie im Haupt-Template Ihrer Website alle Einstellungen vorkonfigurieren und auf speziellen Unterseiten einzelne Einstellungen überschreiben. Ein solcher Aufruf wirkt erst, nachdem memoio.createBadge({...}), memoio.initializeSettings({...}) oder memoio.start({...}) aufgerufen wurde; davor wird er ignoriert. Dasselbe gilt für memoio.showBadge({...}).

<script>
    window.document.addEventListener('memoio-ready', function () {
        memoio.updateSettings({
            // auf dieser speziellen Seite...

            partner: 'person:FESTE-PERSON',  // ... eine Person direkt anschreiben

            reference: 'REF-9000',           // ... mit einer anderen Referenz verknüpfen

            intro: 'Kleiner Begrüßungstext', // ... einen anderen Begrüßungstext anzeigen
        });
    });
</script>

Steht eine Einstellung erst später fest, etwa weil sie von Ihrem Server nachgeladen wird, setzen Sie sie ebenfalls innerhalb der Funktion für memoio-ready:

<script>
    window.document.addEventListener('memoio-ready', function () {
        // den Partner asynchron ermitteln und später setzen
        partnerAsynchronLaden().then(function (neuerPartner) {
            memoio.updateSettings({
                partner: neuerPartner
            });
        });
    });
</script>

Wenn Sie das Badge nicht sofort anzeigen möchten, benutzen Sie memoio.initializeSettings({...}) statt memoio.createBadge({...}). Das Support-Widget kann dann manuell geöffnet werden, indem die JavaScript-Funktion memoio.show() aufgerufen wird, zum Beispiel beim Klick auf einen Button:

<button onclick="memoio.show()">Support kontaktieren</button>

Es ist auch möglich, mehrere verschiedene Support-Widgets auf einer Seite anzubieten. Das „Standard“-Support-Widget können Sie wie bisher mit memoio.initializeSettings({...}) oder memoio.createBadge({...}) definieren. Mit memoio.start({...}) können Sie jederzeit ein Support-Widget mit anderen temporären Einstellungen öffnen, unabhängig davon, ob Sie bereits an einer anderen Stelle Einstellungen definiert haben. Diese temporären Einstellungen gelten so lange, bis der Benutzer das Support-Widget über das Kreuz schließt oder memoio.reset() aufgerufen wird. Das Minimieren des Support-Widgets beendet sie nicht. Die aktuellen Einstellungen bilden die Standard-Werte für die temporären Einstellungen.

<button onclick="memoio.start({
                    partner: 'email:spezial@example.com',
                    topic: 'Spezielle Rückfrage zu Artikel XYZ',
                    primaryColor: '#ee56cd'
                 })">
    Support für diesen speziellen Artikel kontaktieren
</button>
JavaScript-API

Folgende JavaScript-Funktionen stehen nach dem Einbinden der web.js zur Verfügung:

memoio.createBadge(settings)

Initialisiert und personalisiert das MEMOIO-Support-Widget.
Zeigt das MEMOIO-Badge auf der Seite an.
Kann mehrfach aufgerufen werden, wobei spätere Aufrufe die Einstellungen jedes Mal zurücksetzen.

memoio.showBadge(settings)

Überschreibt einzelne Einstellungen und zeigt das MEMOIO-Badge auf der Seite an.
Kann mehrfach aufgerufen werden, wobei spätere Aufrufe die Einstellungen nicht komplett zurücksetzen, sondern nur die gegebenen Einstellungen überschreiben.

memoio.initializeSettings(settings)

Initialisiert und personalisiert das MEMOIO-Support-Widget.
Zeigt das MEMOIO-Badge nicht an.
Kann mehrfach aufgerufen werden, wobei spätere Aufrufe die Einstellungen jedes Mal zurücksetzen.

memoio.updateSettings(settings)

Überschreibt einzelne Einstellungen. Kann mehrfach aufgerufen werden, wobei spätere Aufrufe die Einstellungen nicht komplett zurücksetzen, sondern nur die gegebenen Einstellungen überschreiben.

memoio.start(settings)

Initialisiert und öffnet ein Support-Widget mit temporären Einstellungen. Diese gelten so lange, bis das Support-Widget über das Kreuz geschlossen oder memoio.reset() aufgerufen wird. Läuft im Support-Widget bereits eine Unterhaltung, wird sie dort nicht mehr angezeigt, aber nicht archiviert.

Parameter Beschreibung Standardwert
partner Channel oder Person, mit dem/der die Unterhaltungen gestartet werden. Mögliche Werte sind:
  • channel:CHANNEL-ID
  • person:TALK-TO-ME-ID
  • email:EMAIL
email Mit diesem Wert wird das Feld „E-Mail“ beim MEMOIO-Login vorausgefüllt. Üblicher Anwendungsfall ist, dass der Anwender auf Ihrer Website eingeloggt ist und Sie deshalb seine E-Mail-Adresse kennen.
name Mit diesem Wert wird das Feld „Name“ beim MEMOIO-Login vorausgefüllt. Üblicher Anwendungsfall ist, dass der Anwender auf Ihrer Website eingeloggt ist und Sie deshalb seinen Namen kennen.
topic Mit diesem Wert wird das Feld „Betreff“ vorausgefüllt.
reference Falls vorhanden, wird die neu gestartete Unterhaltung automatisch mit dieser Referenz verknüpft.
message Mit diesem Wert wird das Feld „Nachricht“ vorausgefüllt.
silentMessage Diese Nachricht wird beim Starten der Unterhaltung mitgesendet, ohne dass der Anwender dies beeinflussen kann.
label Dieser Text steht auf dem Badge, mit dem das Support-Widget geöffnet werden kann. Live-Support
position Position des Badges auf der Seite. Mögliche Werte:
  • "bottom-right"
  • "bottom-left"
  • "top-right"
  • "top-left"
"bottom-right"
expandBadgeOnSmallScreen Bestimmt, ob das Badge bei kleiner Bildschirmbreite breiter angezeigt wird. true
header.logo URL zu einem Bild, das im Kopfbereich des Support-Widgets angezeigt wird. "https://memoio.test.scireum.com/assets/images/memoio_logo_headerbar_dark.svg"
intro Begrüßungstext, der im Kopfbereich des Support-Widgets angezeigt wird.
footer.text Text des Links, der im Fußbereich des Support-Widgets angezeigt wird.
footer.href URL des Links, der im Fußbereich des Support-Widgets angezeigt wird.
primaryColor Hintergrund-Farbe des Badges und der Formular-Buttons (CSS-Eigenschaft background-color). #3297a7
zIndex CSS-Eigenschaft z-index des Support-Widgets. 5000000
width Breite des geöffneten Support-Widgets (CSS-Eigenschaft width). 30%
height Höhe des geöffneten Support-Widgets (CSS-Eigenschaft height). 70%
font Schriftart innerhalb des Support-Widgets (CSS-Eigenschaft font-family). -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
memoio.show()

Öffnet das Support-Widget.

memoio.showIfConversationActive(force)

Setzt eine Unterhaltung fort, die der Besucher bei einem früheren Seitenaufruf im Support-Widget begonnen hat. War das Support-Widget dabei geöffnet, wird es wieder geöffnet, andernfalls wird nur das Badge angezeigt. Ohne eine solche Unterhaltung geschieht nichts.
memoio.createBadge(settings) und memoio.showBadge(settings) tun dies bereits selbst; die Funktion ist daher vor allem nach memoio.initializeSettings(settings) nützlich. Auf Mobilgeräten wirkt sie nur, wenn force auf true gesetzt ist. Auch dann setzt sie die frühere Unterhaltung dort nicht fort: War das Support-Widget geöffnet, öffnet sie wie memoio.show() einen neuen Tab, in dem der Besucher eine neue Unterhaltung beginnt; andernfalls zeigt sie nur das Badge an.

memoio.hide()

Minimiert das Support-Widget. Eine laufende Unterhaltung bleibt erhalten, ebenso etwaige temporäre Einstellungen. Das Badge bleibt sichtbar, wenn es angezeigt wurde oder eine Unterhaltung läuft. Das Support-Widget merkt sich im lokalen Speicher des Browsers, dass es minimiert ist, siehe Cookies und gespeicherte Daten.

memoio.removeBadge()

Minimiert das Support-Widget wie memoio.hide() und blendet das Badge aus. Solange eine Unterhaltung läuft, bleibt das Badge jedoch sichtbar.

memoio.reset()

Minimiert das Support-Widget und lädt es neu. Im lokalen Speicher des Browsers bleibt danach nur vermerkt, dass das Support-Widget minimiert ist; der Verweis auf eine laufende Unterhaltung wird entfernt. Eine laufende Unterhaltung wird dadurch im Support-Widget nicht mehr angezeigt; sie wird jedoch nicht archiviert und bleibt in MEMOIO erhalten. Der Besucher kann sie archivieren, indem er das Support-Widget über das Kreuz schließt und die Rückfrage bestätigt. Sind temporäre Einstellungen aus memoio.start(settings) aktiv, werden nur diese verworfen, andernfalls werden alle Einstellungen auf die Standardwerte zurückgesetzt.

Mobilgeräte

Auf Mobilgeräten öffnet sich das Support-Widget nicht auf Ihrer Seite. Stattdessen öffnet MEMOIO einen neuen Tab, in dem der Besucher die Unterhaltung mit dem angegebenen partner beginnt. Dorthin übernommen werden nur topic, message, silentMessage und reference. Alle übrigen Einstellungen, etwa email, name oder die Gestaltung des Support-Widgets, gelten dort nicht. Die Gestaltung wirkt sich nur noch auf das Badge auf Ihrer Seite aus.

Eine früher begonnene Unterhaltung wird auf Mobilgeräten nicht fortgesetzt, auch nicht mit memoio.showIfConversationActive(true).

Ausprobieren
partner
position
primaryColor
font
label
zIndex
width
height
header.logo
intro
footer.text
footer.href
email
name
topic
message
silentMessage
reference