¿Qué variantes del Trustbadge® existen y cómo las integro en mi tienda?

Antes de empezar, ten en cuenta lo siguiente: En el siguiente tutorial, explicaremos todas las variantes del Trustbadge con todos los parámetros disponibles, así como los pasos necesarios para su integración y configuración. El manual se basa en este tutorial, en el que explicamos nuestra integración estándar: ¿Cómo puedo integrar el Trustbadge en mi tienda sin un plugin? Por este motivo, debes realizar la integración estándar antes de comenzar con este tutorial.

Las variantes del Trustbadge

Las variantes 'reviews' y default

trustbadge_trustmark_reviews_ES.pngtrustbadge_reviews_ES.png

Variante 'reviews' (con y sin Sello de Calidad)

trustbadge_no_reviews_ES.png

Variante default

Mientras que la variante 'reviews' muestra las estrellas de valoración y el Sello de Calidad, la variante default presenta únicamente el Sello de Calidad.

En este tutorial explicaremos en detalle cómo puedes integrar una de estas dos variantes en tu tienda: ¿Cómo puedo integrar el Trustbadge en mi tienda sin un plugin?

Los siguientes parámetros del código del Trustbadge te permiten configurar las variantes 'reviews' y default, de acuerdo con tus necesidades individuales:

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

Por defecto, el Trustbadge se muestra en la esquina inferior derecha de tu tienda. Puedes usar el parámetro 'yOffset' para mover el Trustbadge a lo largo del eje vertical. Para ello, simplemente introduce en lugardel 0 el número deseado de píxeles por los que el Trustbadge debe desplazarse hacia arriba.  Por supuesto, también es posible desplazar el Trustbadge hacia abajo. Simplemente introduce el valor negativo correspondiente.

Por defecto, el Trustbadge se muestra con una separación de 54 píxeles del borde inferior. Por ello, no debes introducir un valor inferior a -54 píxeles para el parámetro 'yOffset'.
'variant': 'reviews', /* default, reviews, custom, custom_reviews */

El Trustbadge existe en cuatro variantes. Con el parámetro 'variant' se determina cuál de las variantes se muestra en tu tienda. La variante 'reviews' se selecciona por defecto. Si prefieres otra variante, sustituye el valor 'reviews' en la línea del código por valores como default, custom_reviews o custom.

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

Por defecto, el Trustbdage se ajusta automáticamente al tamaño de la pantalla utilizada por tus clientes.  Si el ancho de la pantalla es de 648 píxeles o menos, el Trustbadge cambia a una variante optimizada para dispositivos móviles. Si se cambia el valor del parámetro 'disableResponsive' de false a true, se desactiva este ajuste automático. Del mismo modo, también se mostrará en los dispositivos móviles la versión de escritorio del Trustbadge.

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

Con este parámetro puedes controlar si el Trustbadge se muestra en tu tienda.  Si cambias el valor del parámetro de false a true, el Trustbadge se ocultará. No obstante, la Trustcard seguirá apareciendo en la página de confirmación del pedido, a través de la cual tus clientes podrán dar su consentimiento para obtener una invitación de valoración y activar la garantía.

Las variantes custom y custom_reviews

helpcenter_BILD.png

La variante custom

TB5-custom-trustmark-only_ES.png   reviews-only_ES.png

La variante custom_reviews (con y sin Sello de Calidad)

A diferencia de las variantes 'reviews' y default, que están fijadas en la parte derecha de tu tienda, las variantes custom y custom_reviews pueden ubicarse flexiblemente en tu tienda. Si deseas integrar una de estas dos variantes en tu tienda, sigue los pasos de la siguiente guía de integración.

La siguiente guía de integración se basa en este tutorial. Si aún no lo has hecho, debes hacerlo antes de continuar: ¿Cómo puedo integrar el Trustbadge en mi tienda sin un plugin?

Paso 1: Crear un elemento DIV

Para usar una de las dos variantes del Trustbadge custom y custom_reviews, debes crear primero un elemento DIV. Para ello, copia el siguiente código HTML en el sistema de tu tienda donde quieras que aparezca el Trustbadge. La ubicación puede ser en el encabezado o en el pie de página.

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

Dentro de este código HTML, tienes dos opciones de personalización.

  1. Puedes asignar un nuevo identificador para el elemento DIV. Simplemente reemplaza el valor MyCustomTrustbadge por un nombre de tu elección. Si aquí realizas cambios en el ID, recuerda bien el nuevo identificador que has definido. Lo necesitarás de nuevo en el paso 3.
  2. Las propiedades width y height permiten ajustar la anchura y altura del Trustbadge. Simplemente reemplaza los valores numéricos de width (anchura) y height (altura) según tus necesidades. Ten en cuenta que la relación de aspecto original (anchura:altura) del Trustbadge es de 2:1 en la variante custom_reviews o de 1:1 en la variante custom.

Paso 2: Selecciona tu variante preferida del Trustbadge

A continuación, dirígete al plugin o al archivo de plantilla en el que has guardado el código del Trustbadge.

Si aún no has generado ni integrado el código del Trustbadge en tu tienda, sigue los pasos de este manual: ¿Cómo puedo integrar el Trustbadge en mi tienda sin un plugin?

Dentro del código del Trustbadge, usa el parámetro 'variant' para determinar qué variante del Trustbadge quieres usar en tu tienda. Para ello, introduce custom o custom_reviews como valor del parámetro. Después de realizar estos ajustes, la línea de código debe verse así:

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

o así:

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

Paso 3: Vincular el código del Trustbadge y el elemento DIV

Inserta la siguiente línea de código (si no está ya incluida) en el código del Trustbadge.

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

El parámetro 'customElementId' es la referencia para el elemento DIV creado en el paso 1 y lo vincula a tu código del Trustbadge. Si has hecho un cambio de ID en el paso 1, sustituye el valor MyCustomTrustbadge por el ID del elemento DIV que has definido anteriormente para este parámetro.

La variante custom solo está disponible para las tiendas con el Sello de Calidad de Trusted Shops y solo es visible cuando este está activo. Si el Sello de Calidad aún no ha sido activado y quieres obtener una vista previa, puedes hacerlo a través de la consola de desarrollo de tu navegador. Simplemente introduce allí el comando trustbadge.showIntegrationPlaceholder();.

Paso opcional 4: Determinar la dirección de apertura del Trustbadge

El Trustbadge minimizado es el acompañante permanente de tus clientes en tu tienda online. Al hacer clic en él, tus clientes pueden maximizarlo para obtener más información sobre el Sello de Calidad y las valoraciones recopiladas. No importa dónde hayas ubicado el Trustbadge en tu tienda online, este se maximizará por defecto en la dirección en la que tengas más espacio.

Sin embargo, también puedes determinar para el Trustbadge una dirección fija en la que deba maximizarse. Para ello, inserta (si no lo has hecho ya) la siguiente línea de código en el código del Trustbadge:

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

Ahora, establece la dirección introduciendo uno de los siguientes valores para el parámetro:

  • 'topRight' para maximizar hacia la parte superior derecha.
  • 'topLeft' para maximizar hacia la parte superior izquierda.
  • 'bottomRight' para maximizar hacia la parte inferior derecha.
  • 'bottomLeft' para maximizar hacia la parte inferior izquierda.

Para maximizar hacia la parte superior derecha, después de tus ajustes, la línea de código debe verse así:

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

Con esto has completado la integración de la variante custom o custom_reviews y ahora puedes comprobar la visualización del Trustbadge en tu tienda online.

Nota: ¿Sigue apareciendo el Trustbadge en la esquina inferior derecha? Entonces, por favor comprueba:

  • si en el parámetro 'variant' has especificado el valor custom o custom_reviews.
  • si en el parámetro "customElementId" está definido el mismo ID del elemento DIV creado el en paso 1..
  • si has definido la altura y la anchura del elemento DIV como se ha descrito en el paso 1.

En estos casos, en la consola de desarrollo de tu navegador recibirás mensajes con más instrucciones.

Las variantes del Trustbadge floating, floating_reviews y topbar para dispositivos móviles

Naturalmente, Trusted Shops también ofrece variantes del Trustbadge para dispositivos móviles.  Estas se mostrarán por defecto, a menos que se cambie el valor 'disableResponsive' a true en pantallas, con un ancho de 648 píxeles o menos.

mobile-trustmark-only.png

La variante floating (flotante) que se muestra aquí es la variante estándar del Trustbadge para dispositivos móviles. A diferencia de las variantes 'reviews' y default, esta se muestra por defecto en la esquina inferior izquierda de tu tienda.Además, solo muestra el Sello de Calidad.

Si también quieres mostrar las estrellas de valoración, tienes dos opciones:

  • La variante floating_reviews: Al igual que la variante floating (flotante), esta también se muestra por defecto en la esquina inferior izquierda de tu tienda online. Sin embargo, a diferencia de la variante floating, en esta también se muestran las estrellas de valoración.
    mobile-trustmark_reviews.png
  • La variante topbar: Esta variante es una barra que se muestra sobre el encabezado de tu tienda y contiene tanto el Sello de Calidad como información sobre las valoraciones.
    trustbadge-mobile-topbar_ES.jpg

Para configurar la versión móvil del Trustbadge, copia la siguiente línea de código y pégala debajo del parámetro 'variant” en el código de tu Trustbadge:

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

Dentro de este parámetro tienes tres opciones de configuración:

  • El valor que introduzcas para 'variant' determina qué variante del Trustbadge quieres mostrar para pantallas con un ancho inferior a 648 píxeles. Están disponibles las variantes floating y floating_reviews, así como la variante topbar. Introduce la variante que prefieras como valor en 'variant'.
  • Las variantes floating y floating_reviews no están fijadas en el borde izquierdo de tu tienda. El valor que se introduce para 'position' define la posición horizontal de estas dos variantes. Además del valor predeterminado 'left', también puedes seleccionar 'center' para un posicionamiento central y 'right' para posicionarlo en el borde derecho. En la variante topbar, en cambio, no se puede ajustar la posición horizontal porque la barra se extiende a lo largo de todo el ancho de la pantalla.
  • Para las variantes floating y floating_reviews, también se puede ajustar la posición vertical.. Esto se hace a través del valor para 'yOffset'. Simplemente sustituye el 0 por el número que quieras de píxeles, para desplazar así lel Trustbadge móvil hacia arriba. Para la variante topbar tampoco se puede personalizar la posición vertical. La variante está fija en el borde superior de la pantalla.

Parámetros adicionales

Posicionamiento flexible de la Trustcard (checkout personalizado)

Naturalmente, puedes también ubicar libremente la Trustcard en la página de confirmación del pedido. Esta configuración no está vinculada a las variantes custom y custom_reviews, sino que también puede utilizarse con las variantes 'reviews' y default. Simplemente sigue las instrucciones que se indican a continuación.

Paso 1: Crear un elemento DIV en la página de confirmación del pedido

En primer lugar, debes crear un elemento DIV en el lugar de la página de confirmación del pedido donde deba aparecer la Trustcard. Simplemente inserta la siguiente línea de código en el lugar indicado:

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

El ID predeterminado del elemento DIV es customCheckoutDiv. Por supuesto, puedes sustituir este identificador por un nombre de tu elección. En este caso, recuerda usar este identificador en el código del Trustbadge en el siguiente paso.

Paso 2: Vincular el código del Trustbadge y el elemento DIV

En tu código del Trustbadge, inserta debajo de 'variant' la siguiente línea de código:

'customCheckoutElementId': 'customCheckoutDiv',

El parámetro 'customCheckoutElementId' es la referencia para el elemento DIV creado en el paso 1 y lo vincula a tu código del Trustbadge. Si has hecho un cambio de ID en el paso 1, sustituye el valor customCheckoutDiv por el ID del elemento DIV que has definido para este parámetro.

Así posicionas con éxito la Trustcard en el lugar que has seleccionado. Ahora comprueba la configuración haciendo un pedido de prueba en tu tienda. Si la Trustcard aparece en la posición deseada, habrás concluido la integración con éxito.


¿Ha sido útil el artículo?

Usuarios a los que les pareció útil: 2 de 4