Como posso adaptar o Trustbadge® às minhas necessidades?

Ainda não integrou o Trustbadge? Então, faça a integração padrão antes de continuar. Este artigo irá ajudar com isso: Como posso integrar o Trustbadge® sem plug-in na minha loja?
No artigo hiperligado acima encontrará também o código Trustbadge, que constitui a base para todos os ajustes descritos no seguinte texto.

Na integração standard, o Trustbadge® estabelece as seguintes regras:

  • O Trustbadge apresenta as estrelas de avaliação que ganhou e, depois de obter com sucesso a certificação, o seu selo de qualidade.
  • O Trustbadge é apresentado na vista Desktop no lado direito do ecrã e, na vista móvel, no lado esquerdo do ecrã.
  • O Trustbadge é apresentado na vista Desktop 54 píxeis e, na vista móvel, 10 píxeis acima da margem inferior do ecrã.

Naturalmente, pode adaptar estas regras às suas necessidades individuais.

O Trustbadge para novos membros será exibido no seu site até receber a sua primeira opinião ou o selo de qualidade:
zero-reviews copy 7.png
Só são possíveis ajustes limitados no Trustbadge para novos membros:
 
A integração da variante Custom ainda não é possível neste momento.
Pretende efetuar mais ajustes? Depois, aguarde até ter recolhido a sua primeira opinião ou recebido o selo de qualidade. Todas as opções de ajuste descritas neste artigo estarão então à sua disposição.

Neste artigo, explicamos como, por meio do código Trustbadge®, …

Como posso apresentar o Trustbadge de outra forma?

Dentro da integração padrão, o Trustbadge apresenta as estrelas de avaliação que ganhou e, depois de obter com sucesso a certificação, o seu selo de qualidade.

01_PT.png02_PT.png

(variante Desktop)                                 (variante móvel)

O código Trustbadge permite-lhe alterar a apresentação do Trustbadge de quatro formas:

  • Pode ocultar as estrelas de avaliação ganhas e mostrar apenas o seu selo de qualidade.
    03_PT.png04_PT.png
    (variante Desktop)                                (variante móvel)
  • Pode utilizar o modo escuro do Trustbadge.
    PT_Trustbadge_Desktop_Floating-7.pngComma_Trustbadge_Mobile_Floating.png
    (variante Desktop)                                   (variante móvel)
  • Também pode utilizar a variante Desktop do Trustbadge na vista móvel do seu website.
  • Na vista móvel, pode utilizar a variante Topbar do Trustbadge
    05_PT.jpg

Ocultar estrelas de avaliação na vista Desktop

  1. No âmbito do código Trustbadge encontre a seguinte linha de código:
    data-desktop-disable-reviews="false"
  2. Substitua a linha de código pela seguinte linha de código:
    data-desktop-disable-reviews="true"

Desta forma, as estrelas de avaliação na vista Desktop são ocultadas com sucesso.

Ocultar estrelas de avaliação na vista móvel

  1. No âmbito do código Trustbadge encontre a seguinte linha de código:
    data-mobile-disable-reviews="false"
  2. Substitua a linha de código pela seguinte linha de código:
    data-mobile-disable-reviews="true"

Desta forma, as estrelas de avaliação na vista móvel são ocultadas com sucesso.

Utilizar o modo escuro do Trustbadge

  1. No âmbito do código Trustbadge encontre a seguinte linha de código:
    data-color-scheme="light"

A definição do esquema de cores é um parâmetro opcional. Se não encontrar a referida linha de código no seu código Trustbadge, pode adicioná-la você mesmo.

  1. Substitua a linha de código por uma das seguintes linhas de código:
    - Se pretender que o Trustbadge seja apresentado permanentemente no modo escuro:
    data-color-scheme="dark"
    - Se as definições do modo escuro do seu cliente determinarem se o Trustbadge é apresentado no modo escuro:
    data-color-scheme="os-default"

Utilizar a versão Desktop do Trustbadge na vista móvel

  1. No âmbito do código Trustbadge encontre a seguinte linha de código:
    data-disable-mobile="false"
  2. Substitua a linha de código pela seguinte linha de código:
    data-disable-mobile="true"

Assim, também utiliza a variante Desktop do Trustbadge na vista móvel.

Utilizar a variante Topbar do Trustbadge na vista móvel

  1. No âmbito do código Trustbadge encontre a seguinte linha de código:
    data-mobile-enable-topbar="false"
  2. Substitua a linha de código pela seguinte linha de código:
    data-mobile-enable-topbar="true"

Assim, na vista móvel, utiliza a variante Topbar do Trustbadge.

A variante Topbar do Trustbadge está posicionada de forma fixa na margem superior do ecrã. Não pode alterar este posicionamento.

Como posso colocar o Trustbadge noutro sítio?

O código Trustbadge oferece-lhe a possibilidade de colocar o Trustbadge na vista Desktop e na vista móvel, independentemente uma da outra, em diferentes locais do seu website. Pode optar por deslocar o Trustbadge…

… horizontalmente para a esquerda ou para a direita.

… verticalmente para cima ou para baixo.

Estas possibilidades não são suficientes para si? Com a variante Custom do Trustbadge, tem a possibilidade de colocar o Trustbadge de forma totalmente flexível em qualquer ponto do seu website.

Ajustar o localização do Trustbadge na vista Desktop

Na vista Desktop, o Trustbadge pode ser deslocado horizontalmente desde a margem direita para a margem esquerda do ecrã, bem como verticalmente para cima ou para baixo.

Colocar o Trustbadge na vista Desktop, na margem esquerda do ecrã

Por predefinição, o Trustbadge é colocado na vista Desktop, na margem direita do ecrã. Com a adaptação do código seguinte, pode posicionar o Trustbadge na margem esquerda do ecrã.

  1. No âmbito do código Trustbadge encontre a seguinte linha de código:
    data-desktop-position="right"
  2. Substitua a linha de código pela seguinte linha de código:
    data-desktop-position="left"

Desta forma, coloca o Trustbadge com sucesso na margem esquerda do ecrã.

Mover o Trustbadge para cima ou para baixo na vista Desktop

Por predefinição, o Trustbadge é colocado na vista Desktop 54 píxeis acima da margem inferior do ecrã. Com a seguinte adaptação de código pode deslocar o Trustbadge para cima ou para baixo.

  1. No âmbito do código Trustbadge encontre a seguinte linha de código:
    data-desktop-y-offset="0"
  2. Substitua o 0 pelo número de píxeis necessários para mover o Trustbadge para cima ou para baixo.

Dois exemplos:

  • Pretende mover o Trustbadge 20 píxeis para cima? Nesse caso, utilize a seguinte linha de código:
    data-desktop-y-offset="20"
  • Pretende mover o Trustbadge para baixo? Então, utilize valores negativos. Para mover o Trustbadge 20 píxeis para baixo, utilize a seguinte linha de código:
    data-desktop-y-offset="-20"

Se o valor for de -54, o Trustbadge é colocado sem distância na margem inferior do ecrã. Recomendamos que utilize apenas valores até -44.

Desta forma, o Trustbadge é deslocado com sucesso para baixo ou para cima.

Ajustar o localização do Trustbadge na vista móvel

Na vista móvel, pode deslocar o Trustbadge horizontalmente da margem esquerda para a margem direita do ecrã ou para o centro do ecrã, bem como verticalmente para cima ou para baixo.

Colocar o Trustbadge na vista móvel, na margem direita do ecrã ou no centro

Na configuração padrão, o Trustbadge encontra-se localizado na margem esquerda do ecrã. Com a adaptação do código seguinte, pode posicionar o Trustbadge na margem direita do ecrã ou no centro.

  1. No âmbito do código Trustbadge encontre a seguinte linha de código:
    data-mobile-position="left"
  2. Substitua a linha de código por uma das seguintes linhas de código:
    - Se pretender colocar o Trustbadge no lado direito:
    data-mobile-position="right"
    - Se pretender colocar o Trustbadge no centro:
    data-mobile-position="center"

Desta forma, coloca o Trustbadge com sucesso na margem direita do ecrã ou no centro.

Mover o Trustbadge para cima ou para baixo na vista móvel

Por predefinição, o Trustbadge está colocado 10 píxeis acima da margem inferior do ecrã na vista móvel. Com a seguinte adaptação de código pode deslocar o Trustbadge para cima ou para baixo.

  1. No âmbito do código Trustbadge encontre a seguinte linha de código:
    data-mobile-y-offset="0"
  2. Substitua o 0 pelo número de píxeis necessários para mover o Trustbadge para cima ou para baixo.

Dois exemplos:

  • Pretende mover o Trustbadge 5 píxeis para cima? Nesse caso, utilize a seguinte linha de código:
    data-mobile-y-offset="5"
  • Pretende mover o Trustbadge para baixo? Então, utilize valores negativos. Para mover o Trustbadge 5 píxeis para baixo, utilize a seguinte linha de código:
    data-mobile-y-offset="-5"
    Utilize aqui exclusivamente valores até -10.

Desta forma, o Trustbadge é deslocado com sucesso para baixo ou para cima.

Colocar o Trustbadge de forma flexível no seu website

Além da variante padrão do Trustbadge descrita até à data, também pode integrar a variante Custom no seu website.

A variante Custom distingue-se da variante padrão em três pontos:

  1. Tem um aspeto diferente da variante padrão. Aqui, pode ver a variante Custom:
    06_PT.png  07_PT.png
          (com estrelas de avaliação)                                               (sem estrelas de avaliação)
  2. Pode colocar a variante Custom de forma totalmente flexível no seu website.
  3. Pode alterar o tamanho da variante Custom (personalizada).

Na vista Desktop e móvel, pode colocar a variante Custom do Trustbadge em diferentes locais do seu website, de forma independente uma da outra.

Colocar o Trustbadge de forma flexível na vista Desktop

Por predefinição, a variante Custom tem uma largura de 156 píxeis e uma altura de 78 píxeis. A seguir, explicamos-lhe como pode alterar o tamanho do Trustbadge na vista Desktop. Está de acordo com os valores padrão acima mencionados? Então, ignore os dois passos seguintes e continue a partir do passo 3.

  1. No âmbito do código Trustbadge encontre a seguinte linha de código:
    data-desktop-custom-width="156"
  2. Substitua 156 pelo número de píxeis que pretende determinar como largura do Trustbadge.

O número de píxeis que pode selecionar neste ponto depende do facto de ter ocultado, ou não, as estrelas de avaliação na vista Desktop.

Ocultou as estrelas de avaliação? Então, selecione um número de píxeis entre 32 e 58.

Não ocultou as estrelas de avaliação? Então, selecione um número de píxeis entre 100 e 500.

O número de píxeis para a altura do Trustbadge resulta automaticamente da largura que selecionou. Não se destina a ser determinado por si.

  1. No âmbito do código Trustbadge encontre a seguinte linha de código:
    data-desktop-enable-custom="false"
  2. Substitua a linha de código pela seguinte linha de código:
    data-desktop-enable-custom="true"
  3. Abra o código fonte do seu website.
  4. Coloque a seguinte linha de código na posição do seu website, onde pretende que o Trustbadge apareça:
    <div id="trustbadgeCustomContainer"></div>

As posições possíveis seriam, por exemplo, o cabeçalho ou o rodapé.

Desta forma, integra com sucesso o Trustbadge no local que seleciona no seu website.

Colocar o Trustbadge de forma flexível na vista móvel

Por predefinição, a variante Custom tem na vista móvel uma largura de 156 píxeis e uma altura de 78 píxeis. A seguir, explicamos-lhe como pode alterar o tamanho do Trustbadge numa vista móvel. Está de acordo com os valores padrão acima mencionados? Então, ignore os dois passos seguintes e continue a partir do passo 3.

  1. No âmbito do código Trustbadge encontre a seguinte linha de código:
    data-mobile-custom-width="156"
  2. Substitua 156 pelo número de píxeis que pretende determinar como largura do Trustbadge.

O número de píxeis que pode selecionar neste ponto depende do facto de ter ocultado, ou não, as estrelas de avaliação na vista móvel.

  • Ocultou as estrelas de avaliação? Então, selecione um número de píxeis entre 32 e 58.
  • Não ocultou as estrelas de avaliação? Então, selecione um número de píxeis entre 100 e 500.

O número de píxeis para a altura do Trustbadge resulta automaticamente da largura que selecionou. Este não precisa de ser determinado por si.

  1. No âmbito do código Trustbadge encontre a seguinte linha de código:
    data-mobile-enable-custom="false"
  2. Substitua a linha de código pela seguinte linha de código:
    data-mobile-enable-custom="true"
  3. Abra o código fonte do seu website.
  4. Coloque a seguinte linha de código na posição do seu website, onde pretende que o Trustbadge apareça:
    <div id="trustbadgeCustomMobileContainer"></div>

As posições possíveis seriam, por exemplo, o cabeçalho ou o rodapé.

Desta forma, integra com sucesso o Trustbadge no local que seleciona no seu website.

Como posso ocultar o Trustbadge?

Se quiser ocultar o Trustbadge, tem duas possibilidades:

  • Na vista Desktop, pode ativar o modo Fade-out. Neste modo, o Trustbadge continua a ser exibido na parte superior de cada página. Contudo, irá desaparecer lentamente assim que o seu cliente deslizar para baixo. Voltará a aparecer quando o seu cliente regressar à área superior da página.

Na vista móvel, o modo Fade-out é ativado automaticamente. Contudo, é possível desativá-lo nesta vista.

  • Pode ocultar completamente o Trustbadge. Neste caso, o Trustbadge já não pode ser visto no seu website. Apenas o Trustcard é aberto após a receção do pedido, para que o seu cliente possa continuar a ter a proteção ao comprador.

Se ocultar completamente o Trustbadge, este não será exibido na vista Desktop nem na vista móvel.

Ativar o modo Fade-out na vista Desktop

  1. No âmbito do código Trustbadge encontre a seguinte linha de código:
    data-desktop-enable-fadeout="false"
  2. Substitua a linha de código pela seguinte linha de código:
    data-desktop-enable-fadeout="true"

Desta forma, ativa com sucesso o modo Fade-out na vista Desktop. O Trustbadge vai agora desaparecer lentamente assim que os seus clientes deslizarem para baixo no website.

Desativar o modo Fade-out na vista móvel

  1. No âmbito do código Trustbadge encontre a seguinte linha de código:
    data-mobile-enable-fadeout="true"
  2. Substitua a linha de código pela seguinte linha de código:
    data-mobile-enable-fadeout="false"

Desta forma, desativa com sucesso o modo Fade-out na vista móvel. O Trustbadge deixa de ser ocultado assim que os seus clientes deslizarem para baixo no website.

Ocultar Trustbadge

Um Trustbadge visível assegura que os seus clientes se sentem seguros no seu website. Ao ocultar o Trustbadge, coloca em risco a sua conversão e as suas vendas. Recomendamos que, caso opte por ocultar o Trustbadge, opte por fazê-lo apenas temporariamente.

  1. No âmbito do código Trustbadge encontre a seguinte linha de código:
    data-disable-trustbadge="false"
  2. Substitua a linha de código pela seguinte linha de código:
    data-disable-trustbadge="true"

Desta forma, o Trustbadge é ocultado com sucesso, tanto na vista Desktop como na vista móvel.

Como posso colocar o Trustcard noutro local?

Após o checkout, o Trustcard aparece como janela pop-up na página de confirmação do pedido da sua loja. Ao utilizar o Trustcard, os seus clientes podem dar autorização para receberem um convite de avaliação e/ou protegerem o seu pedido com a Proteção ao Comprador.

03_PT.png

Não quer que o Trustcard se abra como um pop up? Em seguida, pode atribuí-lo a uma posição fixa na página de confirmação do pedido.

  1. Abra o ficheiro modelo da sua página de confirmação do pedido.
Provavelmente, o ficheiro modelo será chamado finish.tpl, thankyou.php, success.phtml ou algo semelhante.
  1. Copie a seguinte linha de código para a sua área de transferência:
    <div id="trustbadgeCustomCheckoutContainer"></div>
O valor id="trustbadgeCustomCheckoutContainer" não pode ser alterado.
  1. Insira a linha de código na posição do ficheiro modelo onde o Trustcard deve aparecer.

O Trustcard foi agora colocado com sucesso numa posição fixa na página de confirmação do pedido.


Este artigo foi útil?

Utilizadores que acharam útil: 22 de 59