Artículo actualizado: 18 de febrero de 2022
SDK de Sparkcentral Messenger
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.
Crea tu 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.Nota: esta información solo se muestra una vez, por lo que es importante registrarla ahora.
Implemente 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/2.1.0/loader.json
La versión anterior se puede encontrar aquí: Sparkcentral Messenger SDK 1.25.7
Empezar
Se requieren los siguientes pasos para que Messenger aparezca en su sitio web.
- Pegue el siguiente código al final de la sección <head>. (¡Asegúrate de copiarlo todo!)
<script>
! function (s, c, o, i) {var a, p, u, d = [], f = []; function e () {var n = "2.1.0"; try {if ( ! i) arrojar un nuevo Error (n); var e, t = "https://cdn.sparkcentral.com/rtm/web/2.1.0/", r = "sparkcentral"; if ((e = "cadena" == typeof 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 && 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: función () {a = argumentos; var n = {luego: función (e) {return f.push ( {type:"t",next:e} ), n}, catch: function (e) {return f.push ( {type:"c",next:e} ), n}}; return n}, en: función () {d.push(arguments)} , render: función () {p=arguments} , destruir: función () {u = argumentos}}, s. __onWebMessengerHostReady__ = función (e) {if (eliminar s. __onWebMessengerHostReady__ , s [o] = e, a) para (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 ("cargar", e), n.open ("GET", "https://cdn.sparkcentral.com/rtm/web /2.1.0/loader.json",!0),n.responseType="json",n.send()}(window,document,"Sparkcentral","2 ");
</script>
- Pegue el siguiente código de llamada de inicio al final de la sección <body>. Esto inicializa un Web Messenger básico sin personalizaciones especiales. (Las personalizaciones se describen en la siguiente sección).
- En la tercera línea, inserte su ID de integración de canal específico. Este es uno de los fragmentos de texto que se genera al crear un canal.
- El campo de región debe establecerse de acuerdo con su instancia de Sparkcentral. Sparkcentral está disponible en las siguientes regiones:
Identificadores de región Región Identificador de región Estados Unidos Dejar sin especificar unión Europea eu-1

<script>
var initPromise = Sparkcentral.init ({
integrationId: 'ID de integración aquí',
// Dejar sin especificar para la región de EE. UU. (Predeterminado)
región: 'eu-1',
// Esto asegura que el cliente no pueda crear múltiples conversaciones.
canUserCreateMoreConversations: false,
canUserSeeConversationList: falso,
colores personalizados: {
brandColor: '65758e',
conversationColor: '65758e',
actionColor: '65758e',
} ,
menuItems: {
imageUpload: true,
fileUpload: true,
shareLocation: true
} ,
FixedHeader: falso,
texto personalizado: {
actionPaymentCompleted: 'Pago completado',
actionPaymentError: 'Se produjo un error al procesar la tarjeta. <br> Vuelva a intentarlo o utilice una tarjeta diferente. ',
actionPostbackError: 'Se produjo un error al procesar su acción. Inténtalo de nuevo.',
clickToRetry: 'Mensaje no entregado. Haga clic para volver a intentarlo. ',
clickToRetryForm: 'Formulario no enviado. Haga clic en cualquier parte del formulario para volver a intentarlo. ',
connectNotificationText: 'Sincroniza tu conversación y continúa enviándonos mensajes a través de tu aplicación favorita.',
connectNotificationSingleText: 'Recibir una notificación cuando reciba una respuesta',
conversionListHeaderText: 'Mis conversaciones',
conversionListPreviewAnonymousText: 'Alguien',
conversionListPreviewCarouselText: ' {user} envió un mensaje',
conversionListPreviewFileText: ' {user} envió un archivo',
conversionListPreviewFormText: ' {user} envió un formulario',
conversionListPreviewFormResponseText: ' {user} llenó un formulario',
conversionListPreviewImageText: ' {user} envió una imagen',
conversionListPreviewLocationRequestText: ' {user} envió una solicitud de ubicación',
conversionListPreviewUserText: 'Usted',
conversionListRelativeTimeJustNow: 'Justo ahora',
conversionListRelativeTimeMinute: 'hace 1 minuto',
conversionListRelativeTimeMinutes: 'hace {value} minutos',
conversionListRelativeTimeHour: 'hace 1 hora',
conversionListRelativeTimeHours: 'hace {value} horas',
conversionListRelativeTimeYesterday: 'Ayer',
conversionListTimestampFormat: 'MM / DD / YY',
conversaciónTimestampHeaderFormat: 'MMMM D AAAA, h: mm A',
couldNotConnect: 'Sin conexión. No recibirás mensajes. ',
couldNotConnectRetry: 'Reconectando ...',
couldNotConnectRetrySuccess: "¡Vuelve a estar en línea!",
couldNotLoadConversations: 'No se pudieron cargar las conversaciones.',
emailChangeAddress: 'Cambiar mi correo electrónico',
emailDescription: 'Para ser notificado por correo electrónico cuando reciba una respuesta, ingrese su dirección de correo electrónico.',
emailFieldLabel: 'Correo electrónico',
emailFieldPlaceholder: 'Su dirección de correo electrónico',
emailFormButton: 'Enviar',
emailLinkingErrorMessage: 'Envíe una dirección de correo electrónico válida.',
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.',
formErrorInvalidEmail: 'El correo electrónico no es válido',
formErrorNoLongerThan: 'No debe contener más de ( {characters} ) caracteres',
formErrorNoShorterThan: 'Debe contener al menos ( {characters} ) caracteres',
formErrorUnknown: 'Esto no parece correcto',
formFieldSelectPlaceholderFallback: 'Elija uno ...',
frontendEmailChannelDescription: 'Para hablar con nosotros por correo electrónico, simplemente envíe un mensaje a nuestra dirección de correo electrónico y le responderemos en breve:',
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 ...',
inputPlaceholderBlocked: 'Complete el formulario anterior ...',
introAppText: 'Envíanos un mensaje a continuación o desde tu aplicación favorita.',
lineChannelDescription: 'Para hablar con nosotros usando LINE, escanee este código QR usando la aplicación LINE y envíenos un mensaje.',
linkChannelPageHeader: 'Sincroniza tu conversación',
linkError: 'Se produjo un error al intentar generar un enlace para este canal. Inténtalo de nuevo.',
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. ',
messageIndicatorTitlePlural: '( {count} ) Nuevos mensajes',
messageIndicatorTitleSingular: '( {count} ) Nuevo mensaje',
messageRelativeTimeDay: 'hace {value} d',
messageRelativeTimeHour: 'hace {value} h',
messageRelativeTimeJustNow: 'Justo ahora',
messageRelativeTimeMinute: ' {value} m',
messageTimestampFormat: 'h: mm A',
messageDelivered: 'Entregado',
messageSeen: 'Visto',
messageSending: 'Enviando ...',
messengerChannelDescription: 'Conecte su cuenta de Facebook Messenger para recibir una notificación cuando reciba una respuesta y continúe la conversación en Facebook Messenger.',
newConversationButtonText: 'Nueva conversación',
notificationSettingsChannelsDescription: 'Sincroniza esta conversación conectándote a tu aplicación de mensajería favorita para continuar la conversación a tu manera.',
notificationSettingsChannelsTitle: 'Otros canales',
notificationSettingsConnected: 'Conectado',
notificationSettingsConnectedAs: 'Conectado como {username} ',
prechatCaptureGreetingText: 'Hola \ nPara empezar, nos gustaría saber un poco más sobre ti:',
prechatCaptureNameLabel: 'Su nombre',
prechatCaptureNamePlaceholder: 'Escriba su nombre ...',
prechatCaptureEmailLabel: 'Correo electrónico',
prechatCaptureEmailPlaceholder: 'nombre@company.com',
prechatCaptureConfirmationText: '¡Gracias por eso! ¿Qué podemos ayudarte?',
prechatCaptureMailgunLinkingConfirmation: 'Se le notificará aquí y por correo electrónico a {email} una vez que respondamos.',
sendButtonText: 'Enviar',
settingsHeaderText: 'Configuración',
shareLocation: 'Ubicación',
smsBadRequestError: 'No pudimos comunicarnos con este número. Inténtelo de nuevo o use uno diferente. ',
smsCancel: 'Cancelar',
smsChangeNumber: 'Cambiar mi número',
smsChannelDescription: 'Conecte su número de SMS para recibir una notificación cuando reciba una respuesta y continúe la conversación por SMS.',
smsChannelPendingDescription: 'Consulta tus mensajes en {number} para confirmar tu número de teléfono.',
smsContinue: 'Enviar',
smsInvalidNumberError: 'Envíe un número de teléfono válido.',
smsLinkCancelled: 'Se canceló el {appUserNumber}
smsLinkPending: 'Pendiente',
smsPingChannelError: 'Hubo un error al enviar un mensaje a su número.',
smsSendText: 'Envíame un mensaje de texto',
smsStartTexting: 'Empezar a enviar mensajes de texto',
smsTooManyRequestsError: 'Recientemente se solicitó una conexión para ese número. Vuelva a intentarlo en {minutes} minutos. ',
smsTooManyRequestsOneMinuteError: 'Recientemente se solicitó una conexión para ese número. Vuelva a intentarlo en 1 minuto. ',
smsUnhandledError: 'Algo salió mal. Inténtalo de nuevo.',
syncConversation: 'Sincronizar conversación',
tapToRetry: 'Mensaje no entregado. Toque para volver a intentarlo. ',
tapToRetryForm: 'Formulario no enviado. Toque en cualquier parte del formulario para volver a intentarlo. ',
telegramChannelDescription: 'Conecte su cuenta de Telegram para recibir una notificación cuando reciba una respuesta y continúe la conversación en Telegram',
uploadDocument: 'Archivo',
uploadInvalidError: 'Archivo no válido',
uploadPhoto: 'Imagen',
uploadVirusError: 'Se detectó un virus en su archivo y ha sido rechazado',
unsupportedMessageType: 'Tipo de mensaje no admitido.',
unsupportedActionType: 'Tipo de acción no admitido.',
viberChannelDescription: 'Conecte su cuenta de Viber para recibir una notificación cuando reciba una respuesta y continúe la conversación en Viber. Para comenzar, escanee el código QR con la aplicación Viber. ',
viberChannelDescriptionMobile: 'Conecte su cuenta de Viber para recibir una notificación cuando reciba una respuesta y continúe la conversación en Viber. Para comenzar, instale la aplicación Viber y toque Conectar. ',
viberQRCodeError: 'Se produjo un error al obtener su código QR de Viber. Inténtalo de nuevo.',
wechatChannelDescription: 'Conecte su cuenta de WeChat para recibir una notificación cuando reciba una respuesta y continúe la conversación en WeChat. Para comenzar, escanee este código QR con la aplicación WeChat. ',
wechatChannelDescriptionMobile: 'Conecte su cuenta de WeChat para recibir una notificación cuando reciba una respuesta y continúe la conversación en WeChat. Para comenzar, guarde esta imagen de código QR y cárguela en el <a href=\'weixin://dl/scan\'> escáner de código QR </a>. ',
wechatQRCodeError: 'Se produjo un error al obtener su código QR de WeChat. Inténtalo de nuevo.',
whatsappChannelDescriptionDesktop: 'Sincronice su cuenta con WhatsApp escaneando el código QR o haciendo clic en el enlace a continuación. \ nLuego, envíe el mensaje precargado para validar la solicitud de sincronización. (Su código: {{code}} ). ',
whatsappChannelDescriptionMobile: 'Sincronice su cuenta con WhatsApp haciendo clic en el enlace a continuación. \ nLuego, envíe el mensaje rellenado previamente para validar la solicitud de sincronización. (Su código: {{code}} ). ',
whatsappLinkingError: 'Se produjo un error al obtener la información de enlace de WhatsApp. Inténtalo de nuevo.'
}
}). entonces (función () {
// Your code after init is complete
} );
</script>

Abre el widget de conversación (NOOP cuando está integrado)
Sparkcentral.open ();
Cierra el widget de conversación (NOOP cuando está integrado)
Sparkcentral.close ();
Indica si el widget está abierto o cerrado actualmente.
Sparkcentral.isOpened ();
Registra a un usuario en Web Messenger, recuperando las conversaciones que el usuario ya tenía en otras sesiones y / o dispositivos del navegador. Tenga en cuenta que no necesita llamar a esto después de `init` si ya pasó la identificación externa y jwt como argumentos en la llamada a` init`, en cuyo caso se hace internamente como parte de la secuencia de inicialización. Esto devuelve una "Promesa" que se resuelve cuando el Web Messenger está listo de nuevo.
Sparkcentral.login ('externa-id', 'some-jwt');
Cierra la sesión del usuario actual y reinicia el widget con un usuario anónimo. Esto devuelve una promesa que se resuelve cuando Web Messenger está listo nuevamente.
Sparkcentral.logout ();
Destruye Web Messenger y lo hace desaparecer. El Web Messenger debe reiniciarse con `init` para que vuelva a funcionar porque también borra el ID de integración del Web Messenger. También desvinculará a todos los oyentes que pueda tener con `Sparkcentral.on`.
Sparkcentral.destroy ();
Envía un mensaje a la conversación de destino en nombre del usuario.
Sparkcentral.sendMessage (
{
type: 'text',
text: 'hello'
} ,
'<conversation-id>'
);
// O
Sparkcentral.sendMessage ('hola', '<conversation-id>');
Personalizar las 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.

Sparkcentral.init ({
integrationId: '<integration-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 |
---|---|---|---|
ID de integración | No | - | Su aplicación / ID de integración. |
región | sí | - | La región de destino en la que se encuentra la aplicación. |
jwt | sí | - | El token para autenticar su comunicación con el servidor. |
userId | sí | - | La identificación del usuario. |
código de autenticación | sí | - | Un código de autenticación para vincular a una conversación existente. |
lugar | sí | en-US |
La configuración regional utilizada para el formato de fecha con el formato `-`. Consulte los códigos de idioma y los códigos de países. Nota: La parte del país es opcional, y si un país no se reconoce o no se admite, la aplicación recurre al idioma genérico. Si el idioma no es compatible, la aplicación vuelve a "en-US". Nota: 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 está incrustado (consulte la siguiente sección Incrustado). |
displayStyle | sí | botón | Cómo aparece el mensajero en su sitio web. Debe ser un botón o una pestaña. |
buttonIconUrl | sí | - | Cuando displayStyle es "botón", puede seleccionar su propio icono de botón. La imagen debe tener al menos 200 x 200 píxeles en formato JPG, PNG o GIF. |
buttonWidth | sí | 58px | Cuando displayStyle es "button", tiene la opción de especificar el ancho del botón. |
buttonHeight | sí | 58px | Cuando displayStyle es "button", 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 está 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 usa 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 utiliza 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 usa 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. |
Opciones 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 |
Opción de 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 | name: 'Nombre del campo',
|
Texto | name: 'Nombre del campo',
label: 'Nombre de etiqueta', placeholder: 'Placeholder text here' ” |
Seleccione |
Este es el formato en el que se agregan múltiples opciones:
opciones: [
{
name: ‘Name of the first option’,
|
Opción de modo integrado
Tiene la opción de configurar Web Messenger en modo incrustado. Esto le permite elegir dónde desea que esté visible el widget.
El siguiente ejemplo ilustra lo que necesita para configurarlo.
Tenga en cuenta que para que funcione el modo integrado, debe establecer el parámetro de embedded en true y llamar a la función Sparkcentral.render () manualmente.
Sparkcentral.init ( {
integrationId: 'INTEGRATION_ID_HERE',
embedded: true,
region: 'eu-1'
} ). Luego (() => {
// Your code after init is complete
}
Sparkcentral.render (document.getElementById ('chat-contenedor'));
JavaScript
Esta muestra incrusta el mensajero Sparkcentral dentro de un elemento DOM con el ID "chat-container". Si abre la página web, notará que ya no muestra un botón en la parte inferior derecha, pero está visible en el elemento contenedor.
Utilice los atributos de contacto para guardar datos específicos de mensajería
Puede almacenar información sobre la página web y el usuario mediante la función Atributos de contacto. Para habilitar esto, haga lo siguiente:
- En la pestaña Configuración , expanda el Espacio de trabajo del agente y seleccione Atributos de contacto .
- Busque uno de los Atributos de contacto predefinidos en la lista y cámbielo a Activado .
Ahora, cuando un cliente se ponga en contacto con usted a través del complemento Sparkcentral Messenger, esos datos específicos se almacenarán dentro de un Atributo de contacto.
Atributos de contacto disponibles para el complemento Web Messenger- Idioma del navegador
- Primer nombre
- Apellido
- Dominio de la página
- Título de la página
- URL de la página
- ID de usuario
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
Mediante el uso de varios códigos abreviados 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
Empezar
iOS
Para usar nuestro SDK con su aplicación iOS, debe agregarlo a su proyecto Xcode.
Instalar la dependencia del SDK
-
Instale CocoaPods.
CocoaPods es un administrador de dependencias para proyectos Swift y Objective C Cocoa.
-
Ejecute el siguiente comando en su terminal:
gema instalar cocoapods
-
Dile a Xcode que estás usando 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:
Dupdoproyecto 'Ubicación de su archivo .xcproj'
objetivo de 'YourApp'
vaina 'Sparkcentral'
fin -
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 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"
C objetivo
La primera función a ejecutar es la siguiente. Su ID de integración debe cambiarse en consecuencia.
[Sparkcentral initWithSettings: [SKCSettings settingsWithIntegrationId: @ "YOUR_INTEGRATION_ID"] CompletionHandler: ^ (NSError * _Nullable error, NSDictionary * _Nullable userInfo) {
// Your code after init is complete
} ];
Rápido
Sparkcentral.initWith (SKCSettings (integrationId: "YOUR_INTEGRATION_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
Vincula la dependencia del SDK con Gradle. Puede encontrar la dependencia del SDK de Sparkcentral en mavencentral ( https://repo.maven.apache.org/maven2 ).
Para obtener más información sobre Gradle y la declaración de repositorios disponibles públicamente, consulte https://docs.gradle.org/current/userguide/declaring_repositories.html#sec:declaring_public_repository
Usa el SDK
Inicialice desde su clase de aplicación. Agregue las siguientes líneas de código a su onCreate
en su clase de aplicación:
Sparkcentral.init (esto, nueva configuración ("YOUR_INTEGRATION_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_INTEGRATION_ID con el ID de integració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