Como posso adaptar a apresentação do Trustbadge® nos dispositivos móveis?

Segundo um estudo da Bitkom, 50% dos clientes alemães (de ambos os sexos) compram através de um dispositivo móvel – a tendência é crescente.  Para que estejam idealmente preparados para esta tendência, a Trusted Shops oferece mais possibilidades de apresentação do Trustbadge® nos dispositivos móveis, que é exibido na vista de loja online de modo harmonioso.

No artigo a seguir, apresentamos-lhe as diferentes variantes. Além disso, explicamos-lhe como pode integrá-las na sua loja.

A variante Floating

custom-tb.pngMobile_custom_device_TB.png

Se os ecrãs forem pequenos, por exemplo, de smartphones e tablets, o Trustbadge é apresentado, por defeito, na variante Floating. A variante Floating mantém o selo de qualidade sempre à vista dos clientes. Assim, não há uma grande área de sobreposição da loja, nem é ocupado um grande espaço valioso do cabeçalho. Ao fazer scroll, o Trustbadge desaparece automaticamente e só reaparece quando o Utilizador faz scroll para cima. Através do seu smartphone, poderá visualizar esta variante móvel na nossa Demoshop.

Poderá ajustar a posição e a apresentação do Trustbadge pelo parâmetro "responsive" no âmbito da sua configuração do Trustbadge. Explicamos-lhe, nos próximos pontos, exatamente o que tem de fazer para este efeito.

Veja como pode ajustar a variante Floating na posição horizontal

A variante Floating do Trustbadge aparece, por defeito, no canto inferior esquerdo do ecrã do dispositivo móvel. No entanto, poderá também colocar o Trustbadge na posição central ou no canto inferior direito.

Para tal, abra a sua configuração atual do Trustbadge e verifique se o parâmetro "responsive" já faz parte do código. Neste caso, deverá encontrar a seguinte linha de código na sua configuração do Trustbadge:

'responsive': {'variant': 'floating'},

Assim que encontrar a linha de código acima na sua configuração do Trustbadge, substitua-a pela seguinte linha de código:

'responsive': {'variant':'floating', 'position':'right'},

Certifique-se de que copia para o código a vírgula no fim da linha de código. Caso contrário, o Trustbadge poderá não ser corretamente exibido.

Se o parâmetro "responsive" ainda não fizer parte da sua configuração do Trustbadge, terá de inseri-lo adicionalmente no código. Para tal, crie sob a linha

_tsConfig = {

uma nova linha de código e insira a seguinte linha de código neste local:

'responsive': {'variant':'floating', 'position':'right'},

Com o valor 'right' indicado para a posição nesta linha de código, o Trustbadge é exibido no canto inferior direito do ecrã do dispositivo móvel. Se quiser colocar o Trustbadge na posição central da parte inferior, mude o valor 'right' para 'center'. Se quiser mudar o valor para 'left' , o Trustbadge volta a ser exibido no canto inferior esquerdo.

Veja como pode ajustar a variante Floating na posição vertical

Tem também a possibilidade de configurar individualmente o Trustbadge a nível de posicionamento vertical. Para tal, faça como fez para ajustar na posição horizontal e verifique se o parâmetro "responsive" já faz parte da sua configuração do Trustbadge.

Em seguida, complete ou substitua, respetivamente, o parâmetro pela seguinte linha de código:

'responsive': {'variant':'floating', 'position':'right', 'yOffset':'150'},

Certifique-se de que copia para o código a vírgula no fim da linha de código. Caso contrário, o Trustbadge poderá não ser corretamente exibido.

Com base no valor 'yOffset', poderá especificar em quantos píxeis deve o Trustbadge ser movido para cima. Na linha de código acima estão predefinidos 150 píxeis. Agora, tem de ajustar este valor aos requisitos individuais da sua loja.

Na linha de código acima, a posição horizontal está definida pelo valor 'right' . Portanto, ao utilizar esta linha de código, o Trustbadge é exibido no canto inferior direito. Se preferir posicionar o Trustbadge no canto inferior esquerdo ou ao centro, mude o valor 'right' para 'left' para a esquerda ou 'center' para o centro.

Mostrar as estrelas de avaliação dentro da variante Floating

Por defeito, na variante Floating, só é exibido o selo de qualidade. No entanto, tem também a possibilidade de apresentar, no ecrã do dispositivo móvel, um Trustbadge com estrelas de avaliação. Se quiser fazê-lo, substitua, no parâmetro "responsive", o valor 'floating' por 'floating_reviews'.

Se o parâmetro "responsive" ainda não fizer parte da sua configuração do Trustbadge, tem de criar primeiro sob a linha

_tsConfig = {

uma nova linha de código e inserir a seguinte linha de código neste local:

'responsive': {'variant': 'floating_reviews'},

Certifique-se de que copia para o código a vírgula no fim da linha de código. Caso contrário, o Trustbadge poderá não ser corretamente exibido.

Se quiser mudar adicionalmente a posição do Trustbadge, leia os pontos acima a respeito do posicionamento horizontal e vertical da variante Floating.

A variante Topbar

trustbadge-mobile-topbar_PT.jpg

A par da variante Floating, pode também apresentar o Trustbadge como Topbar. Trata-se de uma barra, que é exibida sobre o cabeçalho da loja e que contém tanto o selo de qualidade, como as informações de avaliação. Esta forma de apresentação esteve disponível, por defeito, até inícios de março de 2020.

Veja como pode apresentar o Trustbadge como Topbar

Se quiser apresentar o Trustbadge na sua loja como Topbar, substitua, no parâmetro "responsive", o valor 'floating' por 'topbar'.

Se o parâmetro "responsive" ainda não fizer parte da sua configuração do Trustbadge, tem de criar primeiro sob a linha

_tsConfig = {

uma nova linha de código e inserir a seguinte linha de código neste local:

'responsive': {'variant': 'topbar'},      

Certifique-se de que copia para o código a vírgula no fim da linha de código. Caso contrário, o Trustbadge poderá não ser corretamente exibido.

Como o Trustbadge, na variante Topbar, é sempre exibido a toda a largura, não tem de adequar o posicionamento individualmente.

Tenha em atenção o facto de, futuramente, virmos a suspender o suporte técnico para a variante Topbar. A partir de agora, apenas a variante Floating estará à disposição.

As variantes personalizadas para dispositivos móveis

Similarmente à visualização no desktop, também tem a opção de colocar o Trustbadge em qualquer lugar na sua loja para visualização em dispositivos móveis. Para o fazer, utilize uma das duas variantes personalizadas, «custom» ou «custom_reviews».

helpcenter_BILD.png

A variante «custom»

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

A variante «custom-reviews» (com ou sem selo de qualidade)

Este artigo explica como integrar as variantes personalizadas do Trustbadge para visualização no desktop: Que variantes do Trustbadge® existem e como faço para integrá-las na minha loja?

Com a ajuda do parâmetro ‘responsive’ e de um elemento DIV, pode integrar uma das duas variantes personalizadas na sua loja para visualização em dispositivos móveis. Simplesmente, siga as instruções abaixo.

Desta forma, poderá colocar o seu Trustbadge num local diferente em relação à versão de desktop, se desejar.

Passo 1: Crie um elemento DIV

Para poder utilizar uma das duas variantes de Trustbadge, «custom» e «custom_reviews», tem de criar, em primeiro lugar, um elemento DIV. Para o fazer, copie o seguinte código HTML para a posição no seu sistema de loja onde o Trustbadge deve ser visualizado. Opções possíveis seriam, por exemplo, o cabeçalho ou rodapé.

<div id="myMobileCustomTrustbadge" style=”width:100px;height:50px"></div>

Pode utilizar as propriedades de largura e altura para ajustar a altura e a largura do Trustbadge. Para o fazer, simplesmente substitua os valores para a largura e altura de acordo com as suas necessidades. Tenha em atenção o rácio de aspeto original 2 : 1 (largura : altura) do Trustbadge na variante «custom_reviews» e 1 : 1 na variante «custom».

Passo 2: Associe o elemento DIV à configuração do Trustbadge

Para que o Trustbadge apareça onde pretende, tem de associar, agora, o elemento DIV criado no passo 1 à configuração do seu Trustbadge existente. Para o fazer, em primeiro lugar, abra a configuração do Trustbadge e verifique se o parâmetro ’responsive’ já faz parte do código. Se estiver incluído, deverá encontrar a seguinte linha de código na configuração do seu Trustbadge:

'responsive': {'variant': 'floating'},

Se tiver encontrado a linha de código acima na configuração do seu Trustbadge, substitua-a pela seguinte linha de código:

'responsive': {'variant': 'custom', 'customElementId': 'myMobileCustomTrustbadge'},
Com esta linha de código, ativa a variante ‘custom’. No entanto, se preferir utilizar a variante ‘custom_reviews’, tem de substituir o valor 'custom' na propriedade 'variant' por 'custom_reviews'.

Se não encontrar o parâmetro ’responsive’ na configuração do seu Trustbadge, terá de o criar. Para fazê-lo, crie abaixo da linha uma nova linha de código e insira o código abaixo.

_tsConfig = {

Este artigo foi útil?

Utilizadores que acharam útil: 8 de 12