SDK Sparkcentral Messenger 1.25.7

L'SDK Sparkcentral Messenger ti consente di implementare un messenger personalizzabile e completo sul tuo sito web o all'interno della tua app mobile. Ciò consente a qualsiasi cliente che visita il tuo sito Web o utilizza la tua app di contattare direttamente il team di supporto, eliminando la necessità per gli utenti di utilizzare Facebook, WhatsApp o qualsiasi altra piattaforma di messaggistica.

Implementazione di Messenger sul tuo sito web

Versione più recente

L'ultima versione del nostro SDK Web Messenger è disponibile qui:

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

Per iniziare

Crea un canale

1. Vai a Impostazioni di amministrazione, espandi Canali e orari di apertura e seleziona Canali.
2. Seleziona Aggiungi canale, quindi Sparkcentral Messenger.
3. Nella finestra che si apre, assegna un nome al canale di messaggistica. Questo nome deve essere univoco e relativo alla posizione del canale, ad esempio una pagina web specifica o la tua app mobile. Seleziona Avanti.
   
   Nota: se la finestra non viene visualizzata, assicurati che il browser consenta pop-up da Sparkcentral.
4. Salva le informazioni fornite nella finestra visualizzata. Queste informazioni verranno visualizzate una sola volta, quindi è importante registrarlo ora.

Implementa il Web Messenger sul tuo sito web

I seguenti passaggi sono necessari per far apparire il Web Messenger sul tuo sito Web.

Alla fine del> tag di< testa, incolla il seguente codice. (Assicurati di copiare tutto).

<sceneggiatura>

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

! function (e, n, t, r) {function s () {try {var e; if ((e=" stringa" ==typeof this.response? json.parse (this.response) :this.response) .url) {var t=n.getElementsByTagName ("script") [0], r=n.createElement ("script"); r.async=! 0, r.src=e.url, t.parentnode.insertBefore (r, t)}} catch (e) {}} var o, p, a, c= [], i= []; e [t] = {init:function () {o=arguments; var e= {then:function (n) {return i.push ({type:"t",next:n}), e}, catch:function (n) {return i.push ({type:"c",next:n}), e}}; return e}, il: function (){c.push(arguments)}, render:function (){p=arguments}, destroy :function () {a=arguments}}, e.__onWebMessengerHostReady__ =function (n) {if (delete e.__onWebMessengerHostReady__, e [t] =n, o) per (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.destroy.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 ( "OTTIENI", LoaderURL,! 0), u.responsetype=" json", u.send ()} (finestra, documento," Sparkcentral");

</script>

Incolla il seguente codice di chiamata init verso la fine della> sezione< del corpo per inizializzare Messenger senza personalizzazioni speciali. Nella terza riga, inserisci l'ID app del tuo canale specifico. Questo è uno dei pezzi di testo generati durante la creazione del canale.

<script>
//TODO Sparkcentral APP_ID, sostituiscilo con il tuo per eseguire questa demo. 
var AppID = 'IL TUO ID APP QUI';
//funzione per inizializzare Sparkcentral, che consente inoltre la registrazione di tutti i nostri eventi che vogliamo ascoltare.
//Questa funzione verrà richiamata al termine del caricamento del documento. (evento alla fine di questo tag script)
function initialiseSparkCentral(){

//Visualizza un messaggio che indica la presenza di messaggi non letti
sparkCentral.on ('unreadCount', function (unreadCount) {
//crea un messaggio basato sul numero di messaggi non letti
var message = 'Ci sono' + unreadCount + 'messaggi non letti.';
if (unreadCount == 1){
message = 'There is one unread message.';
}
}); 
//Inizializza SparkCentral, 
//Aggiungi qui le tue opzioni personalizzate 
SparkCentral.init ({
AppId: AppID, 
businessName: 'Il nome della tua azienda qui', 
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 (){
});
}
//quando il nostro documento ha terminato il caricamento, inizializzeremo la nostra istanza sparkcentral. 
window.addEventListener ('load', function (){
initialiseSparkcentral();
});
</script>

Personalizza le opzioni di Web Messenger

Sono disponibili diverse opzioni per personalizzare il tuo Web Messenger. Di seguito è riportato un esempio di Web Messenger completamente personalizzato. Ogni opzione utilizzata è documentata seguendo lo snippet di codice.

Regola la tua regione

Il campo della regione deve essere impostato in base all'istanza di Sparkcentral. Nel seguente codice di inizializzazione, c'è un campo chiamato regione: 'eu-1'. Questo inizializza la versione europea del messenger. Per accedere al messenger degli Stati Uniti, lasciare il campo non specificato.

Espandi per codice

Copia

SparkCentral.init({
appId: '<app-id>',
//Lascia non specificato per la regione degli Stati Uniti (predefinita)
regione: 'eu-1',
//Per la modalità autenticata 
jwt: 'your_jwt', 
userId: 'user_id', 
locale: 'en-US', 
 CustomColors: {
brandColor: '65758e',
conversationColor: '65758e',
actionColor: '65758e',
}, 

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

FixedIntropane: false,

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: 'company-size',
label: 'Dimensione azienda',
segnaposto: 'Scegli un numero...',
options: [
{
name: '1-10',
label: '1-10 employees'
},
{
name: '11-50',
label: '11-50 employees'
},
{
name: '51+',
label: '51+ employees'
}
]
}
]}
}, 
customText: {
actionPostbackError: 'Si è verificato un errore durante l'elaborazione dell'azione. Riprova.',
ClickToRetry: 'Messaggio non consegnato. Fai clic per riprovare.',
ConnectNotificationText: 'Ricevi una notifica all'interno delle altre app quando ricevi una risposta.', 
ConnectNotificationSingleText: 'Ricevi una notifica quando ricevi una risposta.',
connectNotificationSingleButtonText: 'Attiva notifiche <nome>,
connectNotificationOthersText: 'others', 
ConversationTimestampHeaderFormat: 'MMMM D AAAA, h: mm A',
FetchHistory: 'Carica altro', 
 FetchingHistory: 'Recupero della cronologia... ' , 
FileToolArgeError: 'Il limite massimo di dimensione del file è stato superato ({size})',
FileTypeError: 'Tipo di file non supportato.',
headerText: 'Come possiamo aiutare?',
imageClickToReload: 'Fai clic per ricaricare l'immagine. ',
imageClickToView: 'Fai clic per visualizzare{size} l'immagine.',
imagePreviewNotAvailable: 'Anteprima non disponibile.',
InputPlaceHolder: 'Digita un messaggio...', 
IntroductionText: 'Siamo qui per parlare, quindi chiedici qualsiasi cosa! ' , 
InvalidFileError: 'Sono supportate solo le immagini. Scegli un file con estensione supportata (jpg, jpeg, png, gif o bmp).',
LocationNotSupported: 'Il tuo browser non supporta i servizi di localizzazione o è stato disabilitato. Digita invece la tua posizione.',
LocationSecurityRestriction: 'Questo sito Web non può accedere alla tua posizione. Digita invece la tua posizione». , 
LocationSendingFailed: 'Impossibile inviare location', 
LocationServicesDenied: 'Questo sito Web non può accedere alla tua posizione. Consenti l'accesso nelle impostazioni o digita invece la tua posizione',
MessageError: 'Si è verificato un errore durante l'invio del messaggio. Riprova.,
messageIndicatorTitlePlural: '({count}) Nuovi messaggi', 
MessageIndicatorTitleSingular:' ({count}) Nuovo messaggio',
MessageRelativeTimeDay: '{value}d fa', 
MessageRelativeTimeHour:' {value}h fa', 
MessageRelativeTimeJustNow: 'Proprio ora', 
MessageRelativeTimeTimeMINUTE: '{value}m fa', 
messageTimeStampFormat: 'h: mm A',
MessageSending: 'Invio...',
MessageDelivered: 'Consegnato',
PrechatCaptureRegreetingText: 'Ciao\nPer cominciare, vorremmo saperne di più su di te: ',
PrechatCaptureConfirmationText: 'Grazie per questo! In cosa possiamo aiutarti?',
SendButtonText: 'Invia',
SettingsHeaderText: 'Impostazioni',
ShareLocation: 'Condividi posizione',
tapToRetry: 'Messaggio non recapitato. Tocca per riprovare.',
UnsupportedMessageType: 'Tipo di messaggio non supportato.',
UnsupportedActionType: 'Tipo di azione non supportato.',
uploadDocument: 'Carica documento',
uploadInvalidError: 'File non valido', 
uploadPhoto: 'Carica foto',

}}) .then (function ({
// Your code after init is complete
}));
initPromise.then (function (){
// do something
});
//passalo intorno... 
initpromise.then (funzione (){
//do something else
});

Opzioni

È possibile modificare le seguenti impostazioni generali.

Opzioni colore

Puoi dare un aspetto personalizzato al tuo Web Messenger modificando le seguenti impostazioni.

Opzioni di testo

Web Messenger ha molte opzioni di testo tra cui scegliere. Ecco alcuni esempi.

Voci del menu

Le voci di menu possono essere abilitate o disabilitate.

Acquisizione prechat

Questa opzione consente di inviare automaticamente un messaggio all'utente da parte di Web Messenger. È possibile implementare una varietà di messaggi. Lo snippet di codice seguente è lo stesso utilizzato nell'esempio precedente.

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: 'company-size', 
label: 'Dimensione azienda', 
segnaposto: 'Scegli un numero... ' , 
opzioni: [
{
name: '1-10',
label: '1-10 employees'
}, 
{
name: '11-50',
label: '11-50 employees'
}, 
{
name: '51+',
label: '51+ employees'
}
]
}
]
} 

Usa i codici brevi per creare un'esperienza di messaggistica completa

Gli shortcode sono un modo utile per creare una bellissima interfaccia di messaggistica.

Shortcode disponibili

Pulsante Link

Utilizzando più codici brevi del pulsante Link, è possibile inviare all'utente più collegamenti in un messaggio. Un esempio:

% [Collegamento a Facebook] (https://facebook.com)

% [Collegamento a Twitter] (https://twitter.com)

% [Collegamento a LinkedIn] (https://linkedin.com)

pulsante Rispondi

Utilizzando più codici brevi del pulsante Rispondi uno sotto l'altro in un messaggio, puoi offrire all'utente una scelta. Ad esempio:

% [Sales] (Risposta:Sales)

% [Supporto] (Risposta:Supporto)

% [Engineering] (Risposta:Ingegneria)

Pulsante di condivisione posizione

Questo codice ti consente di «invitare» l'utente a condividere la propria posizione con te.

Immagini

Puoi inviare immagini e gif usando questo shortcode.

Implementa Messenger nella tua app mobile

Un ottimo modo per integrare Sparkcentral nei tuoi processi è incorporare il nostro In-App Messenger. Questo è un SDK che abbiamo creato che i nostri clienti possono implementare sulle loro app.

Piattaforme disponibili

• iOS
• Android

Come iniziare

iOS

Per utilizzare il nostro SDK con la tua applicazione iOS, dovrai aggiungerlo al tuo progetto Xcode.

Installazione della dipendenza SDK

La prima cosa da fare è installare CocoaPods. CocoaPods è un responsabile delle dipendenze per progetti Swift e Objective C Cocoa.

Per installarlo, esegui il seguente comando nel terminale.

gemma installa cocoapods

Successivamente, Dell Xcode utilizzerai questa pod/dipendenza. Per farlo, crea un file chiamato «podfile» nella cartella sorgente del progetto. In esso, inserisci quanto segue e salvalo:

progetto «Posizione del tuo file.xcproj» 
target 'YourApp' do 
pod 'Sparkcentral' 
fine

Ora esegui un comando per dire a Xcode di installare il pod in modo da poterlo utilizzare. Nel terminale, accedi alla cartella di origine del tuo progetto. Digitare il seguente comando nel terminale:

installazione pod

Accedi alla cartella sorgente e apri il file Info.plist. In esso, aggiungi i seguenti tasti e valori e salvali.

<key> nspPhotoLibraryDescription< /key> 
<string >${PRODUCT_NAME}leggerà la tua libreria di foto per raccogliere informazioni aggiuntive<> 
</chiave stringa >nspPhotoLibraryAddusageDescription<> 
</stringa chiave> ${PRODUCT_NAME}scriverà nella tua libreria di foto per raccogliere informazioni aggiuntive<> 
</chiave stringa> NSCamerAusageDescription< /key> 
<string>${PRODUCT_NAME} utilizzerà la fotocamera per raccogliere ulteriori <informazione/stringa> 

Usa il framework nel tuo progetto

Obiettivo C

Importa il framework nel codice sorgente.

#import" Sparkcentral/Sparkentral.h."

La prima funzione da eseguire è la seguente. L'ID dell'app dovrebbe essere modificato di conseguenza.

[Sparkcentral InitWithSettings: [Impostazioni SKC con AppID: @" YOUR_APP_ID"] CompletionHandler: ^ (Errore nSer* _Errore nullabile, NSDictionary * _Informazioni utente nullable){
// Your code after init is complete
}];

Veloce

SparkCentral.initWith (impostazioni SKC (AppID:" YOUR_APP_ID")){ (error: Error?, userInfo: [AnyHashable : Any]?) in
// Your code after init is complete
}

Riferimento di classe

Scarica i riferimenti alle classi per iOS e Android: https://www.hootsuite.com/uploads/downloadable-assets/sparkcentral-API-mobile-class-references.6.30.2021.zip.

Android

Collega la dipendenza SDK

Includi il seguente codice nel file Gradle:

repositories {
maven{
url "https://sparkc.bintray.com/rtm"
}
} 
dipendenze{
compile 'com.sparkcentral:core:latest.release'
compile 'com.sparkcentral:ui:latest.release'
}

Utilizzo dell'SDK

Inizializza dalla tua classe Application. Aggiungi le seguenti righe di codice al metodo onCreate nella classe Application:

SparkCentral.init (questo, nuove impostazioni ("YOUR_APP_ID"), nuovo SparkCentralCallback () {
@Override 
public void run (Response response){
// Your code after init is complete
}
});

Assicurati di sostituire YOUR_APP_ID con l'ID app generato quando aggiungi un nuovo canale Web Messenger.

Se non disponi di una classe Application, devi crearne una per assicurarti che Sparkcentral sia sempre inizializzato correttamente.

Riferimento di classe

Scarica i riferimenti alle classi per iOS e Android: https://www.hootsuite.com/uploads/downloadable-assets/sparkcentral-API-mobile-class-references.6.30.2021.zip.