Vai al contenuto principale

Articolo aggiornato: 18 febbraio 2022

SDK Sparkcentral Messenger

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.

Crea il tuo 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 visualizzata, inserisci un nome per il tuo canale di messaggistica. Il 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.
    Nota: queste informazioni vengono visualizzate solo una volta, quindi è importante registrarle ora.

Implementa Messenger sul tuo sito web

Versione più recente

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

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

La versione precedente può essere trovata qui: Sparkcentral Messenger SDK 1.25.7

Per iniziare

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

  1. Incollare il codice seguente alla fine della> sezione< testa. (Assicurati di copiare tutto!)

    <sceneggiatura>

    ! function (s, c, o, i) {var a, p, u, d= [], f= []; funzione e () {var n=" 2.1.0"; prova {if (! i) lancia nuovo Errore (n); var e, t=" https://cdn.sparkcentral.com/rtm/web/2.1.0/", r=" sparkcentral"; if ((e= "string" ==tipo di this.response? json.parse (this.response) :this.response) .url) {var s=c.getElementsByTagName ("script") [0], o=c.createElement ("script"); o.async=! 0; var a=i.match (/([0-9] +)\.? ([0-9] +)? \.? ([0-9] +)? /), p=a&& a [1]; if (&&a [3]) o.src=t+r+". "+i+" .min.js"; else{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=arguments; 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}, destroy :function () {u=arguments}}, s.__onWebMessengerHostReady__ =function (e) {if (delete s.__onWebMessengerHostReady__, s [o] =e, a) per (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), u&& e. destroy .apply (e, u); for (t=0; t< d.length; t++) e.on.apply (e, d [t])}; var n=new 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 ()} (finestra, documento," Sparkcentral"," 2 ");

    </script>

  2. Incolla il seguente codice di chiamata init verso la fine della sezione <body>. Questo inizializza un Web Messenger di base senza alcuna personalizzazione speciale. (Le personalizzazioni sono descritte nella sezione successiva.)
  • Nella terza riga, inserisci il tuo ID di integrazione del canale specifico. Questa è una delle parti di testo generate durante la creazione del canale.
  • Il campo della regione deve essere impostato in base all'istanza di Sparkcentral. Sparkcentral è disponibile nelle seguenti regioni:
    Identificatori di regione
    Regione Identificatore regione
    Stati Uniti Lasciare non specificato
    Unione europea eu-1

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.

Opzioni

È possibile modificare le seguenti impostazioni generali.

Opzioni, valori predefiniti e definizioni
Opzione Opzionale? Valore predefinito Descrizione
ID integrazione No - Il tuo ID dell'app/integrazione.
regione - La regione di destinazione in cui si trova l'app.
jwt - Il token per autenticare la comunicazione con il server.
ID utente - L'ID dell'utente.
Codice autore - Un codice di autenticazione per il collegamento a una conversazione esistente.
locale it-US

Le impostazioni locali utilizzate per la formattazione della data utilizzando il formato `-`. Vedi i codici lingua e i codici dei paesi.

Nota: la parte paese è facoltativa e se un paese non è riconosciuto o non supportato, l'app torna alla lingua generica. Se la lingua non è supportata, l'app torna a "en-US".

Nota: viene utilizzato solo per la formattazione della data e non fornisce traduzioni integrate per Web Messenger.

Notifica audio abilitata true Attiva la notifica sonora per i nuovi messaggi.
Caricamento immagine abilitato true Attiva la funzione di caricamento delle immagini.
inserito FALSO Indica al widget che è incorporato (vedi la sezione successiva Embedded).
Stile display pulsante Come appare il messenger sul tuo sito web. Deve essere un pulsante o una linguetta.
URL icona pulsante - Quando il pulsante DisplayStyle è presente, è possibile selezionare la propria icona del pulsante. L'immagine deve essere di almeno 200 x 200 pixel in formato JPG, PNG o GIF.
Larghezza pulsante 58px Quando il DisplayStyle è" pulsante", è possibile specificare la larghezza del pulsante.
Altezza pulsante 58px Quando il pulsante DisplayStyle è presente, è possibile specificare l'altezza del pulsante.
Nome azienda - Un nome aziendale personalizzato.
URL dell'icona aziendale - Un URL personalizzato per l'icona aziendale. L'immagine deve essere di almeno 200 x 200 pixel e deve essere in formato JPG, PNG o GIF.
L'immagine di sfondo URL - URL dell'immagine di sfondo per la conversazione. L'immagine è affiancata per adattarsi 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. Puoi usarle per personalizzare il testo o per tradurlo.

Nota: alcune stringhe includono variabili (comprese tra {}) 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.

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

Opzioni di testo

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

Valori predefiniti delle opzioni 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.

Opzioni menu

Le voci di menu possono essere abilitate o disabilitate.

Valori predefiniti e descrizioni delle opzioni di 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

Opzione di 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'
}
]
}
]
}
Nomi e informazioni sui campi
Campo Informazioni
E-mail

name: 'Nome del campo',
label: 'Nome dell'etichetta',
segnaposto: 'Testo segnaposto qui'»

Testo name: 'Nome del campo',
label: 'Nome dell'etichetta',
segnaposto: 'Testo segnaposto qui'»
Seleziona

Questo è il formato in cui vengono aggiunte più opzioni:

opzioni: [ { 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’
}
]

Opzione modalità incorporata

Hai la possibilità di configurare Web Messenger in modalità incorporata. Questo ti consente di scegliere dove vuoi che il widget sia visibile.

L'esempio seguente illustra cosa è necessario per configurarlo.

Si noti che affinché la modalità incorporata funzioni, è necessario impostare il parametro di embedded su true e chiamare manualmente la funzione SparkCentral.render ().

Copia
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

Questo esempio incorpora il messenger Sparkcentral all'interno di un elemento DOM con l'id «chat-container». Se apri la pagina Web, noterai che non mostra più un pulsante in basso a destra, ma è visibile nell'elemento contenitore.

Usa gli attributi di contatto per salvare dati di messaggistica specifici

È possibile memorizzare informazioni sulla pagina Web e sull'utente utilizzando la funzione Attributi di contatto. Per abilitare questa operazione, procedere come segue:

  1. Nella scheda Impostazioni, espandere Agent Workspace e selezionare Attributi di contatto.
  2. Trova uno degli attributi di contatto predefiniti nell'elenco e attivalo su Abilitato.

Ora, quando un client ti contatta tramite il plugin Sparkcentral Messenger, questi dati specifici verranno memorizzati all'interno di un Attributo di contatto.

Attributi di contatto disponibili per il plugin Web Messenger
  • Lingua browser
  • Nome
  • Cognome
  • Dominio pagina
  • Titolo pagina
  • URL pagina
  • ID utente

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

Elementi di codice breve e sintassi
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 pulsanti di collegamento

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

Per iniziare

iOS

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

Installa la dipendenza SDK

  1. Installa CocoaPods.

    CocoaPods è un responsabile delle dipendenze per progetti Swift e Objective C Cocoa.

  2. Esegui il seguente comando nel tuo terminale:

    gemma installa cocoapods

  3. Dite a Xcode che stai usando questo pod/dipendenza.

    A tale scopo, crea un file chiamato podfile nella cartella di origine del progetto. In esso, inserisci quanto segue e salvalo:

    Copia
    progetto «Posizione del tuo file.xcproj» 
    target 'YourApp' do
    pod 'Sparkcentral'
    fine
  4. 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

  5. Vai alla cartella sorgente e apri 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."

Obiettivo C

La prima funzione da eseguire è la seguente. Il tuo ID di integrazione dovrebbe essere modificato di conseguenza.

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

Veloce

Copia
SparkCentral.initWith (Impostazioni SKC (IntegrationID:" YOUR_INTEGRATION_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 usando Gradle. Puoi trovare la dipendenza Sparkcentral SDK su mavencentral (https://repo.maven.apache.org/maven2).

Per ulteriori informazioni su Gradle e sulla dichiarazione di repository disponibili al pubblico, vedi https://docs.gradle.org/current/userguide/declaring_repositories.html#sec:declaring_public_repository

Usa l'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_INTEGRATION_ID"), nuovo SparkCentralCallback () {
@Override
public void run (Response response){
// Your code after init is complete
}
});

Assicurati di sostituire YOUR_INTEGRATION_ID con l'ID di integrazione 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