Usando e customizando a toolbar de televendas

Breno Barreto

Breno Barreto

Última atualização
Todas estas formas de customiza√ß√£o podem alteradas no futuro. Ao us√°-las, voc√™ entende que sua loja deve acompanhar atualiza√ß√Ķes da plataforma para que sua customiza√ß√£o continue funcionando corretamente.

A toolbar de televendas √© a barra superior exibida para os operadores que realizam vendas no ambiente da sua loja em nome dos clientes, ou seja, ‚Äúpersonificando‚ÄĚ clientes.

Para dar acesso a estes operadores, é necessário atribuir o perfil de acesso Televendas a eles, por meio do módulo License Manager.

A toolbar aparece uma vez que o operador cadastrado faça o login no ambiente da loja e é exibida em todas as áreas do seu site (exceto pelo Meus Pedidos).

Para personificar o usu√°rio de um cliente, o operador precisa clicar em Entrar como, no canto direito da toolbar.

Feito isso, o e-mail do cliente passa a ser exibido nesta mesma √°rea.

Para logar como outro usu√°rio, basta clicar no bot√£o Trocar de cliente.

Customizando a Toolbar

Não é recomendável alterar a altura do elemento da toolbar. Caso sua loja tenha um header ou outro elemento fixo no topo da tela, ele deve receber a propriedade top com a altura necessária para compensar presença da toolbar de televendas.

A nova toolbar de televendas pode ser customizada com os estilos da sua loja ou com javascript. Para sobrescrever os estilos originais da toolbar, faça a customização em um arquivo .css ou .js e carregue-o no template da página.

Para customizar os estilos da toolbar, use as seguintes classes:

.cc-toolbar //Elemento mais externo da toolbar .cc-user //Seção com email do usuário (operador) .cc-customer //Seção com email do cliente personificado .cc-btn-login //Botão de login para personificar cliente .cc-impersonate //Pop-up com form para input do email do cliente .cc-btn-change //Botão de login para trocar de cliente personificado

Para interagir com a barra via javascript, use os IDs abaixo como hooks para acessar seus diferentes elementos no DOM:

#vtex-callcenter //Elemento mais externo da toolbar #vtex-callcenter__user-email //Elemento do email de usu√°rio (operador) #vtex-callcenter__customer-email //Elemento do email do cliente #vtex-callcenter__customer-email-input //Elemento de input do email do cliente #vtex-callcenter__customer-login-submit //Elemento de submit do input do email do cliente

Voc√™ tamb√©m pode interagir com a barra usando m√©todos de Javascript p√ļblicos:

//Login do impersonar cliente window.cc.impersonate(customer_email)

(Onde customer_email é uma string com o email do cliente)

//Logout do impersonar cliente window.cc.customerLogout()

(Retorna true se fez logout, retorna false se n√£o havia cliente impersonado)

Acesso às giftlist por ID

Quando o usuário tem uma giftlist (lista de casamento, lista de presente), a barrra de televendas antiga trazia os IDs destas listas, que levavam diretamente à área de gestão da lista. Este recurso não está mais disponível.

As listas de compras ainda podem ser acessadas pelo menu de ‚Äúgerenciar lista‚ÄĚ, que deve ser disponibilizado em seu site naturalmente para os clientes (URL /giftlist/manage).