Pular para o conteúdo principal

[Extensão] Smart Sales: Conversational Commerce

  • Atualizado

Índice

  1. Introdução
  2. Funcionalidades
  3. Instalação e configuração
  4. Uso
  5. Monitoramento de erros
  6. Suporte

Introdução

A Smart Sales é uma extensão inicialmente criada pela Blip, e agora evoluída pela White Wall para facilitar e aprimorar o processo de vendas no WhatsApp. Com automatização e personalização da venda, praticidade na configuração e integração com diversos recursos, você poderá impulsionar seus resultados, aumentar sua receita e oferecer uma jornada intuitiva e prática para seus clientes.

 

Funcionalidades

Catálogo

O catálogo de produtos da Smart Sales é exibido em uma página web. Via WhatsApp, o cliente inicia a jornada e recebe o link para o catálogo. A página é semelhante a um e-commerce normal, permitindo com que o cliente adicione produtos ao seu carrinho.  Ao concluir a compra na página, o cliente recebe uma mensagem no WhatsApp, com os dados da compra.

O catálogo é dividido em:

HOME

A página inicial, que exibe todos os produtos e permite com que eles sejam filtrados por categoria ou marca.

DETALHES DO PRODUTO

Ao selecionar um produto, o cliente pode ver seus detalhes e adicioná-lo ao carrinho (sacola de compras). Essa página exibe as imagens, título, descrição, variações e valores do produto. Além disso, também é possível exibir produtos relacionados (via configuração baseada em API).

SACOLA DE COMPRAS

Na sacola de compras (carrinho), o cliente pode revisar e finalizar seu pedido. Ao finalizar o pedido, o cliente é encaminhado para o WhatsApp e recebe uma mensagem com o resumo do carrinho, para que a compra possa ser concluída.

Categorias, marcas e busca

Os produtos podem estar associados a uma categoria e a uma marca, que tornam a busca mais simples. Inclusive, na Home, é possível navegar somente nos produtos de uma categoria. Além disso, outra possibilidade é procurar pelo nome do produto diretamente. 

Personalização da loja por contato

Via Smart Sales, é possível definir filtros pré-definidos com base no usuário. Isso é configurado a partir da variável de contato “smartsalesFilters” que pode ser manipulada via contact.extras.smartsalesFilters (objeto JSON). No momento, é possível especificar uma lista de categorias, via a propriedade “categories”.

Exemplo: se os produtos da loja estão divididos nas categorias X, Y e Z, para redirecionar o usuário diretamente para a categoria Z, basta definir o filtro da seguinte maneira:

smartsalesFilters {"categories":["Z"]}

Tracking do usuário e métricas

A Smart Sales acompanha as ações dos usuários e as agrega em diversas visualizações, que estão disponíveis na página da extensão. Acompanhar, por exemplo, o funil de vendas, é super simples:

 

Com a Smart Sales, é possível visualizar o carrinho de cada cliente e obter insights dos produtos, termos de busca e outras informações, permitindo tomada de decisão de forma estratégica.

 

A lista de funcionalidades de tracking da Smart Sales inclui:

  • Valor total dos pedidos: soma de todos os carrinhos enviados pelos usuários;
  • Taxa de conversão: percentual de pedidos que foram confirmados em relação ao total de carrinhos enviados;
  • Carrinhos em aberto: quantidade de carrinhos nos quais os pedidos não foram confirmados dentro de um período de 24 horas;
  • Carrinhos enviados: número de vezes que os pedidos foram confirmados no catálogo;
  • Carrinhos abandonados: número de carrinhos que não foram concluídos após o período de 24 horas, ou seja, os usuários não finalizaram a compra;
  • Produtos mais clicados por mês: produtos cujas páginas foram visitadas mais vezes
  • Termos mais procurados: buscas realizadas com maior frequência;
  • Produtos mais comprados;
  • Estados e países que mais acessam a loja.

Caso sinta falta de alguma funcionalidade de tracking, entre em contato com nosso suporte!

Envio do carrinho para o bot

Ao encerrar a seleção dos produtos, todas as informações do carrinho são enviadas para o bot, para que a compra possa ser finalizada. Esse processo pode tanto ser feito via atendimento humano, via Blip Desk ou por um sistema automatizado, para registrar o pedido e enviar a forma de pagamento. Essa configuração ainda não está integrada à Smart Sales e, portanto, deve ser realizada manualmente.

O carrinho do usuário fica salvo na variável de contato “smartsalesOrder”, que pode ser manipulada via contact.extras.smartsalesOrder.

 

Instalação e configuração

Instale a extensão normalmente via Blip Store. A extensão pode ser instalada tanto em bots do tipo router, como em bots do tipo builder. A configuração da Smart Sales é dividida em algumas partes, detalhadas a seguir.

Catálogo

Para configurar sua loja, o primeiro passo é realizar o cadastro dos produtos. Para fazer isso, visite a página de “Configuração” no menu de “Catálogo” da barra lateral:

Atualmente, existem duas possibilidades:

  1. Cadastro via Smart Sales: os produtos devem ser inseridos manualmente, na página de “Produtos”, no menu logo abaixo da “Configuração”. Para realizar o cadastro, clique em “Adicionar produto” e preencha as informações necessárias:

 

Atenção: o cadastro manual não realiza controle de estoque. Ele está limitado a 150 produtos.

Outra possibilidade do cadastro via Smart Sales é a importação dos dados a partir de um arquivo CSV (que também possui o mesmo limite de produtos).

  1. Cadastro via API: caso prefira um processo mais automatizado, é possível gerenciar os produtos via API. A API é compatível com a versão antiga da Smart Sales: então, usuários antigos não precisam implementá-la novamente. Para usuários novos, é necessário seguir o passo a passo a seguir.

Implementação da API

Este guia também se encontra disponível na página de configuração, quando a API é selecionada.

Reforçando: esse procedimento só é necessário para usuários novos!

Guia de implementação da API

Para integrar com a extensão Smart Sales, você precisa implementar uma API que esteja de acordo com nossa especificação da OpenAPI. Isso permite que a plataforma busque informações sobre produtos do seu sistema.

Autenticação

Todas as requisições da API devem incluir um Token no cabeçalho para autenticação:

Token: SeuTokenDaAPI

Endpoints
  • GET /api/products: Retorna uma lista de produtos.
  • POST /api/products: Retorna uma lista de produtos com filtro.
  • GET /api/products/categories: Retorna uma lista de categorias de produtos.
  • GET /api/products/brands: Retorna uma lista de marcas de produtos.
  • GET /api/products/{sku}: Retorna detalhes de um produto específico por SKU.
  • GET /api/products/relatedProducts/{sku}: Retorna produtos relacionados para um SKU específico.
Parâmetros das requisições

Parâmetros de query comuns para os endpoints de listagem:

  • identity (opcional): Uma string para identificar a requisição.
  • skip (opcional): Número de registros a serem ignorados para paginação. O padrão é 0.
  • take (opcional): Número de registros a serem retornados. O padrão é 10.
Formato de resposta

As respostas devem estar no formato JSON. Abaixo está um exemplo de resposta para GET /api/products:

{

    "products": [

        {

            "name": "Nome do produto",

            "description": "Descrição do produto",

            "originalValue": 100.00,

            "currentValue": 90.00,

            "category": "Nome da categoria",

            "brand": "Nome da marca",

            "unitType": "Tipo de unidade",

            "minQuantity": 1,

            "extras": {

                "option1": "Cor",

                "values1": [

                    { "name": "Vermelho", "valueAddition": 0 },

                    { "name": "Azul", "valueAddition": 0 }

                ],

                "option2": "Tamanho",

                "values2": [

                    { "name": "P", "valueAddition": 0 },

                    { "name": "GG", "valueAddition": 10 }

                ]

            },

            "images": [

                { "imageUrl": "https://example.com/image1.jpg", "order": 1 },

                { "imageUrl": "https://example.com/image2.jpg", "order": 2 }

            ],

            "sku": "PRODUCTSKU123"

        }

    ]

}

Exemplo de implementação

Abaixo está um exemplo de como você pode implementar o endpoint GET /api/products usando Node.js e Express:

const express = require('express');

const app = express();

// Middleware para autenticação

app.use((req, res, next) => {

    const token = req.headers['token'];

    if (token !== 'SeuTokenDaAPI') {

        return res.status(401).json({ message: 'Unauthorized' });

    }

    next();

});

// GET /api/products

app.get('/api/products', (req, res) => {

    const identity = req.query.identity;

    const skip = parseInt(req.query.skip) || 0;

    const take = parseInt(req.query.take) || 10;

    // Busque produtos da sua fonte de dados

    const allProducts = [/* Vetor de objetos de produto */];

    const products = allProducts.slice(skip, skip + take);

    res.json({ products });

});

// Iniciar o servidor

app.listen(3000, () => {

    console.log('O servidor da API está sendo executado na porta 3000');

});
Testando a API

Você pode testar sua implementação da API usando esta coleção do Postman.

API de exemplo

Se você não tiver uma API para integrar, você pode usar nossa API de exemplo para fins de teste. A API de exemplo está hospedada em: https://sample-api-v1.smartsales.whitewall.dev.

Loja

Com os produtos configurados, o próximo passo é configurar a loja. Para isso, visite a página de “Tema” no menu de “Loja”, na barra lateral:

Você pode definir a logo, o título e a cor primária da loja. Além disso, é possível configurar os banners que aparecem na Home, que podem incluir links. À direita, aparecerá uma prévia da versão móvel da loja, mas também é possível ver a versão desktop clicando em “Ver minha loja”.

Descontos

Caso deseje, você pode explorar a criação de cupons na página de “Descontos”. Os descontos podem ser aplicados de diversas formas, não apenas através de cupons. Por exemplo, é possível segmentar um desconto que será aplicado automaticamente (sem que o usuário precise inserir um código de cupom manualmente) para todos os contatos na Blip que possuírem uma propriedade específica. Para criar um novo desconto, clique em “Adicionar desconto”.

Como mencionado anteriormente, os cupons são altamente configuráveis. Na tela de criação do cupom, você encontrará diversas opções:

 Propriedades dos descontos

O nome e a descrição são propriedades internas, que servem somente para identificação do desconto. Já o “Cupom” indica qual será o código que o usuário precisará inserir para ativar o desconto. Caso o “Cupom” esteja ausente, o desconto será aplicado automaticamente, se o usuário atender aos outros critérios. 

O valor possui dois tipos: fixo e porcentagem. Além disso, é possível definir um valor mínimo para a compra. Na ausência deste campo, qualquer pedido poderá usar o desconto. Você pode restringir a validade do desconto a um período específico, usando o campo de datas. A qualquer momento é possível desabilitar um cupom, usando o ícone no canto superior direito.

 

As “Condições” permitem ainda mais controle dos descontos: eles podem ser aplicáveis apenas em produtos de marcas ou categorias específicas. Um controle ainda mais fino pode ser feito via identificador do produto (SKU). De forma semelhante, você pode permitir que apenas um grupo seleto de usuários possa aplicar um cupom, a partir do campo “Propriedades de contato”: o usuário somente poderá aplicar o desconto se o seu contato na Blip possuir os campos definidos.

A combinação das propriedades é feita da seguinte maneira: dentro do mesmo campo, é aplicado um “ou inclusivo”. Ou seja, se o desconto é para produtos das marcas A e B, ele será aplicado em ambos os casos. No entanto, entre campos distintos, é preciso haver pelo menos uma correspondência em cada campo: se um desconto é para produtos da marca A e da categoria Z, somente produtos que atendem a ambos esses critérios serão realmente descontados.

Na tela de descontos, é possível editar (ou excluir) os cupons existentes a qualquer momento.

 Cupons no catálogo

Quando existe ao menos um cupom cadastrado, o usuário terá a possibilidade de inserir um código durante a compra:

Atenção: é possível aplicar somente um cupom por vez, mas outros descontos são aplicáveis se o usuário e o produto forem elegíveis.

Outras configurações

Alguma informações extras podem ser alteradas na página de “Configurações”: a moeda da loja e a mensagem que os usuários recebem ao concluir uma compra:

A mensagem é configurada via Liquid. Ao receber a mensagem, o usuário poderá confirmar (ou não) o pedido. No builder, essas opções devem ser configuradas para que a extensão funcione corretamente (isso será detalhado na próxima seção). Também existe uma terceira possibilidade: inatividade do usuário, que ocorre após 24 horas do envio da mensagem de confirmação. Um exemplo de mensagem que o usuário recebe no WhatsApp após concluir o pedido:

 

Uso

Para usar a Smart Sales, o primeiro passo após a configuração é adicionar a extensão a um fluxo existente. 

  1. Adicionando ao fluxo

Primeiramente, instale a extensão da White Wall para o builder, clicando aqui.

Essa extensão possibilita diversas integrações (HubSpot, ChatGPT, RD Station, Google Sheets, etc.), incluindo a Smart Sales. Após a instalação, visite a página do builder do bot e clique no ícone de “+” para adicionar um novo bloco:

 

Você vai perceber que é possível adicionar um novo elemento, destacado na figura: “Nova integração”. Caso esse item não apareça, confira se a extensão está instalada e atualize a página. Lembrando que, além disso, é necessário habilitar o contexto do roteador no builder, caso a Smart Sales tenha sido instalada em um roteador. Ao clicar em “Nova integração”, configure o novo bloco com a integração do tipo “Smart Sales”: 

 

A seguir, configure os componentes (a mensagem que o usuário receberá ao iniciar a compra). A configuração dos componentes é opcional - por isso, se você não fizer esse processo, os valores-padrão serão usados. Caso deseje realizar alterações, é possível modificar tanto o componente da Smart Sales no WhatsApp quanto em outros canais. Para o WhatsApp, é possível que o componente não apareça na versão web (essa funcionalidade ainda não está disponível para todos os usuários). A vantagem de ter um componente separado para o WhatsApp é que ele é muito mais flexível, permitindo definir 3 campos além do corpo da mensagem: o cabeçalho, o rodapé e o texto do botão:

Nesse ponto, preste atenção: os números na direita indicam quantos caracteres ainda podem ser usados naquele campo. Já a mensagem para os outros canais é mais simples:

 

Em seguida, defina um nome para a variável de resultado. É recomendável usar um nome descritivo, como resultSmartsales. Ela será usada na próxima etapa: a configuração das condições de saída.

  1. Condições de saída

A Smart Sales agora dá mais flexibilidade na configuração das condições de saída. A configuração é feita como em outros blocos do builder. Você pode usar os valores da variável de resultado (configurada anteriormente) para direcionar o usuário para o caminho mais adequado. Os possíveis valores da variável são: ACCEPT_TO_BUY, REFUSED_TO_BUY e INACTIVITY. Desse modo, você pode adicionar condições do tipo “variável” com os valores listados acima:

Também é possível configurar outros tipos de condições de saída, como em outros blocos.

Monitoramento de erros

Para monitorar possíveis erros no Smart Sales, basta seguir o passo a passo da configuração abaixo:

1.Instalando a extensão de monitoramento no bot roteador

2. Configurar alertas

  • Após instalar a extensão, clique em "Gerenciar alertas" no painel principal da extensão.

3.Adicionar Destinatários de Alertas

  • Insira o e-mail ou os e-mails para os quais os alertas devem ser enviados.
  • Ative a opção "Habilitar alertas baseados em eventos".

4.Configurar os Eventos a Serem Monitorados

Adicione os seguintes eventos para o monitoramento:

  •         Smart Sales Internal Error
  •         Smart Sales Error

Suporte

Em caso de dúvidas ou se encontrar algum problema com a extensão, entre em contato conosco pelo email support@whitewall.dev.

Para mais informações, acesse a discussão sobre o assunto em nossa comunidade ou os vídeos no nosso canal. 😃

Artigos relacionados