Como adicionar o botão de bate-papo da Apple Business ao seu site WordPress

Publicados: 2021-03-01

Apple Message é um recurso que permite que os webmasters adicionem o botão de bate-papo comercial e o botão de telefone / chamada a seus sites. É muito útil e conveniente porque os usuários podem contatar os proprietários do site diretamente para pedir ajuda. Portanto, como proprietário de um site, você definitivamente deve adicionar o botão de bate-papo comercial ao seu site WordPress para aumentar a experiência do usuário.

Índice ocultar
  1. 1. Etapa 1: inscreva-se no bate-papo comercial
  2. 2. Etapa 2: Adicionar a Biblioteca Javascript
    1. 2.1. Método 1: edite o código no arquivo do tema
    2. 2.2. Método 2: usando o plugin Slim SEO
  3. 3. Etapa 3: Exibir o botão de bate-papo comercial na posição desejada
  4. 4. Últimas Palavras

Durante a implementação, você precisa usar algum código HTML, por isso é relativamente difícil para quem não entende de tecnologia. Mas não se preocupe, pois iremos orientá-lo passo a passo neste processo.

Nota : O botão de bate-papo comercial está disponível apenas em dispositivos Apple. Se os usuários não usarem esses dispositivos, o botão ficará oculto.

Etapa 1: inscreva-se no bate-papo empresarial

Primeiro, vá para a página Apple Business Register e inscreva-se no Business Chat com seu Apple ID. É muito fácil, então não vou entrar em detalhes.

vá para a página Apple Business Register e inscreva-se no Business Chat com seu Apple ID

Agora, você já tem seu próprio Business Chat ID. Salve este ID em algum lugar porque você precisará dele na próxima etapa.

Etapa 2: Adicionar a Biblioteca Javascript

Em seguida, você deve adicionar a Biblioteca Javascript para exibir o botão Business Chat no site. Existem dois métodos para fazer isso:

Método 1: edite o código no arquivo do tema

Encontre as marcas <head></head> ou </body> em seu arquivo de tema. Suas localizações serão diferentes dependendo do tema. Por exemplo, estou usando o tema Justread, então a tag <head><head> está no arquivo header.php e a tag </body> no arquivo footer.php .

Depois de encontrar a tag acima, adicione este código antes da tag </body> ou na tag <head><head> :

 <script src = "https://static.cdn-apple.com/businesschat/start-chat-button/2/index.js"> </script>

Método 2: usando o plugin Slim SEO

Além de editar o código no arquivo de tema, você pode usar o plugin Slim SEO para adicionar o código sem ir para o arquivo de tema e procurar pelas tags <head><head> e </body> .

Slim SEO é totalmente gratuito, então você pode encontrá-lo facilmente no wordpress.org. No Painel de administração , vá para Plug - ins > Adicionar novo e instale e ative o plug-in normalmente.

Slim SEO - Plugin de SEO para WordPress rápido e automatizado Slim SEO - Fast & Automated WordPress SEO Plugin

Autor (es): eLightUp

Versão Atual: 3.11.1

Última atualização: 16 de novembro de 2021

slim-seo.3.11.1.zip

92% Classificações 10.000+ Instalações WP 4.5+ Requer

Depois disso, vá para Configurações > SEO Slim e adicione o código acima às seções Código do cabeçalho ou Código do corpo .

use o plugin Slim SEO para adicionar o código para exibir o botão de bate-papo de negócios da Apple

E não se esqueça de clicar em Salvar .

Além disso, Slim SEO tem muitos outros recursos úteis para ajudá-lo a otimizar automaticamente sites WordPress para SEO. Você pode aprender mais sobre esses recursos aqui.

Etapa 3: Exibir o botão de bate-papo comercial na posição desejada

Nesta etapa final, você precisa exibir o botão Business Chat na área de widget desejada. Isso pode ser feito adicionando algum código HTML ao widget. O código HTML deve ter a seguinte estrutura:

 <div class = "apple-class-name" apple-attribute-name> </div>

Eu faço um exemplo com um atributo na forma de data-apple-business-id . Você se lembra do ID obtido na etapa 1? Agora é a hora de usá-lo. Minha ID é ca0db090 e quero adicionar o botão de bate-papo em um banner de container-style , então minha tag <div> é:

 <div class = "apple-business-chat-banner-container" data-apple-business-> </div>

Observe que o atributo data-apple-business-id é obrigatório. É usado para especificar o proprietário do Business Chat ID e enviar suas mensagens para eles.

Além disso, existem muitas outras classes e atributos que você pode usar para o código HTML. Você pode encontrar as classes e atributos mais populares na lista abaixo:

Aulas para exibir botões de chat ou chamada:

  • apple-business-chat-banner-container : exibe os botões de chat e chamada
  • apple-business-chat-message-container : exibir apenas o botão de bate-papo
  • apple-business-chat-phone-container : exibir apenas o botão de chamada
  • etc

Atributos para personalizar a exibição dos botões de chat / chamada (cores, fontes, tamanho, ...)

  • data-apple-banner-font-family : escolha uma fonte da família para o botão de call-to-action
  • data-apple-banner-icon-background-color : escolha a cor de fundo (o círculo) do ícone
  • data-apple-banner-icon-color : escolha as cores dos botões de chat e chamada
  • Etc.

Atributos relacionados à interação entre clientes e proprietários de sites:

  • data-apple-business-group-id : determina o departamento que recebe as chamadas / mensagens. Por exemplo, você pode atribuir a ID dos departamentos de “Atendimento ao cliente” ou “Suporte técnico” a este atributo.
  • Data-apple-business-phone : digite o número de telefone que os usuários usam para entrar em contato com você se não puderem bater papo. Caso você não adicione este atributo, o botão Chamar ficará oculto.
  • Etc.

Além disso, você pode encontrar todos os atributos e classes da Apple aqui.

Depois de obter as tags <div> necessárias, adicione-as à posição desejada usando o editor de HTML. Por exemplo, desejo exibir o botão Business Chat em um widget no rodapé do tema Justread e aqui está a maneira de fazer isso.

No Painel de administração , vá para Aparência > Widget , escolha o widget HTML personalizado e, em seguida, escolha exibir o widget no rodapé.

exibir o widget no rodapé do site WordPress

Em seguida, insira o seguinte código no widget:

 <div>
	class = "apple-business-chat-banner-container"
	data-apple-business-
	data-apple-business-phone = "0987725475"
	data-apple-banner-cta = "Tem alguma dúvida? Podemos ajudar."
	data-apple-banner-context = "Converse com um de nossos profissionais para obter sua oferta para iPhone Xs."
	data-apple-banner-scale = "1"
	data-apple-banner-background-color = "rgb (27, 63, 104)"
	data-apple-banner-text-color = "rgb (255, 255, 255)"
	data-apple-banner-icon-background-color = "rgb (255, 255, 255)"
	data-apple-banner-icon-color = "rgba (0, 210, 143, 0.3)"> </div>

Use o código para inserir o botão de bate-papo comercial

Por fim, clique em Salvar .

Terminamos de exibir o botão Business Chat no rodapé do site WordPress. De agora em diante, os usuários da Apple verão o botão Business Chat exibido no rodapé da seguinte forma:

Exiba o botão Business Chat no rodapé do site WordPress.

Você pode definir o estilo do botão e exibi-lo em outras posições da mesma forma com o código, classes e atributos acima. Experimente e mostre-nos na seção de comentários!

Últimas palavras

Usar o código para adicionar o botão Business Chat ao site WordPress pode ser bastante difícil para iniciantes em WordPress. Mas se você seguir este tutorial à risca, com certeza funcionará. Depois de ter o botão Business Chat em seu site, não se esqueça de responder às chamadas e mensagens dos clientes. Isso ajudará a construir a confiança entre os clientes e o proprietário do site, melhorando assim sua marca e aumentando a conversão.

Além de adicionar o botão de bate-papo comercial, você também pode adicionar o botão de bate-papo ao vivo e o botão de bate-papo do cliente do Facebook ao seu site WordPress. Esses recursos ajudam você a responder às perguntas dos clientes com mais rapidez.