Zum Hauptinhalt gehen

Artikel aktualisiert: 19. November 2021

Sparkcentral Messenger SDK 1.25.7

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.

Implementierung von Messenger auf Ihrer Website

Letzte Version

Die neueste Version unseres Web Messenger SDK finden Sie hier:

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

Jetzt anfangen

Erstellen Sie einen 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. Diese Informationen werden nur einmal angezeigt, daher ist es wichtig, sie jetzt aufzuzeichnen.

Implementieren Sie den Web Messenger auf Ihrer Website

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

Fügen Sie am Ende Ihres<> head-Tags den folgenden Code ein. (Vergewissern Sie sich, dass Sie alles kopieren).

<Drehbuch>

var loaderUrl = 'https://cdn.sparkcentral.com/rtm/web/1.25.7/loader.json'

! Funktion (e, n, t, r) {function s () {try {var e; if (e=" string" ==typeof this.response? json.parse (this.response) :this.response) .url) {var t=n.getElementsByTagName ("Skript") [0], r=N.CreateElement ("Skript"); r.async=! 0, r.src=e.url, t.parentNode.insertBefore (r, t)}} catch (e) {}} var o, p, a, c= [], i= []; e [t] = {init:function () {return i.push}, e = {then:function (n) {return i.push}, e}, catch:function (n) {return i.push ({type:"c",next:n}), e}}; return e}}, am:{type:"t",next:n} function (){c.push(arguments)}, render:function (){p=arguments}, zerstör:function () {a=arguments}}, e.__onWebMessengerHostReady__ =function (n) {if (delete e.__onWebMessengerHostReady__, e [t] =n, o) für (var r=n.init.apply (n, o) , s=0; s< i.length; s++){var u=i[s];r="t"===u.type?r.then(u.next):r.catch(u.next)} p&& n.render.apply (n, p), a& &n.zerstör.apply (n, a); for (s = 0; s< c.length; s++) n.on.apply (n, c [s])}; var u=new xmlHttpRequest; u.addEventListener ("load", s), u.open ( "HOL DIR", LoaderUrl,! 0), u.ResponseTYPE=" json", u.send ()} (Fenster, Dokument," Sparkcentral");

</skript>

Fügen Sie den folgenden Init-Aufrufcode gegen Ende des<> Textabschnitts ein, um Messenger ohne spezielle Anpassungen zu initialisieren. Geben Sie in der dritten Zeile Ihre spezifische Kanal-App-ID ein. Dies ist einer der Textstücke, die bei der Kanalerstellung generiert werden.

Kopieren
<script> 
//TODO Sparkcentral APP_ID, ersetze dies durch dein eigenes, um diese Demo auszuführen.
var appID = 'DEINE APP-ID HIER';
//Funktion zur Initialisierung von Sparkcentral, dies wird auch alle unsere Events registrieren, die wir anhören möchten.
//diese Funktion wird aufgerufen, wenn das Dokument geladen ist. (Ereignis am Ende dieses Script-Tags)
Funktion InitialisesParkCentral () {

//Zeigt eine Nachricht an, dass es ungelesene Nachrichten gibt
SparkCentral.on ('UnreadCount', function (UnreadCount) {
//Erstellen Sie eine Nachricht basierend auf der Anzahl ungelesener Nachrichten
var message = 'Es gibt '+ unreadCount +' ungelesen Nachrichten.' ;
if (UnreadCount == 1) {
message = 'There is one unread message.';
}
});
//Initialisieren Sie Sparkcentral,
//Fügen Sie hier Ihre benutzerdefinierten Optionen hinzu
sparkCentral.init ({
appID: appID,
BusinessName: 'Ihr Firmenname hier',
customText: {
headerText: 'Your header text here',
inputPlaceholder: 'Your input-placeholder here',
introductionText: 'Your introduction text here',
messageSending: 'Sending...',
messageDelivered: 'Delivered',
sendButtonText: 'Send',
},
customColors: {
brandColor: '000000',
conversationColor: '4690DC',
actionColor: '4690DC',
},
menuItems: {
imageUpload: 'true',
},
}).then (function ({
};
}
//wenn unser Dokument fertig geladen ist, initialisieren wir unsere Sparkcentral-Instanz.
window.addEventListener ('load', function () {
initialiseSparkcentral();
});
</script>

Passen Sie Ihre 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.

Passen Sie Ihre Region an

Das Regionsfeld muss entsprechend Ihrer Sparkcentral Instanz festgelegt werden. Im folgenden Initialisierungscode gibt es ein Feld namens region: „eu-1“. Dies initialisiert die europäische Version des Messengers. Um auf den Messenger der Vereinigten Staaten zuzugreifen, lassen Sie das Feld nicht spezifiziert.

Tabelle der Regionskennungen
Region Kennung der Region
Vereinigte Staaten Lassen Sie nicht spezifiziert
Europäische Union eu-1

Optionen

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

Tabelle der allgemeinen Optionen
Option Optional? Standardwert Beschreibung
AppId Nein Deine App-ID
Region Ja Die Zielregion, in der sich die App befindet
jwt Ja Token zur Authentifizierung Ihrer Kommunikation mit dem Server
userID Ja ID des Nutzers
AuthCode Ja Ein Auth Code für die Verknüpfung mit einer bestehenden Konversation
Gebietsschema Ja de-US Gebietsschema, das für die Datumsformatierung im> Format< Sprache> -< COUNTRY verwendet wird. Sprachcodes finden Sie hier und Ländercodes hier. **Hinweis 1: ** Der Länderteil ist optional, und wenn ein Land entweder nicht erkannt oder unterstützt wird, wird es auf die Verwendung der generischen Sprache zurückgreifen. Wenn die Sprache nicht unterstützt wird, wird sie auf en-US zurückgreifen. Hinweis 2: Dies wird nur für die Datumsformatierung verwendet und bietet keine integrierten Übersetzungen für Web Messenger.
SoundNotificationEnabled Ja true Aktiviert die Sound-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 wird. (siehe folgenden Embedded-Abschnitt)
DisplayStyle Ja Knopf Wählen Sie aus, wie der Messenger auf Ihrer Website angezeigt wird. Muss entweder Button oder Tab sein.
buttoniconURL Ja Wenn der DisplayStyle die Schaltfläche ist, haben Sie die Möglichkeit, Ihr eigenes Schaltflächensymbol auszuwählen. Das Bild muss mindestens 200 x 200 Pixel groß sein und muss entweder im JPG-, PNG- oder GIF-Format vorliegen.
buttonWidth Ja 58px Wenn der DisplayStyle die Schaltfläche ist, haben Sie die Möglichkeit, die Schaltflächenbreite anzugeben.
buttonHeight Ja 58px Wenn der DisplayStyle die Schaltfläche ist, haben Sie die Möglichkeit, die Tastenhöhe anzugeben.
BusinessName Ja Ein benutzerdefinierter Firmenname.
BusinessConUrl Ja Eine benutzerdefinierte Business-Icon-URL. Das Bild muss mindestens 200 x 200 Pixel groß sein und entweder im JPG-, PNG- oder GIF-Format vorliegen.
backgroundimageUrl Ja Eine Hintergrundbild-URL für die Konversation. Das Bild wird 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 Strings, die in der Web Messenger-Benutzeroberfläche verwendet werden. Sie können diese verwenden, um den Text entweder anzupassen oder zu übersetzen. Hinweis: Einige Strings enthalten Variablen (umgeben von {}), die in Ihrem benutzerdefinierten Text verbleiben müssen.
MenuItems Ja Siehe folgenden Abschnitt  
PrechatCapture Ja Siehe folgenden Abschnitt  

Optionen für Farben

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

Tabelle der Farboptionen
Option Optional? Standardwert Beschreibung
BrandColor Ja 65758e Diese Farbe wird im Messenger-Header und die Schaltfläche oder Registerkarte im Leerlauf verwendet. Muss eine hexadezimale Farbe mit 3 oder 6 Zeichen haben.
ConversationColor Ja 0099ff Diese Farbe wird für Kundennachrichten, schnelle Antworten und Aktionen in der Fußzeile verwendet. Muss eine hexadezimale Farbe mit 3 oder 6 Zeichen haben.
ActionColor Ja 0099ff Diese Farbe wird für Call-to-Actions in Ihren Nachrichten verwendet. Muss eine hexadezimale Farbe mit 3 oder 6 Zeichen haben.

Text-Optionen

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

Tabelle der 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ü-Elemente

Menüelemente können aktiviert oder deaktiviert werden.

Tabelle der Menüoptionen
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-Erfassung

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'
}
]
}
]
}
Tabelle der Prechat-Optionen
Feld Informationen
E-Mail name: 'Name des Feldes ', Bezeichnung: 'Labelname', Platzhalter: 'Platzhaltertext hier'“
Text name: 'Name des Feldes ', Bezeichnung: 'Labelname', Platzhalter: 'Platzhaltertext hier'“
Auswählen Dies ist das Format, in dem mehrere Optionen hinzugefügt:options: [{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’}]

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

Tabelle der Kurzwahlnummern
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 Tasten-Links

Schaltfläche „Antworten“

Wenn Sie mehrere Kurzcodes 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

Erste Schritte

iOS

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

Installieren der SDK-Abhängigkeit

Das erste, was zu tun ist, ist CocoaPods zu installieren. CocoaPods ist Abhängigkeitsmanager für Swift- und Objective C Cocoa-Projekte.

Um es zu installieren, führen Sie den folgenden Befehl in Ihrem Terminal aus.

gem installiere coapods

Als Nächstes werden Sie mit Xcode 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

Führen Sie nun 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

Navigieren Sie zu Ihrem Quellordner und öffnen Sie die Datei „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"

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

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

Swift

Kopieren
SparkCentral.initWith (skcSettings (AppId:" YOUR_APP_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

Fügen Sie den folgenden Code in Ihre Gradle-Datei ein:

Kopieren
Repositorys {
maven{
url "https://sparkc.bintray.com/rtm"
}
}
Abhängigkeiten{
compile 'com.sparkcentral:core:latest.release'
compile 'com.sparkcentral:ui:latest.release'
}

Verwenden des 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_APP_ID"), neuer SparkCentralCallback () {
@Override
public void run (Response Response){
// Your code after init is complete
}
});

Stellen Sie sicher, dass Sie YOUR_APP_ID durch die App-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.