6 simples códigos HTML para adicionar Depoimentos em seu Site

O app HTML do Wix é uma mão na roda para as vezes que não queremos usar os aplicativos do App Market, seja por serem a maioria em inglês, seja por sua versão grátis ser muito limitada e a versão paga ser muito cara ou seja por simplesmente não existir um app compatível com nossas pretensões.

A solução é buscar ajuda no bloco HTML que, apesar de exigir mais esforço e dar mais trabalho, acaba sendo uma saída prática e gratuita que muitas vezes pode se sair melhor do que o esperado. Claro que isso não é regra e vai depender de cada caso.

Depoimentos em HTML

Depoimentos (ou testemunhos) são uma forma muito significativa de mostrar a reputação de sua empresa. É uma das áreas mais visitadas e valorizadas dentro de um site, pois é responsável por transmitir a opinião dos outros clientes sobre os produtos ou serviços de uma empresa, e como sabemos, as pessoas se importam bastante com o que as outras estão falando ou fazendo.

Já mostrei uma opção de adicionar depoimentos aqui, mas essa foi pelo uso do App Market.

O que temos agora são depoimentos que podem ser adicionador por códigos HTML. Siga lendo para ver como fazer:

1. Veja os exemplos nesta página de um site criado no Wix.

2. Clique no botão “Quero este“, ao lado do bloco escolhido.

3. Ao clicar, será aberta uma janela do site CODEPEN, este site permite a edição de códigos HTML, CSS e Javascript e a visualização dos resultados em tempo real, uma ferramenta simplesmente incrível.

Ao clicar, ele abrirá exatamente no código do Depoimento. A primeira coisa a fazer é mudar o modo de exibição da janela, para facilitar a manipulação dos códigos.

Para isso, vá até o canto inferior direito da tela e clique na primeira opção.

Editando

Feita essa alteração, vamos à edição do código. Você deve ficar atento aos textos onde estão os depoimentos do exemplo, pois serão nesta parte que você irá mudar pelos depoimentos reais dos seus clientes.

4. Para isso, role o código até chegar ao bloco de textos e insira um depoimento.

5. Dê um nome para o autor do testemunho e escolha um identificador, pode ser ‘Cliente’, ‘Empresa X’ etc.

6. Quando terminar a edição, clique dentro do editor de código e aperte a tecla Ctrl+A, para selecionar todo o código.

Agora basta copiar e colá-lo através do app HTML do Wix. Para saber mais sobre essa etapa, clique.

Depoimentos com imagens

Nos códigos onde há imagens, será necessário que você insira a URL da imagem do autor, para que ela apareça no depoimento. Essa imagem pode ser do perfil ou da logomarca da empresa do depoente.

Se a imagem que pretende inserir não tiver na internet, você terá que enviá-la. Você pode enviar até para o Facebook, o importante é ter a URL da mesma.

No meu caso, eu armazeno minhas imagens em uma página privada no Google+, para que fiquem hospedadas no próprio servidor do Google, já que se trata de um servidor seguro e com ótima velocidade.

O Google dá gratuitamente até 15Gb de espaço de armazenamento para cada conta. Você pode enviar a imagem através do seu perfil pessoal do Google+, porém, para impedir que todos a vejam, selecione um círculo ou pessoa que deseja mostrar a mesma. (obs: isso não influenciará na exibição pública da imagem no site).

Clique em “Compartilhar” para ter acesso à URL da imagem.

7. Com a imagem enviada e privada, clique sobre ela e depois, com a imagem aberta, clique com o botão direito do mouse e selecione “Copiar URL da imagem“.

Inserindo a URL da imagem no código

8. Com a URL copiada, insira entre as aspas no código <img src=” “>:

Você verá o efeito imediatamente no campo ao lado. Faça o mesmo procedimento para os outros campos do bloco de depoimento.

Observação importante: o depoimento estilo 4, funciona perfeitamente se forem inseridos até 4 linhas de textos. Se algum depoimento tiver mais do que 4 linhas, crie uma página dedicada a depoimentos e um link “leia mais“. Observe a imagem abaixo.

Depoimentos com links

Caso você tenha uma página que contenha todos os depoimentos de seus clientes, você poderá criar links que levem até ela, no seu bloco de depoimentos em HTML.

Você pode ver um exemplo disso no depoimento estilo 4, onde no 2º depoimento há um link de continuação.

9. Para inserir links, basta substituir o link entre aspas dentro do campo <a href=””>, dentro do código.

10. Se você não quiser links dentro do depoimento, basta selecionar e apagar toda a linha que começa em “<a” até “</a>“.

Mas se quiser links em cada depoimento, basta copiar e colar essa linha acima.

No bloco de depoimentos estilo 6, basta seguir o mesmo processo para o estilo 4.

Atenção: você poderá mudar as cores de fundo, das fontes e tipos de fontes de qualquer bloco HTML, mas é necessário que tenha conhecimento em CSS.

É isso. Uma maneira simples de inserir widgets de depoimentos gratuitos em seu site.

Qualquer dúvida ou erro, comente abaixo que faço o possível para ajudar.

6 comentários em “6 simples códigos HTML para adicionar Depoimentos em seu Site”

  1. Olá, Gabriel

    No meu site, tenho uma página para os depoimentos, onde pago por mês R$ 10,00 para usar o app comments. Neste app posso cancelar comentários indesejáveis.
    Pergunto: É possível cancelar comentários através do comentário em HTML.

    Você acha vantagem o COMMENTS OU o comentário em HTML?

    Agradeço pela atenção, e aguardo resposta.

    Responder
    • Oi Alexsandra,
      O Comments é vantagem por ser mais simples e não exigir conhecimento algum em programação e ter flexibilidade de seus clientes mesmos inserirem os comentários. Mas se o que você quer é Depoimentos, você pode usar via Apps ou algum desses códigos desse tutorial.
      Abraço!

      Responder
  2. Boa tarde!
    Escolhi o nº 4 onde os depoimentos são flutuantes, estou tentando adicionar mais um depoimento pois no código é feito com 3, e não estou conseguindo, como faço para adicionar um quarto depoimento?
    Muito Obrigado

    Responder
    • Olá Weber,
      É necessário reprogramar todo o código para que um 4º depoimento seja adicionado. Como destaquei no tutorial, é preciso entender de programação para alterar a estrutura e funcionamento do código, o que é diferente de se mudar 2 ou 3 linhas para trocar a aparência, imagens e links, mas mantendo o mesmo funcionamento inicial.
      Abraço.

      Responder
  3. Olá,
    Escolhi o bloco 6 mas gostaria de retirar aquele ponto (espécie de marcador) que aparece antes de cada depoimento. Onde altero no código html para retirar esse marcador?
    Obrigada

    Responder

Deixe um comentário