Artikel aktualisiert: 18. Februar 2022
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
- Gehen Sie zu Admin-Einstellungen, erweitern Sie Kanäle & Geschäftszeiten und wählen Sie Kanäle
- Wählen Sie Kanal hinzufügen aus und wählen Sie dann Sparkcentral Messenger aus.
- 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.
- 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.
- 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>
- 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

<script>
var initPromise = SparkCentral.init ({
integrationId: 'IntegrationId hier',
//Lassen Sie für die Region der US-Region (Standard) nicht spezifiziert
: 'eu-1',
//Dies stellt sicher, dass der Kunde nicht erstellen kann mehrere Gespräche.
canUserCreateMoreConversations: false,
canUserSeeConversationList: false,
customColors:{
brandColor: '65758e',
conversationColor: '65758e',
actionColor: '65758e',
},
MenuItems
:{
imageUpload: true,
fileUpload: true,
shareLocation: true
}, FixedHeader: false,
customText: {
actionPaymentCompleted: 'Zahlung abgeschlossen ',
actionPaymentError: 'Bei der Verarbeitung der Karte ist ein Fehler aufgetreten. <br> Bitte versuchen Sie es noch einmal oder verwenden Sie eine andere Karte. ' ,
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. ' ,
ClickToRetryForm: 'Formular wurde nicht übermittelt. Klicken Sie auf eine beliebige Stelle im Formular, um es erneut zu versuchen. ' ,
connectNotificationText: 'Synchronisiere deine Konversation und melde uns weiterhin eine Nachricht über deine Lieblings-App. ' ,
connectNotificationSingleText: 'Werden Sie benachrichtigt, wenn Sie eine Antwort erhalten. ' ,
ConversationLisTheaderText: 'Meine Gespräche ',
ConversationListPreviewanonymousText:' Someone ',
ConversationListPreviewCarouselText:'{user} hat eine Nachricht gesendet',
ConversationListPreviewFileText: '{user}hat eine Datei gesendet',
ConversationListPreviewFormText: '{user}hat ein Formular gesendet',
ConversationListPreviewFormResponseText:'{user} füllte ein Formular aus',
ConversationListPreviewImageText: '{user}hat ein Bild gesendet',
ConversationListPreviewLocationRequestText: '{user}hat eine Standortanfrage
gesendet',
ConversationListPrevieWuserText:' Du ',
ConversationListRelativeTimeJustNow: 'Gerade jetzt',
ConversationListRelativeTimeMinutes: ' {value}vor Minuten',
ConversationListRelativeTimeHour: 'vor 1 Stunde',
ConversationListRelativeTimeHours:{value} vor 'Stunden',
ConversationListRelativeTimeYesterday: 'Gestern', ConversationListTimeStampFormat: 'MM/TT/JJ',
ConversationTimestampheaderFormat: 'MMMM D YYYY, h:mm A',
couldNotConnect: 'Offline. Du erhältst keine Nachrichten. ' ,
couldNotConnectRetry: 'Erneutes Verbinden... ' ,
CouldNotConnectRySuccess:" Sie sind wieder online! ",
CouldNotLoadConversations: 'Konnte keine Gespräche laden. ' ,
EmailChangeAddress: 'Meine E-Mail ändern',
emailDescription: 'Um per E-Mail benachrichtigt zu werden, wenn Sie eine Antwort erhalten, geben Sie Ihre E-Mail-Adresse ein. ' ,
EmailFieldLabel: 'E-Mail',
EmailFieldPlaceHolder: 'Ihre E-Mail-Adresse',
EmailFormButton: 'Senden',
EmailInkingErrorMessage: 'Bitte übermitteln Sie eine gültige E-Mail-Adresse. ' ,
FetchHistory: 'Mehr laden',
fetchHistory: 'Verlauf wird abgerufen... ' ,
FileToolargeError: 'Maximale Dateigrößenbeschränkung überschritten ({size}) ',
FileTypeError: 'Nicht unterstützter Dateityp.' ,
formErrorInvalideMail: 'E-Mail ist ungültig',
formErrorNolongerThan: 'Muss nicht mehr als ({characters}) Zeichen enthalten',
formErrorNoShorterThan: 'Muss mindestens ({characters}) Zeichen enthalten',
formErrorUnknown: 'Das tut nicht schaue ganz richtig aus',
FormFieldSelectPlaceHolderFallback: 'Wähle eins... ' ,
frontenDemailChannelDescription: 'Um mit uns per E-Mail zu sprechen, senden Sie einfach eine Nachricht an unsere E-Mail-Adresse und wir antworten in Kürze: ',
headerText: 'Wie können wir helfen?' ,
ImageClickToreLoad: 'Klicken Sie, um das Bild neu zu laden. ' ,
ImageClickToView: 'Klicken, um{size} das Bild anzusehen. ' ,
ImagePreviewNotAvailable: 'Vorschau nicht verfügbar. ' ,
inputPlaceHolder: 'Geben Sie eine Nachricht ein... ' ,
inputPlaceHolderBlocked: 'Füllen Sie das obige Formular aus... ' ,
IntroAppText: 'Senden Sie uns eine Nachricht unten oder von Ihrer Lieblings-App. ' ,
LineChannelDescription: 'Um mit uns über LINE zu sprechen, scannen Sie diesen QR-Code mit der LINE-App und senden Sie uns eine Nachricht. ' ,
linkChannelPageHeader: 'Konversation synchronisieren'
, LinkError: 'Beim Versuch, einen Link für diesen Kanal zu generieren, ist ein Fehler aufgetreten. Bitte versuche es noch einmal. ' ,
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. ' ,
messageIndicatorTitlePlural: '({count}) Neue Nachrichten',
messageIndicatorTitleSingular:' ({count}) Neue Nachricht',
messageLativeTimeDay: '{value}vor dem Tag',
messageLativeTimeHour: ' {value}vor h“,
messageElativeTimeJustNow: 'Gerade jetzt“,
messageErlativeTimeMinute: '{value}vor',
messageTimeStampFormat: 'h:mm A',
MessageLiefert: 'Geliefert',
messageSeen: 'Gesehen',
messageSending: 'Senden... ' ,
MessengerChannelDescription: 'Verbinden Sie Ihr Facebook Messenger-Konto, um benachrichtigt zu werden, wenn Sie eine Antwort erhalten und die Unterhaltung auf Facebook Messenger fortsetzen. ' ,
newConversationButtonText: 'Neue Konversation',
notificationSettingSchannelsBeschreibung: 'Synchronisieren Sie diese Unterhaltung, indem Sie eine Verbindung zu Ihrer bevorzugten Messaging-App herstellen, um die Unterhaltung auf Ihre Weise fortzusetzen.“ ,
notificationSettingSchannelStille: 'Andere Kanäle',
notificationSettingsConnected: 'Verbunden',
notificationSettingsConnecteDas: 'Verbunden als{username} ',
PrechatCaptuRegreetingText: 'Hallo da\ nUm anzufangen, möchten wir ein bisschen mehr über dich wissen:',
PrechatCapturenaMeLabel: 'Dein Name',
PrechatCapturenamePlaceHolder: 'Geben Sie Ihren Namen ein... ' ,
PrechatCaptureeMailAillabel: 'E-Mail',
PrechatCaptureEmailPlaceHolder: 'name@company.com',
PrechatCaptureConfirmationText: 'Danke dafür! Womit können wir dir helfen? ' ,
PrechatCapturemailGunLinkingConfirmation: 'Sie werden hier und per E-Mail{email} sofort benachrichtigt, wir antworten. ' ,
sendButtonText: 'Senden',
settingSheaderText: 'Einstellungen',
shareLocation: 'Location',
SMSBadRequestError: „Wir konnten mit dieser Nummer nicht kommunizieren. Versuchen Sie es noch einmal oder benutzen Sie einen anderen. ' ,
smsCancel: 'Cancel',
smschangenNumber: 'Ändere meine Nummer',
smschannelDescription: 'Verbinden Sie Ihre SMS-Nummer, um benachrichtigt zu werden, wenn Sie eine Antwort erhalten, und setzen Sie das Gespräch per SMS fort. ' ,
smschannelPendingDescription: 'Überprüfen Sie Ihre Nachrichten unter{number}, um Ihre Telefonnummer zu bestätigen. ' ,
smsContinue: 'Senden',
smsinValidNumberError: 'Bitte geben Sie eine gültige Telefonnummer ein. ' ,
SMSLinkCancelled: 'Link zu{appUserNumber} wurde abgebrochen. ' ,
smsLinkPending: 'Pending',
smspingChannelError: 'Beim Senden einer Nachricht an Ihre Nummer ist ein Fehler aufgetreten. ' ,
smsSendText: 'Schicken Sie mir einen Text',
SMSStartTexting: 'Starttexting',
smsToomanyRequestsError: 'Kürzlich wurde eine Verbindung für diese Nummer angefordert. Bitte versuchen Sie es in{minutes} Minuten noch einmal. ' ,
smstoomanyRequestsoneMinuteError: 'Eine Verbindung für diese Nummer wurde kürzlich angefordert. Bitte versuchen Sie es in 1 Minute erneut. ' ,
smsunHandlederror: „Etwas ist schief gelaufen. Bitte versuche es noch einmal. ' ,
SyncConversation: 'Konversation synchronisieren',
TapToRetry: 'Nachricht nicht zugestellt. Tippen, um es erneut zu versuchen. ' ,
TapToRetryForm: 'Formular wurde nicht eingereicht. Tippen Sie auf eine beliebige Stelle im Formular, um es erneut zu versuchen. ,
TelegramChannelDescription: 'Verbinden Sie Ihr Telegramm-Konto, um benachrichtigt zu werden, wenn Sie eine Antwort erhalten und die Unterhaltung auf Telegram
fortsetzen',
uploadDocument: 'File',
uploadInvaliderError: 'Ungültige Datei',
UploAdVirusError: 'Ein Virus wurde in Ihrer Datei erkannt und es wurde abgelehnt',
unsupportedMessageType: 'Nicht unterstützter Nachrichtentyp. ' ,
UnsupportedActionType: 'Nicht unterstützter Aktionstyp. ' ,
ViberChannelDescription: 'Verbinden Sie Ihr Viber-Konto, um benachrichtigt zu werden, wenn Sie eine Antwort erhalten, und setzen Sie die Unterhaltung auf Viber fort. Scannen Sie zunächst den QR-Code mit der Viber-App. ' ,
ViberChannelDescriptionMobile: 'Verbinden Sie Ihr Viber-Konto, um benachrichtigt zu werden, wenn Sie eine Antwort erhalten, und setzen Sie die Unterhaltung auf Viber fort. Installieren Sie zunächst die Viber-App und tippen Sie auf Verbinden. ' ,
ViberQrCodeError: 'Beim Abrufen Ihres Viber QR-Codes ist ein Fehler aufgetreten. Bitte versuche es noch einmal. ' ,
WechatChannelDescription: 'Verbinden Sie Ihr WeChat-Konto, um benachrichtigt zu werden, wenn Sie eine Antwort erhalten und die Unterhaltung auf WeChat fortsetzen. Scannen Sie diesen QR-Code zunächst mit der WeChat-App. ' ,
WechatChannelDescriptionMobile: 'Verbinden Sie Ihr WeChat-Konto, um benachrichtigt zu werden, wenn Sie eine Antwort erhalten, und setzen Sie die Unterhaltung auf WeChat fort. Speichern Sie zunächst dieses QR-Code-Bild und laden Sie es in< einem href=\ 'weixin: //dl/scan\ '>QR-Codescanner< /a hoch>. ,
WechatQrCodeError: 'Beim Abrufen Ihres WeChat QR-Codes ist ein Fehler aufgetreten. Bitte versuche es noch einmal. ' ,
WhatsAppChannelDescriptionDesktop: 'Synchronisiere dein Konto mit WhatsApp, indem du den QR-Code scannst oder auf den folgenden Link klickst. \ nSenden Sie dann die vorausgefüllte Nachricht, um die Synchronisierungsanforderung zu überprüfen. (Ihr Code:{{code}}). ' ,
WhatsAppChannelDescriptionMobile: 'Synchronisiere dein Konto mit WhatsApp, indem du auf den folgenden Link klickst. \ nSenden Sie dann die vorausgefüllte Nachricht, um die Synchronisierungsanforderung zu überprüfen. (Ihr Code:{{code}}). ' ,
WhatsApplinkingError: 'Beim Abrufen Ihrer WhatsApp-LinkingError ist ein Fehler aufgetreten. Bitte versuche es noch einmal. '
}
}) .then (Funktion (){
// Your code after init is complete
});
</script>

Öffnet das Konversations-Widget (NOOP wenn eingebettet)
SparkCentral.open ();
Schließt das Konversations-Widget (NOOP wenn eingebettet)
SparkCentral.Close (); Gibt an,
ob das Widget gerade geöffnet oder geschlossen ist.
SparkCentral.isOpened ();
Protokolliert einen Benutzer im Web Messenger und ruft die Konversationen ab, die der Benutzer bereits in anderen Browsersitzungen und/oder Geräten geführt hat. Beachten Sie, dass Sie dies nicht nach „init“ aufrufen müssen, wenn Sie die externe ID und jwt bereits als Argumente im Aufruf von „init“ übergeben haben. In diesem Fall erfolgt dies intern als Teil der Initialisierungssequenz. Dies gibt ein „Versprechen“ zurück, das aufgelöst wird, wenn der Web Messenger wieder bereit ist.
SparkCentral.login ('externa-id', 'some-jwt');
Meldet den aktuellen Benutzer ab und initialisiert das Widget mit einem anonymen Benutzer neu. Dies gibt ein Versprechen zurück, das aufgelöst wird, wenn der Web Messenger wieder bereit ist.
SparkCentral.logout ();
Zerstört den Web Messenger und lässt ihn verschwinden. Der Web Messenger muss mit „init“ neu initialisiert werden, um wieder zu funktionieren, da er auch die Integrations-ID aus dem Web Messenger bereinigt. Es wird auch alle Hörer lösen, die Sie möglicherweise mit `SparkCentral.on` haben.
SparkCentral.Destroy ();
Sendet im Namen des Benutzers eine Nachricht an die gezielte Konversation.
sparkcentral.sendMessage (
{
type: 'text',
text: 'hello'
},
'<Konversations-ID>'
);
//ODER
sparkCentral.sendMessage ('hallo', '<Konversations-ID >');
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.

sparkcentral.init ({
integrationId: '<IntegrationId>',
//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'
},
{
type: 'select',
name: 'firmengröße',
label: 'Unternehmensgröße',
Platzhalter: 'Wähle eine Nummer... ' ,
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.
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. Siehe Sprachcodes und Ländervorwahlen. 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.
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.
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.
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.
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'
}
]
}
]
}
Feld | Informationen |
---|---|
name: 'Name des Feldes“,
|
|
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’,
|
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.
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:
- Erweitern Sie auf der Registerkarte Einstellungen den Agent-Workspace, und wählen Sie Kontaktattribute aus.
- 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
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)
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)
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
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
-
Installieren Sie CocoaPods.
CocoaPods ist Abhängigkeitsmanager für Swift- und Objective C Cocoa-Projekte.
-
Führen Sie den folgenden Befehl in Ihrem Terminal aus:
gem installiere coapods
-
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:
Kopierenprojekt 'Speicherort deiner .xcproj-Datei'
Ziel 'YourApp' do
Pod 'Sparkcentral'
Ende -
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
-
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.
[Sparkcentral initWithSettings: [skcSettings settingsWithIntegrationId: @" YOUR_INTEGRATION_ID"] CompletionHandler: ^ (nsError * _Nullable Fehler, NsDictionary * _Nullable UserInfo){
// Your code after init is complete
}];
Swift
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:
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.
Sie können nicht finden, was Sie suchen? Wir sind hier um zu helfen