Support-Widget

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

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.

<script src="https://memoio.com/assets/web/web.js" async defer></script>
<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 Infomationen 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>

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.

<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 anderer Referenz verknüpfen

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

<script>
    // 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öffnen 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 solange, bis der Benutzer das Support-Widget einmal geschlossen hat. 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',
                    color: '#ee56cd'
                    ...
                 })">
    Support für diesen speziellen Artikel kontaktieren
</button>

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 solange, bis das Support-Widget zum ersten Mal geschlossen wird.

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.
`header.logo`	URL zu einem Bild, das im Kopfbereich des Support-Widgets angezeigt wird.	`"https://memoio.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.hide()

Schließt das Support-Widget. Eine evt. gestartete Unterhaltung bleibt geöffnet. Temporäre Einstellungen bleiben nur erhalten, wenn eine Unterhaltungen gestartet ist.

memoio.removeBadge()

Schließt das Support-Widget und entfernt das Badge. Eine evtl. gestartete Unterhaltung bleibt geöffnet. Temporäre Einstellungen bleiben nur erhalten, wenn eine Unterhaltung gestartet ist.

memoio.reset()

Schließt das Support-Widget und setzt alle Einstellungen zurück. Eine evtl. gestartete Unterhaltung wird archiviert und geschlossen.

Zurück zur Übersicht Zum Showcase