Saltar al contenido principal

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

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

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

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

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.

Opciones

Se pueden cambiar los siguientes ajustes generales.

Opciones, valores predeterminados y definiciones
Opción ¿Opcional? Valor por defecto Descripción
ID de integración No - Su aplicación / ID de integración.
región - La región de destino en la que se encuentra la aplicación.
jwt - El token para autenticar su comunicación con el servidor.
userId - La identificación del usuario.
código de autenticación - Un código de autenticación para vincular a una conversación existente.
lugar 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 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 está incrustado (consulte la siguiente sección Incrustado).
displayStyle botón Cómo aparece el mensajero en su sitio web. Debe ser un botón o una pestaña.
buttonIconUrl - 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 58px Cuando displayStyle es "button", tiene la opción de especificar el ancho del botón.
buttonHeight 58px Cuando displayStyle es "button", 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 está 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.

Opciones de color valores predeterminados y descripciones
Opción ¿Opcional? Valor por defecto Descripción
brandColor 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 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 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.

Valores predeterminados de la opción 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.

Opciones de menú

Los elementos del menú se pueden habilitar o deshabilitar.

Valores predeterminados y descripciones de las 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

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.

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'
}
]
}
]
}
Información y nombres de campo
Campo Información
Correo electrónico

name: 'Nombre del campo',
label: 'Nombre de etiqueta',
placeholder: 'Placeholder text here' ”

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’,
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’
}
]

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.

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

  1. En la pestaña Configuración , expanda el Espacio de trabajo del agente y seleccione Atributos de contacto .
  2. 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

Elementos y sintaxis de shortcode
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 tres botones de enlace

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)

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

Empezar

iOS

Para usar nuestro SDK con su aplicación iOS, debe agregarlo a su proyecto Xcode.

Instalar la dependencia del SDK

  1. Instale CocoaPods.

    CocoaPods es un administrador de dependencias para proyectos Swift y Objective C Cocoa.

  2. Ejecute el siguiente comando en su terminal:

    gema instalar cocoapods

  3. 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:

    Dupdo
    proyecto 'Ubicación de su archivo .xcproj'
    objetivo de 'YourApp'
    vaina 'Sparkcentral'
    fin
  4. 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

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

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

Rápido

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

Dupdo
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