¿Todavía no has integrado el Trustbadge? Entonces continua al siguiente enlace: Integra a Trusted Shops en tu tienda y comprueba si tenemos algún plugin disponible para el software de tu tienda online, en caso contrario realiza la integración estándar siguiendo estos pasos: ¿Cómo puedo integrar el Trustbadge® en mi tienda sin un plugin?
En el artículo enlazado arriba (¿Cómo puedo integrar el Trustbadge® en mi tienda sin un plugin? ) encontrarás el código del Trustbadge, que es la base para todos los ajustes descritos en el siguiente texto.
Dentro de la integración estándar el Trustbadge® está por defecto configurado de la siguiente manera:
- El Trustbadge muestra tus estrellas de valoración recopiladas y, tras la certificación, tu Sello de Calidad.
- El Trustbadge se muestra en la vista de escritorio en el lado derecho de la pantalla y en la vista móvil en el lado izquierdo de la pantalla.
- El Trustbadge se muestra en la vista de escritorio a 54 píxeles y en la vista móvil a 10 píxeles por encima del borde inferior de la pantalla.
Obviamente puedes adaptar la configuración a tus requisitos individuales.
Los miembros nuevos solo pueden realizar ajustes limitados en el Trustbadge:
- Puedes colocarlo en el borde derecho o izquierdo de la pantalla.
- Puedes desplazarlo hacia arriba o hacia abajo.
¿Quieres realizar más ajustes? A continuación, espera hasta que hayas obtenido tu primera valoración o hayas recibido el Sello de Calidad. A continuación, tendrás a tu disposición todas las opciones de ajuste descritas en este artículo.
En este artículo te explicamos cómo a través del código del Trustbadge® puedes...
- ... modificar la visualización del Trustbadge.
- ... colocar el Trustbadge en otro lugar de tu página web.
- ... ocultar temporalmente el Trustbadge en tu página web.
¿Cómo puedo cambiar la visualización del Trustbadge?
Dentro de la integración estándar, el Trustbadge muestra tus estrellas de valoración recopiladas y, tras la certificación, tu Sello de Calidad.
(Variante de escritorio) (Variante móvil)
Con la ayuda del código del Trustbadge, tienes cuatro posibilidades para modificar la visualización del Trustbadge:
- Puedes ocultar las estrellas de valoración recopiladas y mostrar solo tu Sello de Calidad.
(Variante de escritorio) (Variante móvil) - Puedes utilizar el modo oscuro del Trustbadge.
(Variante de escritorio) (Variante móvil) - También puedes utilizar la variante de escritorio del Trustbadge en la vista móvil de tu página web.
- En la vista móvil puedes utilizar la variante de barra superior del Trustbadge.
Ocultar las estrellas de valoración en la vista de escritorio
- Dentro del código del Trustbadge encontrarás la siguiente línea de código:
data-desktop-disable-reviews="false"
- Sustituye esa línea de código por la siguiente:
data-desktop-disable-reviews="true"
De este modo, habrás ocultado correctamente las estrellas de valoración en la vista de escritorio.
Ocultar las estrellas de valoración en la vista móvil
- Dentro del código del Trustbadge encontrarás la siguiente línea de código:
data-mobile-disable-reviews="false"
- Sustituye esa línea de código por la siguiente:
data-mobile-disable-reviews="true"
De este modo, habrás ocultado correctamente las estrellas de valoración en la vista móvil.
Uso del modo oscuro del Trustbadge
- Dentro del código del Trustbadge encontrarás la siguiente línea de código:
data-color-scheme="light"
El ajuste del esquema de colores es un parámetro opcional. Si no encuentras la línea de código mencionada anteriormente en tu código del Trustbadge, puedes añadirlo tú mismo.
- Sustituye la línea de código por una de las siguientes:
- Si quieres que el Trustbadge se muestre siempre en modo oscuro:data-color-scheme="dark"
- Si la configuración del modo oscuro de tu cliente determina si el Trustbadge se muestra en modo oscuro:data-color-scheme="os-default"
Utilizar la variante de escritorio del Trustbadge en la vista móvil
- Dentro del código del Trustbadge encontrarás la siguiente línea de código:
data-disable-mobile="false"
- Sustituye esa línea de código por la siguiente:
data-disable-mobile="true"
De este modo, utilizarás la variante de escritorio del Trustbadge también en la vista móvil.
Utilizar la variante de barra superior del Trustbadge en la vista móvil
- Dentro del código del Trustbadge encontrarás la siguiente línea de código:
data-mobile-enable-topbar="false"
- Sustituye esa línea de código por la siguiente:
data-mobile-enable-topbar="true"
De este modo, en la vista móvil utilizarás la variante de barra superior del Trustbadge.
La variante de barra superior del Trustbadge está colocada de forma fija en el borde superior de la pantalla. No puedes cambiar este posicionamiento.
¿Cómo puedo colocar el Trustbadge en otro lugar?
El código del Trustbadge te ofrece la posibilidad de colocar el Trustbadge de forma independiente en diferentes lugares de tu página web en la vista de escritorio y en la vista móvil. Puedes...
... mover el Trustbadge horizontalmente hacia la izquierda o hacia la derecha.
... desplazar el Trustbadge móvil verticalmente hacia arriba o hacia abajo.
¿Buscas más flexibilidad en cuanto al posicionamiento? Con la variante personalizada del Trustbadge, tienes la posibilidad de colocar el Trustbadge de forma totalmente flexible en cualquier lugar de tu página web.
Cambiar el posicionamiento del Trustbadge en la vista de escritorio
En la vista de escritorio, puedes mover el Trustbadge tanto horizontalmente, del borde derecho al izquierdo de la pantalla, como verticalmente hacia arriba o hacia abajo.
Colocar el Trustbadge en la vista de escritorio en el borde izquierdo de la pantalla
En la configuración estándar, el Trustbadge está colocado en el borde derecho de la pantalla en la vista de escritorio. Con el siguiente ajuste de código puedes posicionar el Trustbadge en el borde izquierdo de la pantalla.
- Dentro del código del Trustbadge encontrarás la siguiente línea de código:
data-desktop-position="right"
- Sustituye esa línea de código por la siguiente:
data-desktop-position="left"
De esta forma, habrás colocado el Trustbadge correctamente en el borde izquierdo de la pantalla.
Desplazar el Trustbadge hacia arriba o hacia abajo en la vista de escritorio
En la configuración estándar, el Trustbadge se encuentra en la vista de escritorio 54 píxeles por encima del borde inferior de la pantalla. Con la siguiente adaptación del código puedes desplazar el Trustbadge hacia arriba o hacia abajo.
- Dentro del código del Trustbadge encontrarás la siguiente línea de código:
data-desktop-y-offset="0"
- Sustituye el 0 por el número de píxeles que debe desplazarse el Trustbadge hacia arriba o hacia abajo.
Dos ejemplos:
- ¿Deseas desplazar el Trustbadge 20 píxeles hacia arriba? Entonces utiliza la siguiente línea de código:
data-desktop-y-offset="20"
- ¿Deseas desplazar el Trustbadge hacia abajo? Entonces utiliza valores negativos. Para desplazar el Trustbadge 20 píxeles hacia abajo, utiliza la siguiente línea de código:
data-desktop-y-offset="-20"
Si el valor es -54, el Trustbadge se coloca sin distancia en el borde inferior de la pantalla. Por lo tanto, te recomendamos utilizar únicamente valores hasta -44.
Con ello, habrás desplazado correctamente el Trustbadge hacia abajo o hacia arriba.
Cambiar el posicionamiento del Trustbadge en la vista móvil
En la vista móvil, puedes mover el Trustbadge tanto horizontalmente, del borde izquierdo al derecho o al centro de la pantalla, como verticalmente hacia arriba o hacia abajo.
Colocar el Trustbadge en la vista móvil en el borde derecho de la pantalla o en el centro
En la configuración estándar, el Trustbadge se encuentra en el borde izquierdo de la pantalla. Con el siguiente ajuste de código puedes posicionar el Trustbadge en el borde derecho de la pantalla o en el centro.
- Dentro del código del Trustbadge encontrarás la siguiente línea de código:
data-mobile-position="left"
- Sustituye la línea de código por una de las siguientes:
- Si quieres colocar el Trustbadge en el lado derecho:data-mobile-position="right"
- Si quieres colocar el Trustbadge en el centro:data-mobile-position="center"
De esta forma, habrás colocado el Trustbadge correctamente en el borde derecho de la pantalla o en el centro.
Desplazar el Trustbadge hacia arriba o hacia abajo en la vista móvil
En la configuración estándar, el Trustbadge se encuentra en la vista móvil 10 píxeles por encima del borde inferior de la pantalla. Con la siguiente adaptación del código puedes desplazar el Trustbadge hacia arriba o hacia abajo.
- Dentro del código del Trustbadge encontrarás la siguiente línea de código:
data-mobile-y-offset="0"
- Sustituye el 0 por el número de píxeles que debe desplazarse el Trustbadge hacia arriba o hacia abajo.
Dos ejemplos:
- ¿Deseas desplazar el Trustbadge 5 píxeles hacia arriba? Entonces utiliza la siguiente línea de código:
data-mobile-y-offset="5"
- ¿Deseas desplazar el Trustbadge hacia abajo? Entonces utiliza valores negativos. Para desplazar el Trustbadge 5 píxeles hacia abajo, utiliza la siguiente línea de código:
data-mobile-y-offset="-5"
Utiliza únicamente valores de hasta -10.
Con ello, habrás desplazado correctamente el Trustbadge hacia abajo o hacia arriba.
Colocar el Trustbadge de forma flexible en tu página web
Además de la variante estándar del Trustbadge descrita hasta ahora, también puedes integrar la variante custom (personalizada) en tu sitio web.
La variante personalizada se diferencia de la variante estándar en tres puntos:
- Su aspecto es diferente al de la variante estándar. Aquí puedes ver la variante personalizada:
(con estrellas de valoración) (sin estrellas de valoración) - Puedes colocar la variante personalizada en tu sitio web de forma totalmente flexible.
- Puedes modificar el tamaño de la variante personalizada.
Puedes colocar la variante personalizada del Trustbadge en diferentes lugares de tu página web en la vista de escritorio y en la vista móvil de forma independiente.
Colocar el Trustbadge de forma flexible en la vista de escritorio
De forma predeterminada, la variante personalizada tiene una anchura de 156 píxeles y una altura de 78 píxeles. A continuación te explicamos cómo cambiar el tamaño del Trustbadge en la vista de escritorio. ¿Estás de acuerdo con los valores estándar mencionados anteriormente? Entonces omite los dos pasos siguientes y continúa con el paso 3.
- Dentro del código del Trustbadge encontrarás la siguiente línea de código:
data-desktop-custom-width="156"
- Sustituye el 156 por el número de píxeles que quieres establecer como anchura del Trustbadge.
El número de píxeles que puedes seleccionar aquí depende de si has ocultado las estrellas de valoración en la vista de escritorio.
- ¿Has ocultado las estrellas de valoración? Entonces selecciona un número de píxeles entre 32 y 58.
- ¿No has ocultado las estrellas de valoración? Entonces selecciona un número de píxeles entre 100 y 500.
El número de píxeles para la altura del Trustbadge resulta automáticamente del ancho que hayas seleccionado. No tienes que establecerlo tú.
- Dentro del código del Trustbadge encontrarás la siguiente línea de código:
data-desktop-enable-custom="false"
- Sustituye esa línea de código por la siguiente:
data-desktop-enable-custom="true"
- Abre el código fuente de tu página web.
- Coloca la siguiente línea de código en la posición de tu página web en la que debe aparecer el Trustbadge:
<div id="trustbadgeCustomContainer"></div>
Las posibles posiciones serían, por ejemplo, la cabecera o el pie de página.
De este modo, habrás integrado correctamente el Trustbadge en el lugar que hayas elegido en tu página web.
Colocar el Trustbadge de forma flexible en la vista móvil
De forma predeterminada, la variante personalizada en la vista móvil tiene una anchura de 156 píxeles y una altura de 78 píxeles. A continuación te explicamos cómo cambiar el tamaño del Trustbadge en la vista móvil. ¿Estás de acuerdo con los valores estándar mencionados anteriormente? Entonces omite los dos pasos siguientes y continúa con el paso 3.
- Dentro del código del Trustbadge encontrarás la siguiente línea de código:
data-mobile-custom-width="156"
- Sustituye el 156 por el número de píxeles que quieres establecer como anchura del Trustbadge.
El número de píxeles que puedes seleccionar aquí depende de si has ocultado las estrellas de valoración en la vista móvil.
- ¿Has ocultado las estrellas de valoración? Entonces selecciona un número de píxeles entre 32 y 58.
- ¿No has ocultado las estrellas de valoración? Entonces selecciona un número de píxeles entre 100 y 500.
El número de píxeles para la altura del Trustbadge resulta automáticamente del ancho que hayas seleccionado. No tienes que establecerlo tú.
- Dentro del código del Trustbadge encontrarás la siguiente línea de código:
data-mobile-enable-custom="false"
- Sustituye esa línea de código por la siguiente:
data-mobile-enable-custom="true"
- Abre el código fuente de tu página web.
- Coloca la siguiente línea de código en la posición de tu página web en la que debe aparecer el Trustbadge:
<div id="trustbadgeCustomMobileContainer"></div>
Las posibles posiciones serían, por ejemplo, la cabecera o el pie de página.
De este modo, habrás integrado correctamente el Trustbadge en el lugar que hayas elegido en tu página web.
¿Cómo puedo ocultar el Trustbadge?
Si quieres ocultar el Trustbadge, tienes dos opciones:
- Puedes activar el modo Fade Out (desaparición progresiva) en la vista de escritorio. En este modo, el Trustbadge se mostrará en la parte superior de cada página. Sin embargo, desaparecerá lentamente cuando tus clientes se desplacen hacia abajo. Volverá a aparecer cuando tus clientes vuelvan a la parte superior de la página.
En la vista móvil, el modo Fade Out (desaparición progresiva) está automáticamente activado. No obstante, es posible desactivarlo en esta vista.
- Puedes ocultar el Trustbadge completamente. En ese caso, el Trustbadge ya no aparecerá en tu página web. Solo se abrirá la Trustcard después de haber realizado el pedido para que tu clientela pueda asegurar su pedido mediante la Protección al Comprador.
Si ocultas por completo el Trustbadge, no se mostrará ni en la vista de escritorio ni en la de móvil.
Activar el modo Fade Out en la vista de escritorio
- Dentro del código del Trustbadge encontrarás la siguiente línea de código:
data-desktop-enable-fadeout="false"
- Sustituye esa línea de código por la siguiente:
data-desktop-enable-fadeout="true"
De este modo habrás activado correctamente el modo Fade Out en la vista de escritorio. El Trustbadge desaparecerá lentamente en cuanto tus clientes se desplacen hacia abajo por la página web.
Desactivar el modo Fade Out en la vista móvil
- Dentro del código del Trustbadge encontrarás la siguiente línea de código:
data-mobile-enable-fadeout="true"
- Sustituye esa línea de código por la siguiente:
data-mobile-enable-fadeout="false"
De este modo habrás activado correctamente el modo Fade Out en la vista móvil. Ahora el Trustbadge ya no desaparecerá lentamente en cuanto tus clientes se desplacen hacia abajo por la página web.
Ocultar el Trustbadge
Gracias al Trustbadge tus clientes se sentirán seguros en tu página web. Si ocultas el Trustbadge, pones en peligro tu conversión y tu volumen de ventas. Por lo tanto, te recomendamos que, en todo caso, desactives el Trustbadge solo temporalmente.
- Dentro del código del Trustbadge encontrarás la siguiente línea de código:
data-disable-trustbadge="false"
- Sustituye esa línea de código por la siguiente:
data-disable-trustbadge="true"
De este modo, habrás ocultado correctamente el Trustbadge tanto en la vista de escritorio como en la de móvil.
¿Cómo puedo colocar la Trustcard en otro lugar?
Después del pago, la Trustcard aparece como ventana emergente en la página de confirmación del pedido de tu tienda. Con la Trustcard, tus clientes pueden dar su consentimiento para recibir una invitación de valoración y/o asegurar su pedido con la Protección al Comprador.
¿No quieres que la Trustcard se abra como una ventana emergente? A continuación, puedes asignarle un puesto fijo en la página de confirmación del pedido.
- Abre el archivo modelo de la página de confirmación del pedido.
- Copia la siguiente línea de código en el portapapeles:
<div id="trustbadgeCustomCheckoutContainer"></div>
- Introduce la línea de código en la posición del archivo modelo donde debe mostrarse la Trustcard.
Has colocado correctamente la Trustcard en una posición fija en la página de confirmación del pedido.