Você quer adicionar um botão flutuante do WhatsApp, Telegram ou até mesmo do Instagram
em suas páginas do GreatPages e não sabe como? Nesse vídeo eu vou te mostrar um passo a passo na prática de como fazer isso
Dentro do GreatPages existem diversos recursos muito interessantes para se explorar e um
deles é a possibilidade de adicionar códigos personalizados às suas páginas. Nesse vídeo vamos usar desse recurso para adicionar um botão flutuante para contato
direto às suas redes. Isso pode aumentar a visibilidade da sua rede social e também facilitar a comunicação
dos seus visitantes para que eles interajam com você de forma mais fácil
Meu nome é Clayton Lemes e se você é novo por aqui, seja muito bem vindo
A primeira coisa que a gente vai fazer é acessar e entender de forma breve como funcionam
os repositórios e o GitHub. Esse aqui é o meu perfil no GitHub, eu vou deixar o link na descrição para você ter
um acesso mais rápido e a gente vai entender como funciona aqui esse código e futuros
códigos que eu vou estar disponibilizando ao longo do tempo. Por enquanto existe somente esse código liberado que é o de redes sociais, é o botão de float
para redes sociais dentro da plataforma do GreatPages. Atualmente eu já possuo outros códigos no repositório, eles estão hoje de forma privada
e eu vou liberando eles aos poucos de forma gradativa. Pois existem muitos códigos aqui, mas eu preciso validar e entender se estão funcionando
corretamente para que eu possa liberar para todo mundo. Um ponto muito importante de informar é que eu não sou um programador, minha atividade
principal não é a programação e a escolha de centralizar tudo isso, todos esses códigos
dentro do GitHub é justamente por isso. Para que se houver outros programadores que queiram contribuir e melhorar os códigos
ou encontrar um erro, encontrar um bug ou uma forma melhor de fazer o código que est�
disponível, você pode utilizar essa plataforma para contribuir e melhorar os códigos que
estão disponíveis aqui. Então dessa forma a gente ajuda todo mundo que quer utilizar esses códigos dentro da
plataforma do GreatPages de forma totalmente gratuita. Dito isso a gente vai para a parte prática, que é realmente a instalação desse código
Eu fixei ele aqui, mas como eu disse no futuro vão existir outros códigos, muitos outros códigos
Então como que a gente faz para acessar todos esses códigos? Aqui é o meu perfil principal, é onde vai reunir todos os meus códigos, inclusive repositórios
que nem são referentes ao Great, mas eu criei uma página dedicada somente para os códigos
do Great e você vai poder acessar ela aqui. Aqui embaixo tem a GreatLab, que é uma página onde vão conter todos os códigos que eu vou
disponibilizando do GreatPages. Atualmente a gente só tem um, como eu disse eu vou liberando aos poucos e a gente vai
acessar esses códigos todos a partir daqui. Então você vai clicar no repositório que a gente vai utilizar nesse vídeo e aqui dentro
a gente tem todas as informações necessárias para instalar o código. Num primeiro momento pode ser que pareça muito confuso, mas depois que você entende
ela é bem simples de utilizar. Então aqui, esse primeiro bloco aqui vão estar todos os arquivos, isso aqui não interessa
muito porque sempre eu vou colocar o código na parte de baixo, código para você simplesmente copiar
Então eu vou explicar como funciona. No primeiro momento aqui tem uma breve descrição do que é esse código, do que ele se trata
o que ele faz. Aqui eu coloquei um aviso bem importante que a gente vai ver depois, mas esse código não
é possível adicionar mais de um por página, então ele foi criado para ter somente um
instalado na página. Você pode até instalar os três, mas só um deles pode estar habilitado
Mas o ideal é que somente um esteja instalado. Esse é o primeiro aviso, eu vou colocar sempre avisos, vou explicar da forma mais
fácil possível aqui. Inclusive vai ter esse vídeo aqui também para explicar
Então abaixo aqui eu coloquei um preview para você identificar e ver como esse código funciona
Então essa daqui é a animação, vai ter uma para cada um, no caso Telegram e do Instagram
Então vão ter todas aqui. E para utilizar é muito simples. Antes de a gente passar para a parte de utilização, eu vou explicar algumas outras coisas
Esse código aqui, uma outra vantagem dele estar dentro do GitHub é com relação a atualizações
Eu acabei de falar de programadores que podem contribuir com isso. Então qualquer um pode, qualquer um programador ou até quem não é programador pode entrar
aqui e sugerir alterações. E todas as alterações ou melhorias que a gente for fazer nesse código, caso voc�
tenha uma conta que esteja logado, no caso aqui eu não estou logado
Então eu recomendo que você crie uma conta no GitHub e acompanhe o repositório
Você pode tanto me seguir quanto seguir somente o repositório. Dessa forma qualquer alteração que a gente fizer aqui, quem estiver contribuindo junto
você vai receber. Então vamos supor que esse código tenha algum bug, aconteceu alguma atualização no Great
Pages que precisou modificar e parou de funcionar esse código antigo. A gente vai corrigir ele e vai lançar a atualização aqui
Então quando a gente fizer isso, caso você tenha as notificações habilitadas aqui, voc�
automaticamente vai receber no seu e-mail que esse repositório sofreu uma alteração
e vai vir e identificar o que foi que alterou e qual foi a melhoria que aconteceu
Eu vou passar aqui para minha outra conta logada para te mostrar como que funciona
Quando você está logado, habilita outras opções como dar estrela, favoritar esse
repositório ou até mesmo ativar a notificação de todas as atividades. Como que você faz isso
Você vai vir aqui, muito provavelmente vai estar marcada essa primeira opção, simplesmente
você vai marcar a segunda. Dessa forma qualquer alteração que a gente fizer e qualquer melhoria que fizer, voc�
vai receber uma notificação no seu e-mail ou aplicativo. Feito isso, eu vou voltar aqui para a outra conta, que é basicamente a que você vai ter
Caso você não tenha logado, você pode utilizar também. Então você vai ver dessa forma aqui
Então vamos finalmente utilizar esse código. Eu fiz um overview um pouco mais detalhado aqui, falei um pouco sobre o GitHub e outras
coisas, mas esse é um ponto muito importante para pessoas que não mexem com código
Eu sei muito bem como é isso. Então é muito importante que eu explique, mesmo que de forma básica, esses pontos e
nesse primeiro vídeo que eu estou falando sobre um código personalizado, para que voc�
entenda a partir daqui, muita coisa que vai surgir a partir dos próximos vídeos
Então agora, o que você vai precisar fazer? Você vai escolher um dos três
Por enquanto a gente só tem três. Se você tiver uma sugestão de algum outro, você pode estar comentando aqui embaixo no
vídeo, na descrição, sobre algum outro que você gostaria que a gente colocasse aqui
que eu colocasse. Então você pode, por exemplo, não tem o Twitter, que é o X, não tem o Facebook também
mas são porque é dificilmente solicitado. Então os mais solicitados são esses, o Telegram, o WhatsApp em primeiro lugar e o Instagram
Mas você pode sugerir e solicitar aqui nos comentários que a gente pode estar implementando
que eu posso estar colocando aqui esses novos, caso exista uma necessidade
Então você vai escolher um dos três aqui. Eu vou escolher o mais utilizado, que é o WhatsApp
E tudo que você vai precisar fazer é clicar nesse botão de copiar, que está aqui do lado. Copiar
Já copiou. E a alteração, a única alteração obrigatória que você vai precisar fazer é o seu número
de telefone. Só isso. Mais nada. Então agora a gente vai passar para o Great Pages
Eu vou abrir aqui a minha conta do Great Pages e vou adicionar uma nova página
Eu vou escolher um dos templates aqui. Vou escolher esse aqui. Vou dar um nome para ele
É WhatsApp. Vamos colocar assim. Só para exemplificar. Vou clicar aqui. E eu já estou com o meu template aqui
O que eu vou precisar fazer? Vou clicar nas configurações aqui em cima e vou escolher a opção JavaScript e CSS
Vai abrir essa caixa central aqui e eu vou clicar em adicionar código
Eu vou dar um nome para esse código. Vai ser WhatsApp. E como eu já copiei lá do GitHub, a única coisa que eu vou precisar fazer aqui é dar
um Ctrl V. Pronto. Agora a única alteração obrigatória, como eu disse lá no GitHub, é a alteração do
seu número de telefone. O seu número de telefone está aqui. Você vai colocar o número de telefone com o ddd e o seu número
E vai clicar em salvar. Simples assim. A partir disso, você clicou em salvar e já está funcionando
Como é que eu faço para ver se está funcionando, se deu tudo certo? Eu vou clicar aqui em pré-visualizar
Vai carregar um pouco aqui o preview e pronto. Já está aparecendo aqui
Então aqui já está o nosso botão. Eu não consigo no preview, por questões de segurança, clicar para ver se está sendo redirecionado
Para isso, você vai precisar publicar essa página. Mas se você fez tudo certo, só trocou ali o seu número de telefone, perfeito
Vai estar funcionando certinho. Não vai ter problema nenhum. Só que é só um redirecionador para o link do seu WhatsApp
Feito isso, tudo que era necessário, obrigatório para você instalar o código ou instalar
esse botão flutuante dentro da sua página, é isso. Ah, mas eu gostaria de colocar uma mensagem personalizada no meu link do WhatsApp
Como que eu faço isso? Nesse caso, não basta só colocar o número de telefone
Você vai precisar colocar a mensagem junto. Eu vou deixar na descrição do vídeo o link para esse site, que é super simples de utilizar
Você vai colocar o seu número de telefone com o DDD, obviamente
E vai colocar sua mensagem aqui. Depois disso, você vai clicar em gerar meu link
Quando o link for gerado, basta você copiar o link aqui. E a gente vai aqui no JavaScript, WhatsApp
E aí, aqui, eu tenho que substituir todo. Tirar todo o link do WhatsApp com o número e substituir por esse novo link dentro das
aspas aqui. Depois disso, você vai clicar em salvar, fechar. E aí, quando o usuário clicar nesse link, ele automaticamente vai ser redirecionado
já com a mensagem que você definiu lá naquele site. Os outros dois códigos, de Telegram e de Instagram, são a mesma coisa
Eu até vou fazer rapidamente aqui os outros dois, só pra gente ver como funciona
Lembra que aqui em cima a gente tem o aviso que somente um modelo pode ir por página
Se a gente instalar dois, existe até a possibilidade de a gente fazer isso, que não pode os dois
estarem habilitados. Então eu vou pegar o Telegram aqui. O Telegram, você vai notar que é a mesma coisa
Eu escrevi aqui, Telegram link. Ele é um pouquinho diferente, mas a única coisa que você vai precisar fazer é colar
o link do seu Telegram aqui nesse campo, entre as aspas. Então eu copiei aqui do Telegram, vou voltar pro Grade, vou clicar no editor aqui
Então eu vou vir aqui no JavaScript CSS e vou adicionar um novo código
Esse aqui eu vou colocar como Telegram. Telegram. Eu vou colar o código aqui e simplesmente vou vir aqui e vou trocar o link pra o link
do meu Telegram. Aqui mantém tudo igual e eu clico em salvar
Eu não posso manter os dois iguais, os dois habilitados. Então o que eu vou fazer
Eu vou desabilitar o do WhatsApp e vou fechar. Vou clicar em preview
E pronto. O link do Telegram tá ativo. A mesma coisa vai ser pra o do Instagram
Vamos lá? Eu vou fazer assim. Vou copiar, voltei pro meu editor, vou colocar ele aqui e vou adicionar o Instagram
Vou colar ele aqui. O link tá praticamente no mesmo lugar. Link do Instagram. Salvei
Vou desabilitar os outros dois e vou fechar. Vamos pro preview. Prontinho
O do Instagram também tá aqui. Então é basicamente isso. Você só precisa fazer esses passos pra instalar um desses códigos, um desses botões flutuantes
dentro da sua página. Então agora eu vou pra um passo um pouco além. A gente vai customizar esse ícone de acordo com a nossa página
Muitas vezes as pessoas ou você quer que esse ícone ou esse botão flutuante fique
mais de acordo com o layout da sua página. Como que a gente faz isso
Eu vou voltar aqui pros nossos códigos. Eu vou copiar o do Telegram, por exemplo
Copiei o do Telegram. Eu vou abrir um editor de texto. Vou colar aqui o editor
Pode ser qualquer editor. É só pra facilitar a nossa visualização de cada coisa
Então aqui no link do Telegram, nesse botão do Telegram, você vai precisar alterar esse
link aqui. Vai colar o seu link do Telegram. E caso você queira alterar as cores, eu já facilitei isso também
Então aqui abaixo de root você tem a cor do ícone, a cor do background, a cor do background
quando passar o mouse por cima e a cor do pulse que é a animação
O que a gente vai fazer pra deixar de acordo com o nosso layout? Eu vou lá na minha página e eu vou escolher algumas cores
Eu vou escolher a cor... Vou clicar em editar aqui pra facilitar pra gente pegar a cor
Eu vou pegar essa cor aqui da letra e vou colocar no fundo
Eu vou copiar ela aqui. CTRL C. Vou voltar no meu editor e vou colocar essa cor de fundo
Coloquei aqui. De... De... De hover a gente pode botar... Deixa eu ver
Vamos colocar só pra gente ver bem claramente o hover. Vamos colocar esse verde aqui
E vou vir e vou colar ele aqui. O pulse eu acho que a gente coloca..
Vamos colocar a mesma cor do background né? Só pra gente ver
E o ícone, o ícone a gente pode manter branco. A gente pode manter branco
Uma outra coisa que dá pra fazer aqui é a questão de se quer na esquerda ou na direita
A única coisa que você vai precisar fazer é vir aqui onde está right e trocar pra left
Um left. Opa. T. Left. Pronto. Ele já vai pra esquerda. Então agora que a gente tem esse código aqui
Vamos supor que eu já coloquei no meu link lá. Eu vou copiar ele. Vou dar um CTRL A
CTRL C. Vou lá no grate. Vou habilitar o telegram aqui. Vou desabilitar isso aqui
E vou colar o meu código modificado. Vou clicar em salvar. Fechei
Vamos previsualizar. Vamos ver como é que ficou. Ele vai tá na esquerda
Olha lá. Ele vai tá na esquerda com a cor que eu defini como principal e quando eu passo o mouse
por cima tá a outra cor. Então essa é uma forma básica de alterar as cores ali pra caso você queira que fique
mais de acordo com o seu layout. O do Instagram ele é um pouquinho diferente
Ele tem um degradê. Mas a base é a mesma. Então vai pegar de uma cor e vai pra outra só botando vírgula vai adicionando cores ali
É super simples. Eu fiz da forma mais fácil possível. E segue sempre a mesma lógica
A cor do ícone. A cor do gradiente aqui no caso. Gradiente normal que é sem passar o mouse por cima
E do gradiente hover quando passo o mouse por cima. É basicamente isso
Se você gostou do conteúdo desse vídeo. Não se esqueça de agradecer
Ou se ficou com alguma dúvida referente a esse assunto. Ou tem alguma sugestão pra um novo vídeo ou conteúdo
Deixe um comentário aqui embaixo. Até a próxima