Como as APIs da Vonage Communications possibilitam experiências de varejo do século XXI

Este artigo foi escrito em colaboração com Chris Tankersley

A tempestade perfeita de desafios para os varejistas

Antes de analisarmos a solução, vamos examinar a gravidade da situação para o setor de varejo. Há alguns anos, o diretor de uma das principais redes varejistas da América do Norte enviou um e-mail alarmado aos demais membros do conselho: “Estamos em sérios apuros”. Ele acabara de visitar uma das lojas e percebeu que vários clientes andavam por lá com seus celulares, aparentemente tirando fotos das mercadorias. Intrigado, perguntou a alguns deles o que estavam fazendo.

Na verdade, eles estavam usando seus celulares para ler os códigos de barras, verificar os preços dos produtos em uma loja online concorrente e concluir as compras diretamente pelos celulares. Isso significava, na prática, que o varejista físico estava servindo de showroom para o concorrente online! Esse fenômeno, chamado de “showrooming”, significava que cada varejista agora possuía ativos imobiliários dos quais não estava mais se beneficiando exclusivamente.

As tendências recentes em vários mercados intensificaram o desafio para os varejistas: a pandemia da Covid-19 afetou significativamente o fluxo de clientes nas lojas por vários meses e, agora que as economias voltaram a funcionar, os problemas na cadeia de suprimentos aumentaram, e as lojas estão enfrentando dificuldades para encontrar pessoal.

O UBS prevê o fechamento de 50 mil lojas somente nos EUA nos próximos 5 anos. Então, a pergunta é: como manter as portas abertas e os clientes voltando?

Engajamento digital em espaços físicos

Como vimos, o setor de varejo está enfrentando grandes desafios, como o “showrooming”, a queda no fluxo de clientes nas lojas, interrupções na cadeia de suprimentos e dificuldades na contratação de pessoal. As comunicações digitais estão ajudando a resolver alguns desses desafios, possibilitando novas experiências.

Pesquisas demonstraram que conversas de vendas que envolvem uma interação por Video têm mais chances de resultar em um desfecho positivo para os vendedores.

Voltando à questão do “showrooming”, ao possibilitar a comunicação enquanto os clientes estão na loja, um assistente de vendas remoto pode ajudar a fechar a venda naquele mesmo momento, avaliando o sentimento do cliente, identificando eventuais hesitações e esclarecendo quaisquer dúvidas.

Por exemplo, se o cliente estiver de fato pensando em comparar preços, o atendente pode igualar o preço na hora, enquanto conversa com ele na loja, e talvez ainda oferecer um cupom especial ou uma promoção, como frete grátis ou instalação gratuita. Se a loja puder atender às necessidades do cliente no momento em que ele estiver pronto para comprar, ela deve fazê-lo.

Como as APIs da Vonage podem ajudar a superar os desafios do varejo

A Video API da Vonage pode ser usada para permitir que o cliente veja a pessoa com quem está falando, com expressões faciais e tudo o que torna uma interação mais rica; para que o cliente mostre ao atendente o que está vendo; e para que o atendente compartilhe sua tela, se necessário. Um varejista pode medir facilmente o ROI ao habilitar a mudança para Video nessas conversas (com o consentimento do cliente, é claro).

Para ajudar a visualizar uma solução que possa ser implementada rapidamente, eis um cenário de ampliação de centrais de atendimento no qual a Vonage está trabalhando ativamente com alguns de seus parceiros:

• Um cliente entra em uma loja para comprar uma TV cara, precisa de ajuda para se decidir e não há nenhum funcionário experiente para atendê-lo;

• A loja colocou códigos QR em seus aparelhos de TV;

• O consumidor escaneia um código QR que o leva a uma página da web no celular;

• Nessa página, o cliente pode inserir seu número de telefone para conversar por meio do serviço de SMS da Vonage; isso permite que ele entre em contato em tempo real com um representante da loja que está trabalhando remotamente e possui conhecimento sobre produtos de TV.

Embora este artigo tenha como objetivo ajudar a dar o pontapé inicial, disponibilizamos alguns exemplos de código que você pode usar para ver como as APIs da Vonage podem auxiliar nas interações no varejo. O aplicativo de exemplo mostrará como usar nossa Verify API para validar um usuário e nossa Voice API para fazer uma chamada diretamente no navegador para um agente de suporte.

Código de exemplo

Pré-requisitos

• Node.js v14 ou superior

• Nossa interface de linha de comando, que você pode instalar com npm install @vonage/cli -g

• Código de exemplo que mostra essa solução funcionando do início ao fim

• Ngrok para testes locais

Configuração do aplicativo

O código de exemplo requer a criação de uma aplicação da Vonage. Para criar a aplicação, usaremos nossa interface de linha de comando. Se você ainda não configurou a CLI, faça isso executando o comando vonage config:set --apiKey=api_key --apiSecret=api_secret no seu terminal, onde “API Key” e “Secret” são a chave de API e o segredo encontrados nas página de configurações do Account .

Se você estiver executando o aplicativo localmente, é recomendável usar o ngrok para disponibilizar um endpoint externo. Insira sua URL do ngrok (ou a URL de outro serviço de hospedagem) com rotas /webhooks/answer para a “URL de resposta” e /webhooks/events para a URL do evento.

Agora você precisa criar uma aplicação Vonage. Uma aplicação contém as informações de segurança e configuração necessárias para se conectar ao Vonage. No seu terminal, crie uma aplicação Vonage usando o comando a seguir, substituindo as URLs de resposta e de evento pelas suas URLs do ngrok ou de hospedagem:

Podemos usar o Vonage Verify para garantir que a solicitação de chat seja válida. Primeiro, podemos criar uma pequena página para solicitar o número de telefone do usuário:

// 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")

O usuário pode inserir seu número de telefone, e nós enviaremos uma solicitação de verificação. Isso fará com que um código de quatro dígitos seja enviado para o número de telefone do usuário, que ele poderá inserir na próxima tela.

// 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")

O usuário pode digitar o PIN enviado ao seu dispositivo. A maioria dos dispositivos móveis recebe a mensagem SMS e permite que o usuário preencha o formulário automaticamente. Caso o usuário não receba a mensagem SMS, a Vonage também tentará ligar para o aparelho e fornecer o PIN por meio de uma chamada de Voice.

// 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')
    }
  })
})

Assim que o número for verificado, poderemos criar um usuário que nos permitirá que ele ligue para o nosso agente posteriormente, diretamente do navegador. getUser() O sistema localizará o usuário em nosso banco de dados e, caso ele não exista, o criará automaticamente.

Ao mesmo tempo, você pode interagir com seu CRM ou sistema de atendimento para alertar um agente de que um usuário solicitou ajuda.

As informações do código QR são automaticamente repassadas ao atendente, incluindo a localização da loja, bem como a marca, o modelo e o preço da TV. O agente responde às perguntas iniciais do cliente. Como nem sempre é prático para o cliente digitar, o agente pode propor a transição direta para uma conversa por voz, usando o recurso “clicar para ligar” da Vonage. Isso se aplica independentemente de o cliente estar usando uma página da web comum, SMS, chat ou até mesmo o próprio aplicativo móvel da loja.

Assim que o usuário for verificado, nossa página da web poderá oferecer a ele a opção de ligar para o nosso 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 começar, adicionamos dois botões à página que permitirão ao usuário entrar em contato com o agente e também desligar a ligação. Também incluímos o Vonage Client SDK, que cuida da configuração em segundo plano para mensagens e chamadas de Voice no navegador.

Quanto ao código do navegador, precisamos fazer algumas coisas. Precisamos gerar um token de autenticação, chamado JWT. Esse token permite que nosso navegador faça uma solicitação à API da Vonage, o que possibilita a realização de chamadas diretamente no navegador. Vamos gerar esse token no lado do servidor, pois ele requer um bloco de texto secreto chamado “chave 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 })
})

Nosso servidor criará o JWT especificamente para o nosso usuário, e nosso front-end irá salvá-lo. Podemos então usar esse JWT para nos conectarmos às APIs da Vonage utilizando o NexmoClient, que é uma classe JavaScript fornecida pelo nosso 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;
}

Depois de nos conectarmos à API da Vonage com nexmo.createSession(jwt), podemos associar um ouvinte que chamará nosso agente quando o usuário clicar no botão apropriado. Também vamos configurar o botão “Desligar” para que o usuário possa encerrar a chamada do seu lado.

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 o código descrito nesta postagem do blog em ação, dê uma olhada no repositório do GitHub.

Conclusão

Com as APIs da Vonage, os executivos do setor de varejo podem atender às necessidades de seus clientes em lojas físicas e minimizar a perda de receita para a concorrência. As APIs da Vonage podem ser integradas a uma variedade de Applications em praticamente qualquer linguagem de programação, permitindo que seus usuários decidam como desejam ser contatados.

Esperamos que isso lhe dê algumas ideias para começar a entender como você pode integrar as APIs de comunicação da Vonage à sua experiência no varejo.

Se você tiver alguma dúvida, venha participar da nossa Comunidade Vonage no Slack ou envie-nos uma mensagem no Twitter.

Leitura complementar

• SMS API da Vonage

• Verify API

• Voice API da Vonage

• Inteligência em Centros de Atendimento

• Análise de sentimento em tempo real