Vai al contenuto principale

  Articolo aggiornato: 4 gennaio 2022

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.

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

Tabella degli identificatori di regione
Regione Identificatore regione
Stati Uniti Lasciare non specificato
Unione europea eu-1

Opzioni

È possibile modificare le seguenti impostazioni generali.

Tabella delle opzioni generali
Opzione Opzionale? Valore predefinito Descrizione
AppID No ID della tua app
regione La regione di destinazione in cui si trova l'app
jwt Token per autenticare la comunicazione con il server
ID utente ID utente
Codice autore Un codice di autenticazione per il collegamento a una conversazione esistente
locale it-US Impostazioni internazionali utilizzate per la formattazione della data utilizzando il formato <lingua>-<PAESE> I codici lingua sono disponibili qui e i codici paese qui. **Nota 1: ** La parte paese è facoltativa e, se un paese non è riconosciuto o supportato, verrà utilizzata la lingua generica. Se la lingua non è supportata, verrà eseguito il fallback su en-US. Nota 2: viene utilizzato solo per la formattazione della data e non fornisce traduzioni integrate per Web Messenger.
Notifica audio abilitata true Attiva la notifica audio per i nuovi messaggi
Caricamento immagine abilitato true Attiva la funzione di caricamento delle immagini.
inserito FALSO Indica al widget che verrà incorporato. (vedere la seguente sezione Embedded)
Stile display pulsante Scegli come apparirà il messenger sul tuo sito web. Deve essere un pulsante o una linguetta.
URL icona pulsante Quando il pulsante DisplayStyle è, è possibile selezionare la propria icona del pulsante. L'immagine deve essere di almeno 200 x 200 pixel e deve essere in formato JPG, PNG o GIF.
Larghezza pulsante 58px Quando DisplayStyle è pulsante, è possibile specificare la larghezza del pulsante.
Altezza pulsante 58px Quando DisplayStyle è pulsante, è possibile specificare l'altezza del pulsante.
Nome azienda Un nome aziendale personalizzato.
URL dell'icona aziendale Un URL dell'icona aziendale personalizzata. L'immagine deve avere una dimensione di almeno 200 x 200 pixel e un formato JPG, PNG o GIF.
L'immagine di sfondo URL Un URL dell'immagine di sfondo per la conversazione. L'immagine viene affiancata per adattarla alla finestra.
Colori personalizzati Vedere la sezione seguente Colori utilizzati nell'interfaccia utente di Web Messenger.
Testo personalizzato Vedere il seguente esempio Stringhe utilizzate nell'interfaccia utente di Web Messenger. È possibile utilizzarli per personalizzare il testo o tradurlo. Nota: alcune stringhe includono variabili (circondate da {}) che devono rimanere nel testo personalizzato.
Elementi del menu Vedere la sezione seguente  
Acquisizione prechat Vedere la sezione seguente  

Opzioni colore

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

Tabella delle opzioni di colore
Opzione Opzionale? Valore predefinito Descrizione
Colore del marchio 65758e Questo colore verrà utilizzato nell'intestazione messenger e il pulsante o la scheda in stato di inattività. Deve essere un colore esadecimale a 3 o 6 caratteri.
Colore della conversazione 0099 ff Questo colore verrà utilizzato per messaggi dei clienti, risposte rapide e azioni nel piè di pagina. Deve essere un colore esadecimale a 3 o 6 caratteri.
Colore azione 0099 ff Questo colore verrà utilizzato per le chiamate all'interno dei messaggi. Deve essere un colore esadecimale a 3 o 6 caratteri.

Opzioni di testo

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

Opzioni tabella di testo
Opzione Valore predefinito se non utilizzato
Errore di postback di azione Si è verificato un errore durante l'elaborazione dell'azione. Per favore riprova.
Fai clic per riscattare Messaggio non recapitato. Fai clic per riprovare.
Testo della notifica di connessione Ricevi una notifica all'interno delle altre app quando ricevi una risposta.
Connetti notifiche Single Text Ricevi una notifica quando ricevi una risposta.
Testo a pulsante singolo per le notifiche di connessione Attiva le> notifiche< del nome
Connetti Notifiche Altro Testo altri
Formato intestazione timestamp conversazione MMMM D AAAA, h:mm A
Fetch Cronologia Carica altro
Storia di recupero Recupero della cronologia...
HeaderText Come possiamo aiutarti?
Segnaposto di ingresso Digita un messaggio...
Testo introduttivo Siamo qui per parlare, quindi chiedici qualcosa!
Errore file non valido Sono supportate solo le immagini. Scegli un file con estensione supportata (jpg, jpeg, png, gif o bmp).
Posizione non supportata Il browser non supporta i servizi di localizzazione o è stato disabilitato. Digita invece la tua posizione.
Limitazione della sicurezza della posizione Questo sito Web non può accedere alla tua posizione. Digita invece la tua posizione.
Invio delle posizioni non riuscito Impossibile inviare la posizione
Servizi di localizzazione negati Questo sito Web non può accedere alla tua posizione. Consenti l'accesso alle impostazioni o digita invece la tua posizione.
Errore di messaggio Si è verificato un errore durante l'invio del messaggio. Riprova.
Messaggio Indicatore TitlePlural ({count}) Nuovi messaggi
Indicatore del messaggio Titoli Singular ({count}) Nuovo messaggio
Messaggio Giorno dell'ora relativente {value}d fa
Ora temporale relativa del messaggio {value}h fa
Messaggio Tempo relativo appena ora Proprio ora
Messaggio relative/minuto {value}m fa
Formato timestamp messaggio h:mm A
MessaggiInvio Invio...
Messaggio consegnato Consegnato
Invia testo pulsante Invia
Impostazione del testo dell'intestazione Impostazioni
Tocca per provare Messaggio non recapitato. Tocca per riprovare.
Tipo di messaggio non supportato Tipo di messaggio non supportato.
Tipo di azione non supportato Tipo di azione non supportato.
Carica documento Carica il documento.
Carica errore non valido File non valido.
Carica foto Carica foto.

Voci del menu

Le voci di menu possono essere abilitate o disabilitate.

Opzioni della tabella dei menu
Opzione Opzionale? Valore predefinito Descrizione
Caricamento immagini true Attiva la voce del menu di caricamento delle immagini
Caricamento file true Attiva la voce del menu di caricamento dei file
Share Posizione true Attiva la voce di menu della posizione di condivisione

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.

Copia
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'
}
]
}
]
}
Tabella delle opzioni di prechat
Campo Informazioni
E-mail name: 'Nome del campo', etichetta: 'Nome etichetta', segnaposto: 'Testo segnaposto qui'»
Testo name: 'Nome del campo', etichetta: 'Nome etichetta', segnaposto: 'Testo segnaposto qui'»
Seleziona Questo è il formato in cui vengono aggiunte più opzioni: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’}]

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

Tabella dei codici brevi
Elemento Sintassi Esempio
Pulsante Link % [] () % [Etichetta pulsante] (http://anyurl.com)
pulsante Rispondi % [] (risposta:) % [Etichetta pulsante] (Risposta:Payload)
Pulsante richiesta posizione % [] (posizione) % [Etichetta pulsante] (posizione)
Immagine ! [] () ! [] (http://url-of.the/image.jpg)

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)

Un messaggio di esempio con tre collegamenti a pulsanti

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)

Un messaggio di esempio con tre pulsanti di risposta

Pulsante di condivisione posizione

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

Un messaggio di esempio con un pulsante di lettura, Condividi la tua posizione con noi

Immagini

Puoi inviare immagini e gif usando questo shortcode.

Un messaggio di esempio con una GIF

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:

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

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

Copia
[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

Copia
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:

Copia
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:

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

 

Non riesci a trovare quello che stai cercando? Siamo qui per aiutarti