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

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

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

Für Code erweitern

Kopieren

SparkCentral.init ({
appID: '<app-id>',
//Nicht spezifiziert für US-Region (Standard) 
Region: 'eu-1',
//Für den authentifizierten Modus 
jwt: 'your_jwt', 
userID: 'user_id', 
Gebietsschema: 'en-US', 
customColors: {
brandColor: '65758e',
conversationColor: '65758e',
actionColor: '65758e',
}, 

menuItems:{
imageUpload: true,
fileUpload: true,
shareLocation: true
}, 

FixedIntroPane: falsch, 

prechatCapture: {
enabled: wahr, 
Felder: [
{
type: 'email',
name: 'email',
label: 'Email',
placeholder: 'your@email.com'
}, 
{
type: 'text',
name: 'company-website',
label: 'Company website',
placeholder: 'mycompany.com'
}, 
{ 
Typ: 'Auswählen', 
Name: 'Unternehmensgröße', 
Label: 'Unternehmensgröße', 
Platzhalter: 'Wähle eine Zahl... ' , 
options: [
{
name: '1-10',
label: '1-10 employees'
}, 
{
name: '11-50',
label: '11-50 employees'
}, 
{
name: '51+',
label: '51+ employees'
}
]
}} 

}, 
customText: {
actionPostBackError: 'Bei der Verarbeitung Ihrer Aktion ist ein Fehler aufgetreten. Bitte versuche es noch einmal. ' , 
clickToRetry: 'Nachricht wurde nicht zugestellt. Klicken Sie, um es erneut zu versuchen. ' , 
connectNotificationText: „Lassen Sie sich in Ihren anderen Apps benachrichtigen, wenn Sie eine Antwort erhalten.“ , 
connectNotificationSingletext: 'Werde benachrichtigt, wenn du eine Antwort erhältst. ' , 
connectNotificationSingleButtonText:<> 'Namensbenachrichtigungen einschalten', 
connectNotificationOthersText: 'andere', 
ConversationTimestampHeaderFormat: 'MMMM D YYYYY, h: mm A', 
fetchHistory: 'Mehr laden', 
 FetchingHistory: 'Geschichte abrufen... ' , 
FileToolArgeError: 'Maximale Dateigrößenbeschränkung überschritten ({size}) ', 
FileTypeError: 'Nicht unterstützter Dateityp.' , 
headerText: 'Wie können wir helfen? ' , 
imageClickToreLoad: 'Klicken, um das Bild neu zu laden. ' , 
imageClickToView: 'Klicken, um{size} das Bild anzuzeigen. ' , 
ImagePreviewNotAvailable: 'Vorschau nicht verfügbar. ' , 
inputPlaceholder: 'Gib eine Nachricht ein... ' , 
IntroductionText: 'Wir sind hier um zu reden, also frag uns was! ' , 
invalidFileError: 'Nur Bilder werden unterstützt.  Wähle eine Datei mit einer unterstützten Erweiterung (jpg, jpeg, png, gif oder bmp). ' , 
locationNotSupported: 'Ihr Browser unterstützt keine Ortungsdienste 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', 
messageRelativeTimeDay: 'vor{value} d', 
messageRelativeTimeHour: ' {value}vor h ', 
messageRelativeTimeJustnow: „Gerade jetzt“, 
messageRelativeTimeMinute:' vor{value} m ', 
messageTimestampFormat: 'h: mm A', 
messagesEnding: 'Senden...' , 
messageDeliveri: 'Delivering', 
prechatCaptureGreetingText: 'Hallo,\ nUm anzufangen, möchten wir ein bisschen mehr über dich wissen: ', 
prechatCaptureConfirmationText: 'Danke dafür! Womit können wir dir helfen? ' , 
sendButtonText: 'Senden', 
settingsheaderText: 'Einstellungen', 
shareLocation: 'Standort freigeben“, 
tippToRetry: 'Nachricht nicht zugestellt. Tippe, um es erneut zu versuchen. ' , 
unsupportedMessageType: 'Nicht unterstützter Nachrichtentyp. ' , 
unsupportedActionType: 'Nicht unterstützter Aktionstyp. ' , 
uploadDocument: 'Dokument hochladen', 
uploadInvalidError: 'Ungültige Datei', 
uploadPhoto: 'Foto hochladen', 

}}) .dann (Funktion (){
// Your code after init is complete
}); 
initPromise.THEN (function (){
// do something
});
//gib es herum... 
initPromise.THEN (Funktion (){
//do something else
});

Optionen

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

Optionen für Farben

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

Text-Optionen

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

Menü-Elemente

Menüelemente können aktiviert oder deaktiviert werden.

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.

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'
}
]
}
]
} 

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

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)

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)

Schaltfläche Standortfreigabe

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

Bilder

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

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:

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.

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

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

Swift

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:

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:

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.