Que variantes do Trustbadge® existem e como faço para integrá-las na minha loja?

Antes de começar, tenha em conta o seguinte: No seguinte tutorial explicaremos todas as variantes do Trustbadge com todos os parâmetros disponíveis, bem como os passos necessários para a sua integração e configuração. O manual baseia-se neste tutorial, no qual explicamos a nossa integração padrão: Como posso integrar o Trustbadge na minha loja sem um plug-in? Por este motivo, deve realizar a integração padrão antes de iniciar este tutorial.

As variantes do Trustbadge

As variantes 'reviews' e default

trustbadge_trustmark_reviews_PT.pngtrustbadge_reviews_PT.png

Variante 'reviews' (com e sem Selo de Qualidade)

helpcenter_BILD.png

Variante default

Enquanto a variante 'reviews' mostra as estrelas de avaliação e o Selo de Qualidade, a variante default apresenta apenas o Selo de Qualidade.

Neste tutorial, iremos explicar em pormenor como pode integrar uma destas duas variantes na sua loja: Como posso integrar o Trustbadge na minha loja sem um plug-in?

Os seguintes parâmetros do código do Trustbadge permitem-lhe configurar as variantes 'reviews' e default, de acordo com as suas necessidades individuais:

'yOffset': '0', /* offset from page bottom */

Por padrão, o Trustbadge é exibido no canto inferior direito da sua loja. Pode usar o parâmetro 'yOffset' para mover o Trustbadge ao longo do eixo vertical. Para fazer isso, basta introduzir em vez de 0 o número desejado de pixels pelos quais o Trustbadge deve mover-se para cima.  Obviamente, também é possível mover o Trustbadge para baixo. Basta introduzir o valor negativo correspondente.

Por defeito, o Trustbadge é exibido com uma separação de 54 pixels da margem inferior. Por isso, não deve introduzir um valor inferior a 54 pixels para o parâmetro 'yOffset'.

'variant': 'reviews', /* default, reviews, custom, custom_reviews */

O Trustbadge existe em quatro variantes. Com o parâmetro 'variant' determina-se qual das variantes é exibida na sua loja. A variante 'reviews' é selecionada por defeito. Se preferir outra variante, substitua o valor 'reviews' na linha de código por valores como default, custom_reviews ou custom.

'disableResponsive': 'false', /* deactivate responsive behaviour */

Por defeito, o Trustbdage ajusta-se automaticamente ao tamanho do ecrã usado pelos seus clientes.  Se a largura do ecrã for de 648 pixels ou menos, o Trustbadge muda para uma variante otimizada para dispositivos móveis. Caso se mude o valor do parâmetro 'disableResponsive' de false para true, este ajuste automático é desativado. Do mesmo modo, também se mostrará nos dispositivos móveis a versão no ambiente de trabalho do Trustbadge.

'disableTrustbadge': 'false' /* deactivate trustbadge */

Com este parâmetro pode controlar se o Trustbadge é mostrado na sua loja.  Se alterar o valor do parâmetro de false para true, o Trustbadge ficará oculto. No entanto, o Trustcard continuará a aparecer na página de confirmação do pedido, através da qual os seus clientes poderão dar a sua autorização para obter um convite de avaliação e ativar a garantia.

As variantes custom e custom_reviews

helpcenter_BILD.png

A variante custom

  TB5-custom-trustmark-only_PT.pngreviews-only_PT.png

A variante custom_reviews (com e sem Selo de Qualidade)

Ao contrário das variantes 'reviews' e default, que estão colocadas no lado direito da sua loja, as variantes custom e custom_reviews podem estar localizadas de forma flexível na sua loja. Se deseja integrar uma destas duas variantes na sua loja, siga os passos descritos no guia de integração apresentado a seguir.

O seguinte guia de integração baseia-se neste tutorial. Se ainda não o fez, deve fazê-lo antes de continuar: Como posso integrar o Trustbadge na minha loja sem um plug-in?

Passo 1: Criar um elemento DIV

Para usar uma das duas variantes do Trustbadge custom e custom_reviews, deve primeiro criar um elemento DIV. Para fazer isso, copie o seguinte código HTML no sistema da sua loja onde deseja que o Trustbadge apareça. A localização pode ser no cabeçalho ou rodapé da página.

<div id="MyCustomTrustbadge" style="width:160px;height:80px"></div>

Dentro deste código HTML, tem duas opções de personalização.

Pode atribuir um novo identificador ao elemento DIV. Basta substituir o valor MyCustomTrustbadge por um nome à sua escolha. Se fizer alterações no ID aqui, não se esqueça do novo identificador que definiu. Irá precisar dele novamente no passo 3.

As propriedades width e height permitem-lhe ajustar a largura e a altura do Trustbadge. Basta substituir os valores numéricos de width (largura) e height (altura) de acordo com as suas necessidades. Note que a razão de aspeto original (largura:altura) do Trustbadge é de 2:1 na variante custom_reviews ou de 1:1 na variante custom.

Passo 2: Selecione a sua variante preferida do Trustbadge

Em seguida, vá para o plug-in ou ficheiro de modelo no qual guardou o código do Trustbadge.

Se ainda não gerou ou integrou o código do Trustbadge na sua loja, siga os passos existentes neste manual: Como posso integrar o Trustbadge na minha loja sem um plug-in?

Dentro do código do Trustbadge, use o parâmetro 'variant' para determinar que variante do Trustbadge deseja usar na sua loja. Para esse efeito, introduza custom ou custom_reviews como o valor do parâmetro. Depois de realizar estes ajustes, a linha de código deve ficar assim:

'variant': 'custom', /* reviews, default, custom, custom_reviews */

ou assim:

'variant': 'custom_reviews', /* reviews, default, custom, custom_reviews */

Passo 3: Associar o código do Trustbadge ao elemento DIV

Introduza a seguinte linha de código (se ainda não estiver incluída) no código do Trustbadge.

'customElementId': 'MyCustomTrustbadge', /* required for variants custom and custom_reviews */

O parâmetro 'customElementId' é a referência para o elemento DIV criado no passo 1 e liga-o ao seu código do Trustbadge. Se fez uma alteração de ID no passo 1, substitua o valor MyCustomTrustbadge pelo ID do elemento DIV que definiu anteriormente para este parâmetro.

A variante custom está disponível apenas para lojas com o Selo de Qualidade Trusted Shops e só está visível quando está ativo. Se o Selo de Qualidade ainda não tiver sido ativado e desejar ver uma pré-visualização do mesmo, pode fazê-lo através da consola de desenvolvimento do seu navegador. Simplemente introduza aí o comandotrustbadge.showIntegrationPlaceholder();.

Passo opcional 4: Determinar a direção de abertura do Trustbadge

O Trustbadge minimizado acompanha permanentemente os seus clientes na sua loja online. Ao clicar nele, os seus clientes podem maximizá-lo para obter mais informações sobre o Selo de Qualidade e as avaliações reunidas. Não importa onde colocou o Trustbadge na sua loja online, ele será maximizado por padrão na direção em que tiver mais espaço.

No entanto, também pode determinar para o Trustbadge uma direção fixa para a qual deva ser maximizado. Para isso, introduza (se ainda não tiver feito) a seguinte linha de código no código do Trustbadge:

'trustcardDirection': '', /* topRight, topLeft, bottomRight, bottomLeft */

Agora, defina a direção introduzindo um dos seguintes valores para o parâmetro:

'topRight' para maximizar em direção ao canto superior direito.

'topLeft' para maximizar em direção ao canto superior esquerdo.

'bottomRight' para maximizar em direção ao canto inferior direito.

'bottomLeft' para maximizar em direção ao canto inferior esquerdo.

Para maximizar em direção ao canto superior direito, após os seus ajustes, a linha de código deve ser assim:

'trustcardDirection': 'topRight', /* topRight, topLeft, bottomRight, bottomLeft */

Com isto, concluiu a integração da variante custom ou custom_reviews e agora pode verificar a exibição do Trustbadge na sua loja online.

Nota: o Trustbadge ainda aparece no canto inferior direito? Então, verifique:

  • se no parâmetro 'variant' especificou o valor custom ou custom_reviews.
  • se no parâmetro "customElementId" está definido o mesmo ID do elemento DIV criado no passo 1.
  • se definiu a altura e a largura do elemento DIV conforme descrito no passo 1.

Nestes casos, receberá mensagens com mais instruções na consola de desenvolvimento do seu navegador.

As variantes do Trustbadge floating, floating_reviews e topbar para dispositivos móveis

Naturalmente, a Trusted Shops também oferece variantes do Trustbadge para dispositivos móveis.  Elas serão exibidas por padrão, a menos que o valor 'disableResponsive' seja alterado para true nos ecrãs com uma largura de 648 pixels ou menos.

mobile-trustmark-only.png

A variante floating (flutuante) mostrada aqui é a variante padrão do Trustbadge para dispositivos móveis. Ao contrário das variantes 'reviews' e default, esta é exibida por padrão no canto inferior esquerdo da sua loja. Além disso, mostra apenas o Selo de Qualidade.

Se também deseja mostrar as estrelas de avaliação, tem duas opções:

  • A variante floating_reviews: À semelhança da variante floating (flutuante), esta também é exibida por padrão no canto inferior esquerdo da sua loja online. No entanto, ao contrário da variante floating, as estrelas de avaliação também são exibidas nesta variante.

mobile-trustmark_reviews.png

  • A variante topbar: Esta variante é uma barra exibida sobre o cabeçalho da sua loja e contém o Selo de Qualidade e informações sobre as avaliações.

trustbadge-mobile-topbar_PT.jpg

Para configurar a versão móvel do Trustbadge, copie a seguinte linha de código e cole-a debaixo do parâmetro 'variant” no código do seu Trustbadge: 

'responsive': {'variant':'floating', 'position':'left', 'yOffset':'0'},

Dentro deste parâmetro, tem três opções de configuração:

  • O valor que introduzir para 'variant' irá determinar que variante do Trustbadge deseja exibir para ecrãs com menos de 648 pixels de largura. As variantes floating e floating_reviews estão disponíveis, bem como a variante topbar. Introduza a variante que prefere como valor em 'variant'.
  • As variantes floating e floating_reviews não estão fixas na margem esquerda da sua loja. O valor introduzido para 'position' define a posição horizontal destas duas variantes. Além do valor predefinido 'left', também pode selecionar 'center' para um posicionamento central e 'right' para posicioná-lo na margem direita. Por outro lado, na variante topbar, não se pode ajustar a posição horizontal porque a barra se expande ao longo de toda a largura do ecrã.
  • Para as variantes floating e floating_reviews, a posição vertical também pode ser ajustada. Isto é feito através do valor para 'yOffset'. Basta substituir o 0 pelo número de pixels que deseja, para mover o Trustbadge móvel para cima. Para a variante topbar, a posição vertical também não pode ser personalizada. A variante está fixa na margem superior do ecrã.

Parâmetros adicionais

Posicionamento flexível do Trustcard (checkout personalizado)

Naturalmente, também pode colocar livremente o Trustcard na página de confirmação do pedido. Esta configuração não está ligada às variantes custom e custom_reviews, mas também pode ser usada com as variantes 'reviews' e default. Simplesmente siga as instruções apresentadas abaixo.

Passo 1: Criar um elemento DIV na página de confirmação do pedido

Em primeiro lugar, precisa criar um elemento DIV em vez da página de confirmação do pedido onde o Trustcard deve aparecer. Para isso, introduza a seguinte linha de código no lugar indicado:

<div id="customCheckoutDiv"></div>

O ID predefinido do elemento DIV é customCheckoutDiv. Obviamente, é possível substituir este identificador por um nome à sua escolha. Neste caso, lembre-se de usar este identificador no código do Trustbadge no seguinte passo.

Passo 2: Associar o código do Trustbadge ao elemento DIV

No seu código Trustbadge, introduza abaixo de 'variant' a seguinte linha de código:

'customCheckoutElementId': 'customCheckoutDiv',

O parâmetro 'customCheckoutElementId' é a referência para o elemento DIV criado no passo 1 e liga-o ao seu código do Trustbadge. Se fez uma mudança de ID no passo 1, substitua o valor customCheckoutDiv pelo ID do elemento DIV que definiu para este parâmetro.

Assim, posiciona com sucesso o Trustcard no lugar que selecionou. Agora verifique a configuração, fazendo um pedido de teste na sua loja. Se o Trustcard aparecer na posição desejada, isso significa que concluiu a integração com sucesso.

 

 


Este artigo foi útil?

Utilizadores que acharam útil: 2 de 4