Saltar al contenido principal

  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

  1. Ve a Configuración de administrador, expande Canales y horario comercial y selecciona Canales.
  2. Seleccione Agregar canal y luego seleccione Sparkcentral Messenger .
  3. 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.
  4. 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.

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

Tabla de identificadores de región
Región Identificador de región
Estados Unidos Dejar sin especificar
unión Europea eu-1

Opciones

Se pueden cambiar los siguientes ajustes generales.

Tabla de opciones generales
Opción ¿Opcional? Valor por defecto Descripción
appId No - Su ID de aplicación
región - La región de destino en la que se encuentra la aplicación
jwt - Token para autenticar su comunicación con el servidor
userId - ID de usuario
código de autenticación - Un código de autenticación para vincular a una conversación existente
lugar 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 CIERTO Habilita la notificación de sonido para nuevos mensajes
imageUploadEnabled CIERTO Habilita la función de carga de imágenes.
incorporado FALSO Le dice al widget que se incrustará. (consulte la siguiente sección de Embebidos)
displayStyle botón Elija cómo aparecerá el mensajero en su sitio web. Debe ser un botón o una pestaña.
buttonIconUrl - 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 58px Cuando displayStyle es el botón, tiene la opción de especificar el ancho del botón.
buttonHeight 58px Cuando displayStyle es el botón, tiene la opción de especificar la altura del botón.
Nombre del Negocio - Un nombre comercial personalizado.
businessIconUrl - 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 - Una URL de imagen de fondo para la conversación. La imagen se colocará en mosaico para adaptarse a la ventana.
colores personalizados Ver la siguiente sección Colores utilizados en la interfaz de usuario de Web Messenger.
texto personalizado 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ú Ver la siguiente sección  
prechatCapture Ver la siguiente sección  

Opciones de color

Puede darle a su Web Messenger un aspecto personalizado editando la siguiente configuración.

Tabla de opciones de color
Opción ¿Opcional? Valor por defecto Descripción
brandColor 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 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 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.

Tabla de opciones de texto
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.

Tabla de opciones de menú
Opción ¿Opcional? Valor por defecto Descripción
imageUpload CIERTO Habilita el elemento del menú de carga de imágenes
Subir archivo CIERTO Habilita el elemento del menú de carga de archivos
Comparte ubicacion 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.

Dupdo
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'
}
]
}
]
}
Tabla de opciones de pre-chat
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

Tabla de códigos cortos
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)

Un mensaje de muestra con enlaces de tres botones

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)

Un mensaje de muestra con tres botones de respuesta

Botón para compartir ubicación

Este código le permite "invitar" al usuario a compartir su ubicación con usted.

Un mensaje de muestra con una lectura de botón, Comparta su ubicación con nosotros

Imagenes

Puede enviar imágenes y gifs usando este código corto.

Un mensaje de muestra con un GIF

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:

Dupdo
proyecto 'Ubicación de su archivo .xcproj'
objetivo de 'YourApp'
vaina 'Sparkcentral'
fin

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

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

Dupdo
[Sparkcentral initWithSettings: [SKCSettings settingsWithAppId: @ "YOUR_APP_ID"] CompletionHandler: ^ (NSError * _Nullable error, NSDictionary * _Nullable userInfo) {
// Your code after init is complete
} ];

Rápido

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

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

Dupdo
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