Artículo actualizado: 4 de enero de 2022
Sparkcentral Messenger SDK 1.25.7
Sparkcentral Messenger SDK le permite implementar un mensajero personalizable y con todas las funciones en su sitio web o dentro de su aplicación móvil. Esto permite que cualquier cliente que visite su sitio web o use su aplicación se comunique directamente con su equipo de soporte, eliminando la necesidad de que sus usuarios usen Facebook, WhatsApp o cualquier otra plataforma de mensajería.
Implementación de Messenger en su sitio web
Ultima versión
La última versión de nuestro Web Messenger SDK se puede encontrar aquí:
https://cdn.sparkcentral.com/rtm/web/1.25.7/loader.json
Empezar
Crea un canal
- Ve a Configuración de administrador, expande Canales y horario comercial y selecciona Canales.
- Seleccione Agregar canal y luego seleccione Sparkcentral Messenger .
- En la ventana que aparece, ingrese un nombre para su canal de mensajería. Este nombre debe ser único y específico para la ubicación de su mensajero, como una página web específica o su aplicación móvil. Seleccione Siguiente .Nota: Si la ventana no aparece, asegúrese de que su navegador permita ventanas emergentes de Sparkcentral.
- Guarde la información proporcionada en la ventana que aparece. Esta información solo se mostrará una vez, por lo que es importante registrarla ahora.
Implemente Web Messenger en su sitio web
Se requieren los siguientes pasos para que Web Messenger aparezca en su sitio web.
Al final de su etiqueta <head>, pegue el siguiente código. (Asegúrate de copiarlo todo).
<script>
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 = "string" == 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: función () {o = argumentos; var e = {entonces: función (n) {return i.push ( {type:"t",next:n} ), e}, catch: function (n) {return i.push ( {type:"c",next:n} ), e}}; return e}, en: función () {c.push(arguments)} , render: función () {p=arguments} , destruir: función () {a = argumentos}}, e. __onWebMessengerHostReady__ = función (n) {if (eliminar e. __onWebMessengerHostReady__ , e [t] = n, o) for (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 ("GET", loaderUrl,! 0), u.responseType = "json", u.send ()} (ventana, documento, "Sparkcentral");
</script>
Pegue el siguiente código de llamada de inicio hacia el final de la sección <body> para inicializar Messenger sin ninguna personalización especial. En la tercera línea, inserte su ID de aplicación de canal específico. Este es uno de los fragmentos de texto que se genera al crear un canal.
<script>
// TODO Sparkcentral APP_ID, reemplácelo con el suyo para ejecutar esta demostración.
var appId = 'TU ID DE APLICACIÓN AQUÍ';
// función para inicializar Sparkcentral, esto también registrará todos nuestros eventos que queremos escuchar.
// esta función será llamada cuando el documento termine de cargarse. (evento al final de esta etiqueta de secuencia de comandos)
function initialiseSparkcentral () {
// Muestra un mensaje de que hay mensajes no leídos
Sparkcentral.on ('unreadCount', función (unreadCount) {
// crea un mensaje basado en el recuento de mensajes no leídos
var message = 'Hay' + unreadCount + 'mensajes no leídos.';
si (unreadCount == 1) {
message = 'There is one unread message.';
}
});
// Inicializar Sparkcentral,
// Agrega tus opciones personalizadas aquí
Sparkcentral.init ({
appId: appId,
businessName: 'Su nombre comercial aquí',
customText: {
headerText: 'Your header text here',
inputPlaceholder: 'Your input-placeholder here',
introductionText: 'Your introduction text here',
messageSending: 'Sending...',
messageDelivered: 'Delivered',
sendButtonText: 'Send',
} ,
colores personalizados: {
brandColor: '000000',
conversationColor: '4690DC',
actionColor: '4690DC',
} ,
menuItems: {
imageUpload: 'true',
} ,
}). entonces (función () {
} );
}
// cuando nuestro documento termine de cargarse, inicializaremos nuestra instancia de sparkcentral.
window.addEventListener ('cargar', función () {
initialiseSparkcentral();
} );
</script>Personaliza tus opciones de Web Messenger
Hay varias opciones disponibles para personalizar su Web Messenger. El siguiente es un ejemplo de un Web Messenger totalmente personalizado. Cada opción utilizada se documenta siguiendo el fragmento de código.
Ajusta tu región
El campo de región debe establecerse de acuerdo con su instancia de Sparkcentral. En el siguiente código de inicialización, hay un campo llamado región: 'eu-1'. Esto inicializa la versión europea del mensajero. Para acceder al mensajero de Estados Unidos, deje el campo sin especificar.
| Región | Identificador de región |
|---|---|
| Estados Unidos | Dejar sin especificar |
| unión Europea | eu-1 |
Expandir para códigoSparkcentral.init ({
appId: '<app-id>',
// Dejar sin especificar para la región de EE. UU. (Predeterminado)
región: 'eu-1',
// Para modo autenticado
jwt: 'tu_jwt',
userId: 'user_id',
locale: 'en-US',
colores personalizados: {
brandColor: '65758e',
conversationColor: '65758e',
actionColor: '65758e',
} ,
menuItems: {
imageUpload: true,
fileUpload: true,
shareLocation: true
} ,
FixedIntroPane: falso,
prechatCapture: {
habilitado: verdadero,
los campos: [
{
type: 'email',
name: 'email',
label: 'Email',
placeholder: 'your@email.com'
} ,
{
type: 'text',
name: 'company-website',
label: 'Company website',
placeholder: 'mycompany.com'
} ,
{
tipo: 'seleccionar',
nombre: 'tamaño de la empresa',
etiqueta: 'Tamaño de la empresa',
placeholder: 'Elija un número ...',
opciones: [
{
name: '1-10',
label: '1-10 employees'
} ,
{
name: '11-50',
label: '11-50 employees'
} ,
{
name: '51+',
label: '51+ employees'
}
]
}
]
},
texto personalizado: {
actionPostbackError: 'Se produjo un error al procesar su acción. Inténtalo de nuevo.',
clickToRetry: 'Mensaje no entregado. Haga clic para volver a intentarlo. ',
connectNotificationText: 'Reciba notificaciones dentro de sus otras aplicaciones cuando reciba una respuesta.',
connectNotificationSingleText: 'Recibir una notificación cuando reciba una respuesta',
connectNotificationSingleButtonText: 'Activar notificaciones de <nombre>',
connectNotificationOthersText: 'otros',
conversaciónTimestampHeaderFormat: 'MMMM D AAAA, h: mm A',
fetchHistory: 'Cargar más',
fetchingHistory: 'Recuperando historial ...',
fileTooLargeError: 'Se excedió el límite de tamaño máximo de archivo ( {size} )',
fileTypeError: 'Tipo de archivo no admitido.',
headerText: '¿Cómo podemos ayudar?',
imageClickToReload: 'Haga clic para recargar la imagen.',
imageClickToView: 'Haga clic para ver la {size} imagen.',
imagePreviewNotAvailable: 'Vista previa no disponible.',
inputPlaceholder: 'Escriba un mensaje ...',
IntroductionText: 'Estamos aquí para hablar, ¡así que pregúntanos lo que sea!',
invalidFileError: 'Solo se admiten imágenes. Elija un archivo con una extensión compatible (jpg, jpeg, png, gif o bmp). ',
locationNotSupported: 'Su navegador no es compatible con los servicios de ubicación o se ha desactivado. En su lugar, escriba su ubicación. ',
locationSecurityRestriction: 'Este sitio web no puede acceder a su ubicación. En su lugar, escriba su ubicación. ',
locationSendingFailed: 'No se pudo enviar la ubicación',
locationServicesDenied: 'Este sitio web no puede acceder a su ubicación. Permita el acceso en su configuración o escriba su ubicación en su lugar. ',
messageError: 'Se produjo un error al enviar su mensaje. Inténtalo de nuevo.',
messageIndicatorTitlePlural: '( {count} ) Nuevos mensajes',
messageIndicatorTitleSingular: '( {count} ) Nuevo mensaje',
messageRelativeTimeDay: 'hace {value} d',
messageRelativeTimeHour: 'hace {value} h',
messageRelativeTimeJustNow: 'Justo ahora',
messageRelativeTimeMinute: 'hace {value} m',
messageTimestampFormat: 'h: mm A',
messageSending: 'Enviando ...',
messageDelivered: 'Entregado',
prechatCaptureGreetingText: 'Hola \ nPara empezar, nos gustaría saber un poco más sobre ti:',
prechatCaptureConfirmationText: '¡Gracias por eso! ¿Qué podemos ayudarte?',
sendButtonText: 'Enviar',
settingsHeaderText: 'Configuración',
shareLocation: 'Compartir ubicación',
tapToRetry: 'Mensaje no entregado. Toque para volver a intentarlo. ',
unsupportedMessageType: 'Tipo de mensaje no admitido.',
unsupportedActionType: 'Tipo de acción no admitido.',
uploadDocument: 'Subir documento',
uploadInvalidError: 'Archivo no válido',
uploadPhoto: 'Subir foto',
}
}). entonces (función () {
// Your code after init is complete
} );
initPromise.then (función () {
// do something
} );
// pásalo alrededor ...
initPromise.then (función () {
//do something else
} );Opciones
Se pueden cambiar los siguientes ajustes generales.
| Opción | ¿Opcional? | Valor por defecto | Descripción |
|---|---|---|---|
| appId | No | - | Su ID de aplicación |
| región | sí | - | La región de destino en la que se encuentra la aplicación |
| jwt | sí | - | Token para autenticar su comunicación con el servidor |
| userId | sí | - | ID de usuario |
| código de autenticación | sí | - | Un código de autenticación para vincular a una conversación existente |
| lugar | sí | en-US | Configuración regional utilizada para formatear la fecha con el formato <idioma> - <PAÍS>. Los códigos de idioma se pueden encontrar aquí y los códigos de país aquí. ** Nota 1: ** La parte del país es opcional, y si un país no se reconoce o no se admite, se utilizará el idioma genérico. Si el idioma no es compatible, recurrirá a en-US. Nota 2: esto solo se usa para formatear la fecha y no proporciona traducciones integradas para Web Messenger. |
| soundNotificationEnabled | sí | CIERTO | Habilita la notificación de sonido para nuevos mensajes |
| imageUploadEnabled | sí | CIERTO | Habilita la función de carga de imágenes. |
| incorporado | sí | FALSO | Le dice al widget que se incrustará. (consulte la siguiente sección de Embebidos) |
| displayStyle | sí | botón | Elija cómo aparecerá el mensajero en su sitio web. Debe ser un botón o una pestaña. |
| buttonIconUrl | sí | - | Cuando el estilo de visualización es el botón, tiene la opción de seleccionar su propio icono de botón. La imagen debe tener al menos 200 x 200 píxeles y debe estar en formato JPG, PNG o GIF. |
| buttonWidth | sí | 58px | Cuando displayStyle es el botón, tiene la opción de especificar el ancho del botón. |
| buttonHeight | sí | 58px | Cuando displayStyle es el botón, tiene la opción de especificar la altura del botón. |
| Nombre del Negocio | sí | - | Un nombre comercial personalizado. |
| businessIconUrl | sí | - | Una URL de icono empresarial personalizada. La imagen debe tener al menos 200 x 200 píxeles y debe estar en formato JPG, PNG o GIF. |
| backgroundImageUrl | sí | - | Una URL de imagen de fondo para la conversación. La imagen se colocará en mosaico para adaptarse a la ventana. |
| colores personalizados | sí | Ver la siguiente sección | Colores utilizados en la interfaz de usuario de Web Messenger. |
| texto personalizado | sí | Ver el siguiente ejemplo | Cadenas utilizadas en la interfaz de usuario de Web Messenger. Puede utilizarlos para personalizar el texto o traducirlo. Nota: Algunas cadenas incluyen variables (rodeadas por {}) que deben permanecer en su texto personalizado. |
| elementos de menú | sí | Ver la siguiente sección | |
| prechatCapture | sí | Ver la siguiente sección |
Opciones de color
Puede darle a su Web Messenger un aspecto personalizado editando la siguiente configuración.
| Opción | ¿Opcional? | Valor por defecto | Descripción |
|---|---|---|---|
| brandColor | sí | 65758e | Este color se utilizará en el encabezado del messenger y el botón o pestaña en estado inactivo. Debe ser un color hexadecimal de 3 o 6 caracteres. |
| conversaciónColor | sí | 0099ff | Este color se utilizará para mensajes de clientes, respuestas rápidas y acciones en el pie de página. Debe ser un color hexadecimal de 3 o 6 caracteres. |
| actionColor | sí | 0099ff | Este color se utilizará para llamadas a la acción dentro de sus mensajes. Debe ser un color hexadecimal de 3 o 6 caracteres. |
Opciones de texto
Web Messenger tiene muchas opciones de texto para elegir. Aquí están algunos ejemplos.
| Opción | Valor predeterminado si no se usa |
|---|---|
| actionPostbackError | Se produjo un error al procesar su acción. Inténtalo de nuevo. |
| clickToRetry | Mensaje no entregado. Haga clic para volver a intentarlo. |
| connectNotificationText | Reciba notificaciones dentro de sus otras aplicaciones cuando reciba una respuesta. |
| connectNotificationSingleText | Reciba una notificación cuando reciba una respuesta. |
| connectNotificationSingleButtonText | Activar las notificaciones de <nombre> |
| connectNotificationOthersText | otros |
| conversaciónTimestampHeaderFormat | MMMM D AAAA, h: mm A |
| fetchHistory | Carga más |
| buscandoHistoria | Recuperando historial… |
| texto de cabecera | ¿Cómo podemos ayudar? |
| inputPlaceholder | Escribe un mensaje… |
| introducciónTexto | Estamos aquí para hablar, ¡así que pregúntanos lo que sea! |
| invalidFileError | Solo se admiten imágenes. Elija un archivo con una extensión compatible (jpg, jpeg, png, gif o bmp). |
| locationNotSupported | Su navegador no es compatible con los servicios de ubicación o se ha desactivado. En su lugar, escriba su ubicación. |
| locationSecurityRestriction | Este sitio web no puede acceder a su ubicación. En su lugar, escriba su ubicación. |
| locationSendingFailed | No se pudo enviar la ubicación |
| locationServicesDenied | Este sitio web no puede acceder a su ubicación. Permita el acceso en su configuración o escriba su ubicación en su lugar. |
| messageError | Se produjo un error al enviar su mensaje. Inténtalo de nuevo. |
| messageIndicatorTitlePlural | ( {count} ) Mensajes nuevos |
| messageIndicatorTitleSingular | ( {count} ) Mensaje nuevo |
| messageRelativeTimeDay | Hace {value} |
| messageRelativeTimeHour | Hace {value} |
| messageRelativeTimeJustNow | En este momento |
| messageRelativeTimeMinute | Hace {value} |
| messageTimestampFormat | h: mm A |
| mensajeEnviando | Enviando… |
| mensaje enviado | Entregado |
| sendButtonText | Enviar |
| settingsHeaderText | Ajustes |
| tapToRetry | Mensaje no entregado. Toque para volver a intentarlo. |
| unsupportedMessageType | Tipo de mensaje no admitido. |
| unsupportedActionType | Tipo de acción no admitido. |
| uploadDocument | Cargar documento. |
| uploadInvalidError | Archivo inválido. |
| subir foto | Subir foto. |
Elementos de menú
Los elementos del menú se pueden habilitar o deshabilitar.
| Opción | ¿Opcional? | Valor por defecto | Descripción |
|---|---|---|---|
| imageUpload | sí | CIERTO | Habilita el elemento del menú de carga de imágenes |
| Subir archivo | sí | CIERTO | Habilita el elemento del menú de carga de archivos |
| Comparte ubicacion | sí | CIERTO | Habilita el elemento del menú Compartir ubicación |
Captura previa al chat
Esta opción le permite hacer que Web Messenger publique automáticamente un mensaje para el usuario. Puede implementar una variedad de mensajes. El siguiente fragmento de código es el mismo que se usó en el ejemplo anterior.
prechatCapture: {
habilitado: verdadero,
los campos: [
{
type: 'email',
name: 'email',
label: 'Email',
placeholder: 'your@email.com'
} ,
{
type: 'text',
name: 'company-website',
label: 'Company website',
placeholder: 'mycompany.com'
} ,
{
tipo: 'seleccionar',
nombre: 'tamaño de la empresa',
etiqueta: 'Tamaño de la empresa',
placeholder: 'Elija un número ...',
opciones: [
{
name: '1-10',
label: '1-10 employees'
} ,
{
name: '11-50',
label: '11-50 employees'
} ,
{
name: '51+',
label: '51+ employees'
}
]
}
]
}
| Campo | Información |
|---|---|
| Correo electrónico | nombre: 'Nombre del campo', etiqueta: 'Nombre de etiqueta', marcador de posición: 'Texto de marcador de posición aquí' ” |
| Texto | nombre: 'Nombre del campo', etiqueta: 'Nombre de etiqueta', marcador de posición: 'Texto de marcador de posición aquí' ” |
| Seleccione | Este es el formato en el que se agregan varias opciones: opciones: [ {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’} ] |
Utilice códigos cortos para crear una rica experiencia de mensajería
Los códigos cortos son una forma útil de crear una hermosa interfaz de mensajería.
Códigos cortos disponibles
| Elemento | Sintaxis | Ejemplo |
|---|---|---|
| Botón de enlace | % [] () | % [Etiqueta del botón] (http://anyurl.com) |
| Botón de respuesta | %[](respuesta:) | % [Etiqueta del botón] (respuesta: PAYLOAD) |
| Botón de solicitud de ubicación | %[](localización) | % [Etiqueta del botón] (ubicación) |
| Imagen | ! [] () | ! [] (http: //url-of.the/image.jpg) |
Botón de enlace
Al utilizar varios códigos abreviados de botones de enlace, puede enviar al usuario varios enlaces en un mensaje. Un ejemplo:
% [Enlace a Facebook] (https://facebook.com)
% [Enlace a Twitter] (https://twitter.com)
% [Enlace a LinkedIn] (https://linkedin.com)
Botón de respuesta
Al utilizar varios códigos de acceso del botón Responder uno debajo del otro en un mensaje, puede ofrecer al usuario una opción. Por ejemplo:
% [Ventas] (respuesta: Ventas)
% [Soporte] (respuesta: Soporte)
% [Ingeniería] (respuesta: Ingeniería)
Botón para compartir ubicación
Este código le permite "invitar" al usuario a compartir su ubicación con usted.
Imagenes
Puede enviar imágenes y gifs usando este código corto.
Implemente Messenger en su aplicación móvil
Una excelente manera de integrar Sparkcentral en sus procesos es incorporando nuestro In-App Messenger. Este es un SDK que creamos que nuestros clientes pueden implementar en sus aplicaciones.
Plataformas disponibles
- iOS
- Androide
Empezando
iOS
Para usar nuestro SDK con su aplicación iOS, deberá agregarlo a su proyecto Xcode.
Instalación de la dependencia del SDK
Lo primero que debe hacer es instalar CocoaPods. CocoaPods es un administrador de dependencias para proyectos Swift y Objective C Cocoa.
Para instalarlo, ejecute el siguiente comando en su terminal.
gema instalar cocoapods
A continuación, ell Xcode utilizará este pod / dependencia. Para hacerlo, cree un archivo llamado "podfile" en la carpeta de origen de su proyecto. En él, ingrese lo siguiente y guárdelo:
proyecto 'Ubicación de su archivo .xcproj'
objetivo de 'YourApp'
vaina 'Sparkcentral'
finAhora ejecute un comando para decirle a Xcode que instale el pod para que pueda usarlo. En su terminal, navegue hasta la carpeta de origen de su proyecto. Escriba el siguiente comando en la terminal:
instalación de pod
Navegue a su carpeta de origen y abra el archivo Info.plist. En él, agregue las siguientes claves y valores y guárdelo.
<key> NSPhotoLibraryUsageDescription </key>
<string> ${PRODUCT_NAME} leerá su biblioteca de fotos para recopilar información adicional </string>
<key> NSPhotoLibraryAddUsageDescription </key>
<string> ${PRODUCT_NAME} escribirá en su biblioteca de fotos para recopilar información adicional </string>
<key> NSCameraUsageDescription </key>
<string> ${PRODUCT_NAME} usará su cámara para recopilar información adicional </string>
Utilice el marco en su proyecto
C objetivo
Importe el marco en su código fuente.
#importar "Sparkcentral / Sparkentral.h"
La primera función a ejecutar es la siguiente. Su ID de aplicación debe cambiarse en consecuencia.
[Sparkcentral initWithSettings: [SKCSettings settingsWithAppId: @ "YOUR_APP_ID"] CompletionHandler: ^ (NSError * _Nullable error, NSDictionary * _Nullable userInfo) {
// Your code after init is complete
} ];Rápido
Sparkcentral.initWith (SKCSettings (appId: "YOUR_APP_ID")) { (error: Error?, userInfo: [AnyHashable : Any]?) in
// Your code after init is complete
}Referencia de clase
Descargue las referencias de clase para iOS y Android: https://www.hootsuite.com/uploads/downloadable-assets/sparkcentral-API-mobile-class-references.6.30.2021.zip .
Androide
Vincular la dependencia del SDK
Incluya el siguiente código en su archivo Gradle:
repositorios {
maven {
url "https://sparkc.bintray.com/rtm"
}
}
dependencias {
compile 'com.sparkcentral:core:latest.release'
compile 'com.sparkcentral:ui:latest.release'
}Usando el SDK
Inicialice desde su clase de aplicación. Agregue las siguientes líneas de código a su método onCreate en su clase de aplicación:
Sparkcentral.init (esto, nueva Configuración ("YOUR_APP_ID"), nueva SparkcentralCallback () {
@Anular
ejecución de vacío público (respuesta de respuesta) {
// Your code after init is complete
}
});Asegúrese de reemplazar YOUR_APP_ID con el ID de la aplicación que genera al agregar un nuevo canal de Web Messenger.
Si no tiene una clase de aplicación, debe crear una para asegurarse de que Sparkcentral siempre se inicialice correctamente.
Referencia de clase
Descargue las referencias de clase para iOS y Android: https://www.hootsuite.com/uploads/downloadable-assets/sparkcentral-API-mobile-class-references.6.30.2021.zip .
¿No encuentras lo que buscas? Estamos aquí para ayudar