Cómo las API de comunicaciones de Vonage facilitan las experiencias minoristas del siglo XXI

Este artículo ha sido escrito en colaboración con Chris Tankersley

La tormenta perfecta de retos para los minoristas

Antes de analizar la solución, veamos la gravedad de la situación para el comercio minorista como sector. Hace unos años, el director de un importante minorista norteamericano envió un alarmado correo electrónico a sus compañeros de consejo: "Tenemos un grave problema". Acababa de ir a una de las tiendas y se había dado cuenta de que varios compradores andaban con sus teléfonos y, al parecer, hacían fotos de la mercancía. Desconcertado, preguntó a algunos de ellos qué hacían.

De hecho, utilizaban sus teléfonos para leer los códigos de barras, comprobar los precios de los artículos en una tienda online de la competencia y completar las compras en sus teléfonos. Eso significaba que el minorista físico estaba sirviendo de sala de exposición para el competidor en línea. Este fenómeno, denominado "showrooming", significaba que cada minorista se sentaba sobre unos activos inmobiliarios de los que ya no se beneficiaba en exclusiva.

Las tendencias recientes en varios mercados han acentuado el reto para los minoristas: la pandemia de Covid-19 afectó significativamente al tráfico peatonal en las tiendas durante varios meses, y ahora que las economías se han reanudado, han aumentado los problemas en la cadena de suministro, y las tiendas tienen dificultades para encontrar personal.

UBS predice 50.000 cierres de tiendas sólo en Estados Unidos en los próximos 5 años. Así que la pregunta es: ¿cómo mantener las puertas abiertas y a los clientes?

Compromiso digital en espacios físicos

Como hemos visto, el comercio minorista se enfrenta a grandes retos con el "showrooming", la disminución del tráfico peatonal, las interrupciones de la cadena de suministro y los problemas de contratación. Las comunicaciones digitales están ayudando a resolver algunos de estos problemas al permitir nuevas experiencias.

Las investigaciones han demostrado que las conversaciones de venta que incluyen una interacción por vídeo tienen más probabilidades de resultar fructíferas para los vendedores.

Volviendo al tema del showrooming, al permitir la comunicación mientras los clientes están en la tienda, un asistente de ventas remoto puede ayudar a cerrar el trato allí mismo, midiendo el sentimiento, calibrando cualquier duda y respondiendo a cualquier pregunta.

Por ejemplo, si el comprador está pensando en comparar precios, el agente puede igualar el precio al instante mientras se comunica con él en la tienda y, posiblemente, incluir un cupón especial o una promoción para la entrega o la instalación. Si la tienda puede satisfacer las necesidades del cliente mientras está listo para comprar, debería hacerlo.

Cómo las API de Vonage pueden ayudar con los desafíos del comercio minorista

La Video API de Vonage puede usarse para permitir que el comprador vea a la persona con la que está hablando, con expresiones faciales y todo lo que enriquece una interacción; para que el comprador le muestre al agente lo que está mirando; y para que el agente comparta su pantalla si es necesario. Un minorista puede medir fácilmente el retorno de la inversión cambiando a vídeo esas conversaciones (con el consentimiento del comprador, por supuesto).

Para ayudar a visualizar una solución que se puede implantar rápidamente, he aquí un escenario de aumento del centro de contacto en el que Vonage está trabajando activamente con algunos de sus socios:

• Un cliente entra en una tienda para comprar un televisor caro, necesita ayuda para decidirse y no hay personal experimentado en la tienda para ayudarle;

• El minorista ha colocado códigos QR en sus televisores;

• El comprador escanea un código QR que le lleva a una página web en su teléfono;

• En esa página, el comprador puede introducir su número de teléfono para chatear con Vonage SMS, lo que le permite comunicarse en directo con un representante de la tienda que conoce bien los productos de televisión.

Si bien este artículo está destinado a ayudar a poner en marcha algunos engranajes, tenemos algunos ejemplos de código que puedes usar para ver ejemplos de código sobre cómo las API de Vonage pueden ayudar con las interacciones minoristas. La aplicación de muestra te mostrará cómo usar nuestra Verify API para validar a un usuario y nuestra Voice API para realizar una llamada dentro del navegador a un agente de soporte.

Ejemplo de código

Requisitos previos

• Node.js v14 o superior

• Nuestra interfaz de línea de comandos, que puede instalar con npm install @vonage/cli -g

• Código de ejemplo que muestra esta solución funcionando de extremo a extremo

• Ngrok para pruebas locales

Vonage API Account

To complete this tutorial, you will need a Vonage API account. If you don’t have one already, you can sign up today and start building with free credit. Once you have an account, you can find your API Key and API Secret at the top of the Vonage API Dashboard.

Ready to start building?

Experience seamless connectivity, real-time messaging, and crystal-clear voice and video calls—all at your fingertips.

Configuración de aplicaciones

El código de ejemplo requiere la creación de una aplicación de Vonage. Para crear la aplicación, usaremos nuestra interfaz de línea de comandos. Si aún no has configurado la CLI, hazlo ejecutando el comando vonage config:set --apiKey=api_key --apiSecret=api_secret en tu terminal, donde la clave y el secreto de la API son la clave y el secreto de la API que se encuentran en tu Account de tu cuenta.

Si está ejecutando la aplicación localmente querrá utilizar ngrok para proporcionar un punto final externo. Proporcione su URL ngrok o (u otra URL de alojamiento) con rutas /webhooks/answer para la Url de Respuesta y /webhooks/events para la Url de Eventos.

Ahora debes crear una aplicación de Vonage. Una aplicación contiene la información de seguridad y configuración que necesitas para conectarte a Vonage. En tu terminal, crea una aplicación de Vonage usando el siguiente comando reemplazando las URL de respuesta y evento por tus URL de ngrok o alojamiento:

Podemos usar Vonage Verify para asegurarnos de que la solicitud de chat sea válida. Primero, podemos hacer una pequeña página para pedir el número de teléfono del usuario:

// src/routes/verify.js
router.get('/', (request, response) => {
  response.render('verify/start', {
    item_name: request.query.item_name
  })
})

// views/verify/start.pug
doctype html 
html 
    head 
        title Store Chat Login
    
    body 
        form(method="post")
            div
                label Enter your mobile phone number to start a chat with #{item_name} 
            div
                input(name="mobile_number")
            div
                input(type="submit", value="Send Verification Code")

El usuario puede introducir su número de teléfono y nosotros enviaremos una solicitud de verificación. Esto enviará un código de cuatro dígitos al número de teléfono del usuario, que podrá introducirlo en la siguiente pantalla.

// src/routes/verify.js
router.post('/', (request, response) => {
  vonage.verify.request({
    number: request.body.mobile_number,
    brand: 'Vonage Store Demo',
    workflow_id: 6
  }, (err, results) => {
    if (err) {
      console.error(err)
    }

    request.session.verify_request_id = results.request_id
    request.session.mobile_number = request.body.mobile_number
    request.session.save()

    response.redirect('/verify/check')
  })
})

// views/verify/check.pug
doctype html 
html 
    head 
        title Store Chat Login
    
    body 
        form(method="post")
            div
                label Please enter the verification code that was sent to you 
            div
                input(name="verify_pin")
            div
                input(type="submit", value="Submit Verification Code")

El usuario puede introducir el PIN que se envía a su dispositivo. La mayoría de los dispositivos móviles recibirán el mensaje SMS y también permitirán que el usuario autocomplete el formulario. Si el usuario no recibe el SMS, Vonage también intentará llamar al teléfono y proporcionar el PIN a través de una llamada de voz.

// src/routes/verify.js
router.post('/check', async (request, response) => {
  vonage.verify.check({
    request_id: request.session.verify_request_id,
    code: request.body.verify_pin
  }, async (err, results) => {
    if (err) {
      delete request.session.verify_request_id
      request.session.save()
    } else {
      request.session.verified = true
      request.session.save()
      request.session.user = await getUser(request.session.mobile_number)

      response.redirect('/voice')
    }
  })
})

Una vez verificado el número, podemos crear un usuario que nos permitirá que el usuario pueda llamar posteriormente a nuestro agente directamente desde el navegador. getUser() buscará el usuario en nuestro sistema, y si no existe, lo creará automáticamente.

Al mismo tiempo, puede interactuar con su CRM o sistema de agentes para alertar a un agente de que un usuario ha solicitado ayuda.

La información del código QR se transmite automáticamente al representante en relación con la ubicación de la tienda y la marca, modelo y precio del televisor. El agente responde a las preguntas preliminares del comprador. Dado que teclear no siempre es cómodo para el comprador, el agente puede ofrecerle cambiar sin problemas a una conversación de voz, utilizando la función click-to-call de Vonage. Esto se aplica tanto si el cliente utiliza una página web normal, SMS o chat, o incluso la propia aplicación móvil de la tienda.

Una vez verificado el usuario, nuestra página web puede darle la opción de llamar a nuestro sistema.

// views/voice/index.pug
doctype html 
html 
    head 
        title Store Chat Login
        script(type="module", src="https://unpkg.com/nexmo-client@latest/dist/nexmoClient.js?module")
    
    body 
        p
            | You are currently logged in as 
            span(id="username")

        p A chat agent will contact you via text shortly.

        p
            | If you would rather talk to an agent, click 
            button(type="button", id="call_agent") here

        p
            button(type="button", id="hangup") Hang Up

Para empezar, añadimos dos botones a la página que permitirán al usuario ponerse en contacto con el agente y colgar. También incluimos el Vonage Client SDK, que se encarga de la configuración en segundo plano de la mensajería y la voz en el navegador.

En cuanto al código del navegador, tenemos que hacer algunas cosas. Necesitamos generar un token de autenticación, llamado JWT. Este token permite a nuestro navegador realizar una solicitud a la API de Vonage que facilita la llamada dentro del navegador. Generaremos este token del lado del servidor, ya que requiere un bloque de texto secreto llamado clave privada.

// src/routes/jwt.js
router.get('/jwt', (request, response) => {
  const jwt = vonage.generateJwt({
    sub: request.session.user.name,
    acl: {
      paths: {
        '/*/users/\*\*': {},
        '/*/conversations/**': {},
        '/*/sessions/**': {},
        '/*/devices/\*\*': {},
        '/*/image/**': {},
        '/*/media/**': {},
        '/*/applications/\*\*': {},
        '/*/push/**': {},
        '/*/knocking/**': {},
        '/\*/legs/\**': {}
      }
    }
  })

  response.json({ jwt })
})

Nuestro servidor creará el JWT específicamente para nuestro usuario, y nuestro front-end lo guardará. Luego podremos usar este JWT para conectarnos a las API de Vonage usando la clase de JavaScript NexmoClientque es una clase de JavaScript provista por nuestro Client SDK.

// views/voice/index.pug
async function getJwt() {
    let jwt;
    await fetch('/auth/jwt')
        .then(results => results.json())
        .then(data => {
            jwt = data.jwt
        })
        .catch(err => console.error(err))

    return jwt;
}

Una vez que nos hayamos conectado a la API de Vonage con nexmo.createSession(jwt)podemos adjuntar un listener que llamará a nuestro agente cuando el usuario haga clic en el botón correspondiente. También conectaremos el botón "Colgar" para que el usuario pueda finalizar la llamada desde su extremo.

async function bootstrap() {
    let jwt = await getJwt();
    nexmo = new window.NexmoClient()
    app = await nexmo.createSession(jwt)
    document.getElementById('username').innerHTML = app.me.name

    document.getElementById("call_agent").addEventListener('click', (event) => {
        app.callServer('#{from_numer}');
    })

    app.on("member:call", (member, call) => {
        document.getElementById('hangup').addEventListener('click', (event) => {
            call.hangUp();
        });
    })
}

Para ver el código descrito en esta entrada del blog en acción echa un vistazo a la repositorio de Github.

Conclusión

Con las API de Vonage, los ejecutivos del sector minorista pueden satisfacer las necesidades de sus clientes tradicionales y minimizar la fuga de ingresos a la competencia. Las API de Vonage pueden agregarse a una variedad de aplicaciones en casi cualquier lenguaje de programación, lo que permite que tus usuarios decidan cómo desean ser contactados.

Esperamos que esto te dé algunas ideas para comenzar a ver cómo puedes integrar las API de comunicación de Vonage en tu experiencia minorista.

Si tienes alguna pregunta, únete a nuestro Slack de la comunidad de Vonage o envíanos un mensaje en Twitter.

Lecturas complementarias

• API de SMS de Vonage

• Verify API de Vonage

• API de voz de Vonage

• Inteligencia de Contact Center

• Análisis del sentimiento en tiempo real