Zum Hauptinhalt gehen

  Artikel aktualisiert: 10. November 2021

Sparkcentral Messenger-SDK

Das Sparkcentral Messenger SDK ermöglicht es Ihnen, einen anpassbaren Messenger mit vollem Funktionsumfang auf Ihrer Website oder in Ihrer mobilen App zu implementieren. Dies ermöglicht jedem Kunden, der Ihre Website besucht oder Ihre App verwendet, sich direkt an Ihr Support-Team zu wenden, sodass Ihre Benutzer Facebook, WhatsApp oder eine andere Messaging-Plattform nicht verwenden müssen.

Erstelle deinen Kanal

  1. Gehen Sie zu Einstellungen, erweitern Sie Channels& Business Hours und wählen Sie Kanäle aus.
  2. Wählen Sie Kanal hinzufügen aus und wählen Sie dann Sparkcentral Messenger aus.
  3. Geben Sie in dem daraufhin angezeigten Fenster einen Namen für Ihren Messenger-Kanal ein. Dieser Name sollte eindeutig und spezifisch für den Standort Ihres Messenger sein, z. B. eine bestimmte Webseite oder Ihre mobile App. Wählen Sie Weiter.
    Hinweis: Wenn das Fenster nicht angezeigt wird, vergewissern Sie sich, dass Ihr Browser Popups von Sparkcentral zulässt.
  4. Speichern Sie die Informationen im angezeigten Fenster.
    Hinweis: Diese Informationen werden nur einmal angezeigt, daher ist es wichtig, sie jetzt aufzuzeichnen.

Implementieren Sie Messenger auf Ihrer Website

Letzte Version

Die neueste Version unseres Web Messenger SDK finden Sie hier:

https://cdn.sparkcentral.com/rtm/web/2.1.0/loader.json

Die Vorgängerversion finden Sie hier: Sparkcentral Messenger SDK 1.25.7

Jetzt anfangen

Die folgenden Schritte sind erforderlich, damit Messenger auf Ihrer Website angezeigt wird.

  1. Fügen Sie den folgenden Code am Ende des<> Head-Abschnitts ein. (Vergewissern Sie sich, dass Sie alles kopieren!)

    <Drehbuch>

    ! Funktion (s, c, o, i) {var a, p, u, d= [], f= []; Funktion e () {var n=" 2.1.0"; versuche {if (! i) throw new Error (n); var e, t=" https://cdn.sparkcentral.com/rtm/web/2.1.0/", r=" sparkcentral"; if ((e= "string" ==typeof this.response? json.parse (this.response) :this.response) .url) {var s=c.getElementsByTagName ("Skript") [0], o=C.CreateElement ("Skript"); o.async=! 0; var a=i.match (/([0-9] +)\.? ([0-9] +)? \.? ([0-9] +)? /), p=a&& a [1]; wenn (&&a [3]) o.src=t+r+". "+i+" .min.js"; sonst{if(!(1<=p&&e["v"+p]))throw new Error(n);o.src=e["v"+p]} s.parentNode.insertBefore (o, s)}} catch (e) {e.message===n& &console.error (e)}} s [o] = {init:function () {a=argumente; var n= {then:function (e) {return f.push ({type:"t",next:e}), n}, catch:function (e) {return f.push ({type:"c",next:e}), n}}; return n}}, on:function () {d.push(arguments)}, render:function (){p=arguments}, zerstör:function () {u=arguments}}, s.__onWebMessengerHostReady__ =function (e) {if (lösche s.__onWebMessengerHostReady__, s [o] =e, a) für (var n=e.init.apply (e, a), t=0; t <f.length; t++){var r=f[t];n="t"===r.type?n.then(r.next):n.catch(r.next)} p&& e.render.apply (e, p),&& ue. zerstör.apply (e, u); for (t=0; t< d.length; t++) e.on.apply (e, d [t])}; var n = neu xmlHttpRequest; n.addEventListener ("load", e), n.open ("GET "," https://cdn.sparkcentral.com/rtm/web/2.1.0/loader.json",! 0), n.responsetYpe=" json", n.send ()} (Fenster, Dokument," Sparkcentral"," 2 ");

    </skript>

  2. Fügen Sie den folgenden Init-Aufrufcode gegen Ende des<> Body-Abschnitts ein. Dadurch wird ein einfacher Web Messenger ohne spezielle Anpassungen initialisiert. (Anpassungen werden im nächsten Abschnitt beschrieben.)
  • Geben Sie in der dritten Zeile Ihre spezifische Channel-Integrations-ID ein. Dies ist einer der Textstücke, die bei der Kanalerstellung generiert werden.
  • Das Regionsfeld muss entsprechend Ihrer Sparkcentral Instanz festgelegt werden. Sparkcentral ist in folgenden Regionen verfügbar:
    Region-Identifikatoren
    Region Kennung der Region
    Vereinigte Staaten Lassen Sie nicht spezifiziert
    Europäische Union eu-1

Anpassen von Web Messenger-Optionen

Zum Anpassen Ihres Web Messenger stehen verschiedene Optionen zur Verfügung. Das Folgende ist ein Beispiel für einen vollständig angepassten Web Messenger. Jede verwendete Option wird nach dem Code-Snippet dokumentiert.

Optionen

Die folgenden allgemeinen Einstellungen können geändert werden.

Optionen, Standardwerte und Definitionen
Option Optional? Standardwert Beschreibung
integrationId Nein - Ihre App-/Integrations-ID.
Region Ja - Die Zielregion, in der sich die App befindet.
jwt Ja - Das Token zur Authentifizierung Ihrer Kommunikation mit dem Server.
userID Ja - Die ID des Benutzers.
AuthCode Ja - Ein Authentizierungscode zum Verknüpfen mit einer bestehenden Konversation.
Gebietsschema Ja de-US

Das Gebietsschema, das für die Datumsformatierung im `-`-Format verwendet wird. Sprachcodes finden Sie hier und Ländercodes hier.

Hinweis: Der Länderteil ist optional, und wenn ein Land entweder nicht erkannt oder nicht unterstützt wird, greift die App auf die generische Sprache zurück. Wenn die Sprache nicht unterstützt wird, greift die App auf „en-US“ zurück.

Hinweis: Dies wird nur für die Datumsformatierung verwendet und bietet keine integrierten Übersetzungen für Web Messenger.

SoundNotificationEnabled Ja true Aktiviert die akustische Benachrichtigung für neue Nachrichten.
ImageuploadenEnabled Ja true Aktiviert die Funktion zum Hochladen von Bildern.
eingebettet Ja FALSCH Teilt dem Widget mit, dass es eingebettet ist (siehe nachfolgender Abschnitt Embedded).
DisplayStyle Ja Knopf Wie der Messenger auf Ihrer Website erscheint. Muss entweder eine Taste oder eine Registerkarte sein.
buttoniconURL Ja - Wenn der DisplayStyle" Button ist", können Sie Ihr eigenes Schaltflächensymbol auswählen. Das Bild muss mindestens 200 x 200 Pixel im JPG-, PNG- oder GIF-Format haben.
buttonWidth Ja 58px Wenn der DisplayStyle eine" Schaltfläche ist", haben Sie die Möglichkeit, die Tastenbreite anzugeben.
buttonHeight Ja 58px Wenn der DisplayStyle eine" Schaltfläche ist", haben Sie die Möglichkeit, die Tastenhöhe anzugeben.
BusinessName Ja - Ein benutzerdefinierter Firmenname.
BusinessConUrl Ja - Eine benutzerdefinierte Geschäftssymbol-URL. Das Bild muss mindestens 200 x 200 Pixel groß sein und muss im JPG-, PNG- oder GIF-Format vorliegen.
backgroundimageUrl Ja - Eine Hintergrundbild-URL für die Konversation. Das Bild ist so gekachelt, dass es in das Fenster passt.
CustomColors Ja Siehe folgenden Abschnitt In der Web Messenger-Benutzeroberfläche verwendete Farben.
CustomText Ja Sehen Sie das folgende Beispiel

In der Web Messenger-Benutzeroberfläche verwendete Zeichenfolgen. Sie können diese verwenden, um den Text entweder anzupassen oder zu übersetzen.

Hinweis: Einige Zeichenfolgen enthalten Variablen (umgeben von {}), die in Ihrem benutzerdefinierten Text verbleiben müssen.

MenuItems Ja Siehe den folgenden Abschnitt  
PrechatCapture Ja Siehe den folgenden Abschnitt  

Optionen für Farben

Sie können Ihrem Web Messenger ein benutzerdefiniertes Aussehen verleihen, indem Sie die folgenden Einstellungen bearbeiten.

Farboptionen, Standardwerte und Beschreibungen
Option Optional? Standardwert Beschreibung
BrandColor Ja 65758e Diese Farbe wird im Messenger-Header und die Schaltfläche oder Registerkarte im Ruhezustand verwendet. Muss eine 3- oder 6-stellige Hexadezimalfarbe haben.
ConversationColor Ja 0099ff Diese Farbe wird für Kundennachrichten, schnelle Antworten und Aktionen in der Fußzeile verwendet. Muss eine 3- oder 6-stellige Hexadezimalfarbe haben.
ActionColor Ja 0099ff Diese Farbe wird für Handlungsaufforderungen in Ihren Nachrichten verwendet. Muss eine 3- oder 6-stellige Hexadezimalfarbe haben.

Text-Optionen

Web Messenger hat viele Textoptionen zur Auswahl. Hier sind ein paar Beispiele.

Standardwerte für Textoptionen
Option Standardwert wenn nicht verwendet
ActionPostBackError Bei der Verarbeitung Ihrer Aktion ist ein Fehler aufgetreten. Bitte versuchen Sie es noch einmal.
ClickToRetry Nachricht wurde nicht übermittelt. Klicken Sie, um es erneut zu versuchen.
connectNotificationText Werden Sie in Ihren anderen Apps benachrichtigt, wenn Sie eine Antwort erhalten.
connectNotificationSingleText Werden Sie benachrichtigt, wenn Sie eine Antwort erhalten.
connectNotificationSingleButtonText Aktivieren Sie<> Namensbenachrichtigungen
connectNotificationOthersText andere
ConversationTimestampHeaderFormat MMMM D YYYY, H:mm A
FetchHistorie Mehr laden
FetchInghistory Verlauf wird abgerufen...
HeaderText Wie können wir helfen?
InputPlaceHolder Geben Sie eine Nachricht ein...
EinführungText Wir sind hier um zu reden, also frag uns irgendetwas!
InvalidFileError Es werden nur Bilder unterstützt. Wählen Sie eine Datei mit einer unterstützten Erweiterung aus (jpg, jpeg, png, gif oder bmp).
LocationNotSupportiert Ihr Browser unterstützt keine Standortdienste oder wurde deaktiviert. Bitte geben Sie stattdessen Ihren Standort ein.
LocationSecurityRestriction Diese Website kann nicht auf Ihren Standort zugreifen. Bitte geben Sie stattdessen Ihren Standort ein.
LocationsEndingFailed Standort konnte nicht gesendet werden
LocationServicesDenied Diese Website kann nicht auf Ihren Standort zugreifen. Erlauben Sie den Zugriff in Ihren Einstellungen oder geben Sie stattdessen Ihren Standort ein.
MessageError Beim Senden Ihrer Nachricht ist ein Fehler aufgetreten. Bitte versuche es noch einmal.
MessageIndicatorTitlePlural ({count}) Neue Nachrichten
MessageIndicatorTitleSingular ({count}) Neue Nachricht
MessageElativeTimeDay {value}vor d
MessageElativeTimeHour {value}h ago
MessageElativeTimeJustNow Gerade jetzt
MessageElativeTimeMinute {value}vor m
MessageTimeStampFormat h:mm Ein
MessageSending Sende...
MessageGeliefert Geliefert
sendButtonText Senden
SettingSheaderText Einstellungen
TapToRetry Nachricht wurde nicht übermittelt. Tippen, um es erneut zu versuchen.
UnsupportedMessageType Nicht unterstützter Nachrichtentyp.
UnsupportedActionType Nicht unterstützter Aktionstyp.
uploadDocument Dokument hochladen.
uploadInvalidiError Ungültige Datei.
uploadPhoto Foto hochladen.

Menü-Optionen

Menüelemente können aktiviert oder deaktiviert werden.

Standardwerte und Beschreibungen der Menüoption
Option Optional? Standardwert Beschreibung
ImageUpload Ja true Aktiviert den Menüpunkt zum Hochladen von Bildern
FileUpload Ja true Aktiviert den Menüpunkt zum Hochladen von Dateien
ShareLocation Ja true Aktiviert den Menüpunkt Speicherort freigeben

Prechat-Erfassungsoption

Mit dieser Option können Sie den Web Messenger automatisch eine Nachricht an den Benutzer senden lassen. Sie können eine Vielzahl von Nachrichten implementieren. Das folgende Code-Snippet ist das gleiche wie im früheren Beispiel.

Kopieren
PrechatCapture: {
enabled: true,
fields: [
{
type: 'email',
name: 'email',
label: 'Email',
placeholder: 'your@email.com'
}
{
type: 'text',
name: 'company-website',
label: 'Company website',
placeholder: 'mycompany.com'
},,
{
type: 'select',
name: 'Unternehmensgröße',
Bezeichnung: 'Unternehmensgröße ',
Platzhalter: 'Wähle eine Zahl...' ,
Optionen: [
{
name: '1-10',
label: '1-10 employees'
},
{
name: '11-50',
label: '11-50 employees'
},
{
name: '51+',
label: '51+ employees'
}
]
}
]
}
Feldnamen und Informationen
Feld Informationen
E-Mail

name: 'Name des Feldes“,
label: 'Labelname ',
placeholder: 'Platzhaltertext hier'“

Text name: 'Name des Feldes“,
label: 'Labelname ',
placeholder: 'Platzhaltertext hier'“
Auswählen

Dies ist das Format, in dem mehrere Optionen hinzugefügt werden:

optionen: [ { name: ‘Name of the first option’,
label: ‘Label of the first option’
},
{
name: ‘Name of the second option’,
label: ‘Label of the second option’
},
{
name: ‘Name of the third option’,
label: ‘Label of the third option’
}
]

Option für eingebetteten Modus

Sie haben die Möglichkeit, den Web Messenger in einem eingebetteten Modus einzurichten. Auf diese Weise können Sie auswählen, wo das Widget sichtbar sein soll.

Das folgende Beispiel veranschaulicht, was Sie zum Einrichten benötigen.

Beachten Sie, dass Sie für den eingebetteten Modus den Parameter embedded auf true setzen und die Funktion sparkCentral.render () manuell aufrufen müssen.

Kopieren
sparkCentral.init ({
integrationId: 'INTEGRATION_ID_HERE',
embedded: true,
region: 'eu-1'
}) .then (() =>{
// Your code after init is complete
}
sparkCentral.Render (document.getElementById ('Chat-Container'));
JavaScript

Dieses Beispiel bettet den Sparkcentral Messenger in ein DOM-Element mit der ID „Chat-Container“ ein. Wenn Sie die Webseite öffnen, werden Sie feststellen, dass unten rechts keine Schaltfläche mehr angezeigt wird, sondern im Containerelement sichtbar ist.

Verwenden Sie Kontaktattribute, um bestimmte Messenger-Daten zu speichern

Sie können Informationen über die Webseite und den Benutzer mithilfe der Funktion „Kontaktattribute“ speichern. Um dies zu aktivieren, gehen Sie wie folgt vor:

  1. Erweitern Sie auf der Registerkarte Einstellungen den Agent-Workspace, und wählen Sie Kontaktattribute aus.
  2. Suchen Sie eines der vorgefertigten Kontaktattribute in der Liste und schalten Sie es auf Aktiviert um.

Wenn ein Client Sie jetzt über das Sparkcentral Messenger-Plugin kontaktiert, werden diese spezifischen Daten innerhalb eines Kontaktattributs gespeichert.

Verfügbare Kontaktattribute für das Web Messenger-Plugin
  • Sprache des Browsers
  • Vorname
  • Nachname
  • Seiten-Domäne
  • Seitentitel
  • Seiten-URL
  • Benutzer-ID

Verwenden Sie Shortcodes, um ein reichhaltiges Messaging-Erlebnis zu erstellen

Shortcodes sind eine nützliche Möglichkeit, eine schöne Messaging-Schnittstelle zu erstellen.

Verfügbare Shortcodes

Shortcode-Elemente und Syntax
Element Syntax Beispiel
Schaltfläche „Link“ % [] () % [Button-Label] (http://anyurl.com)
Schaltfläche „Antworten“ % [] (Antwort:) % [Button-Label] (Antwort:PayLoad)
Schaltfläche „Standortanfrage“ % [] (Standort) % [Button-Label] (Standort)
Bild ! [] () ! [] (http://url-of.the/image.jpg)

Schaltfläche „Link“

Durch die Verwendung mehrerer Shortcodes für Link-Buttons können Sie dem Benutzer mehrere Links in einer Nachricht senden. Ein Beispiel:

% [Link zu Facebook] (https://facebook.com)

% [Link zu Twitter] (https://twitter.com)

% [Link zu LinkedIn] (https://linkedin.com)

Eine Beispielnachricht mit drei Link-Buttons

Schaltfläche „Antworten“

Wenn Sie mehrere Shortcodes für die Antwortschaltfläche in einer Nachricht untereinander verwenden, können Sie dem Benutzer eine Wahl anbieten. Zum Beispiel:

% [Umsatz] (Antwort:Verkäufe)

% [Support] (Antwort:Support)

% [Engineering] (Antwort:Engineering)

Eine Beispielnachricht mit drei Antwort-Schaltflächen

Schaltfläche Standortfreigabe

Mit diesem Code können Sie den Benutzer „einladen“, seinen Standort mit Ihnen zu teilen.

Eine Beispielnachricht mit einer Schaltfläche mit der Aufschrift: Teilen Sie Ihren Standort mit uns

Bilder

Sie können Bilder und Gifs mit diesem Shortcode senden.

Eine Beispielnachricht mit einem GIF

Implementieren Sie Messenger in Ihrer mobilen App

Eine gute Möglichkeit, Sparkcentral in Ihre Prozesse zu integrieren, besteht darin, unseren In-App Messenger zu integrieren. Dies ist ein SDK, das wir erstellt haben, das unsere Kunden in ihren Apps implementieren können.

Verfügbare Plattformen

  • iOS
  • Android

Jetzt anfangen

iOS

Um unser SDK mit Ihrer iOS-Anwendung verwenden zu können, müssen Sie es Ihrem Xcode-Projekt hinzufügen.

Installieren Sie die SDK-Abhängigkeit

  1. Installieren Sie CocoaPods.

    CocoaPods ist Abhängigkeitsmanager für Swift- und Objective C Cocoa-Projekte.

  2. Führen Sie den folgenden Befehl in Ihrem Terminal aus:

    gem installiere coapods

  3. Sagen Sie Xcode, dass Sie diese Pod/Abhängigkeit verwenden.

    Erstellen Sie dazu eine Datei namens podfile im Quellordner Ihres Projekts. Geben Sie Folgendes ein und speichern Sie es:

    Kopieren
    projekt 'Speicherort deiner .xcproj-Datei' 
    Ziel 'YourApp' do
    Pod 'Sparkcentral'
    Ende
  4. Führen Sie einen Befehl aus, um Xcode anzuweisen, den Pod zu installieren, damit Sie ihn verwenden können.

    Navigieren Sie in Ihrem Terminal zum Quellordner Ihres Projekts.

    Geben Sie den folgenden Befehl im Terminal ein:

    Pod-Installation

  5. Navigieren Sie zu Ihrem Quellordner und öffnen Sie Info.plist. Fügen Sie darin die folgenden Schlüssel und Werte hinzu und speichern Sie sie.

    Kopieren
    <key> nsphotoLibraryUsageDescription< /key> 
    <string >${PRODUCT_NAME}liest Ihre Fotobibliothek, um zusätzliche Informationen zu sammeln<>
    </String-Schlüssel >nsphotoLibraryAddusageDescription< /key>
    <string> ${PRODUCT_NAME}schreibt in Ihre Fotobibliothek, um zusätzliche Informationen zu sammeln<>
    </String-Schlüssel> nscamerAusageDescription< /key>
    <string verwendet>${PRODUCT_NAME} Ihre Kamera, um zusätzliche zu sammeln information< /string>

Nutzen Sie das Framework in Ihrem Projekt

Ziel C

Importieren Sie das Framework in Ihren Quellcode:

#import" SparkCentral/Sparkentral.h"

Ziel-C

Die erste auszuführende Funktion ist die folgende. Ihre Integrations-ID sollte entsprechend geändert werden.

Kopieren
[Sparkcentral initWithSettings: [skcSettings settingsWithIntegrationId: @" YOUR_INTEGRATION_ID"] CompletionHandler: ^ (nsError * _Nullable Fehler, NsDictionary * _Nullable UserInfo){
// Your code after init is complete
}];

Swift

Kopieren
SparkCentral.initWith (skcSettings (IntegrationId:" YOUR_INTEGRATION_ID")){ (error: Error?, userInfo: [AnyHashable : Any]?) in
// Your code after init is complete
}

Klassenreferenz

Laden Sie die Klassenreferenzen für iOS und Android herunter: https://www.hootsuite.com/uploads/downloadable-assets/sparkcentral-API-mobile-class-references.6.30.2021.zip.

Android

Verknüpfen Sie die SDK-Abhängigkeit mit Gradle. Die Sparkcentral SDK-Abhängigkeit finden Sie auf Mavencentral (https://repo.maven.apache.org/maven2).

Weitere Informationen über Gradle und das Deklarieren öffentlich verfügbarer Repositories finden Sie unter https://docs.gradle.org/current/userguide/declaring_repositories.html#sec:declaring_public_repository

Verwenden Sie das SDK

Initialisieren Sie von Ihrer Application-Klasse. Fügen Sie Ihrer OnCreate-Methode in Ihrer Application-Klasse die folgenden Codezeilen hinzu:

Kopieren
SparkCentral.init (dies, neue Einstellungen ("YOUR_INTEGRATION_ID"), neuer SparkCentralCallback () {
@Override
public void run (Response Response){
// Your code after init is complete
}
});

Stellen Sie sicher, dass Sie YOUR_INTEGRATION_ID durch die Integrations-ID ersetzen, die Sie beim Hinzufügen eines neuen Web Messenger-Kanals generieren.

Wenn Sie keine Application-Klasse haben, müssen Sie eine erstellen, um sicherzustellen, dass Sparkcentral immer ordnungsgemäß initialisiert wird.

Klassenreferenz

Laden Sie die Klassenreferenzen für iOS und Android herunter: https://www.hootsuite.com/uploads/downloadable-assets/sparkcentral-API-mobile-class-references.6.30.2021.zip.