¿Cómo puedo integrar el Trustbadge en mi tienda sin un plugin?

Antes de empezar, ten en cuenta lo siguiente: Disponemos de plugins y manuales de integración específicos para diversas plataformas de ecommerce. Aquí encontrarás una vista general de todas las plataformas disponibles: ¿Cómo empiezo con la integración del Trustbadge®? ¿No disponemos actualmente de un manual propio para tu plataforma de ecommerce? Entonces, utiliza el siguiente tutorial e infórmanos además por correo electrónico, para que en un futuro también podamos incluir un manual específico para tu plataforma de ecommerce.

Naturalmente, puedes integrar el Trustbadge® desde el primer día de tu adhesión a Trusted Shops. Todo lo que necesitas es la URL de tu tienda o el ID de Trusted Shops que recibiste en el correo de bienvenida , así comoun poco de conocimiento de programación junto con estas instrucciones para la integración. 

Paso 1: Genera tu propio código del Trustbadge

Antes de empezar con la integración, necesitas un código individual del Trustbadge. Este garantiza que el Trustbadge, una vez integrado, muestre también información relevante para tu tienda como el Sello de Calidad o las estrellas de valoración. Aquí puedes generar el código con tu ID de Trusted Shop o la URL de tu tienda. A continuación, tu código personal del Trustbadge se generará automáticamente.

Puedes encontrar tu ID de Trusted Shops (que empieza por X...) en tu dashboard en el backend de My Trusted Shops. Para ello, incia sesión en My Trusted Shops aquí. Después de iniciar sesión, serás redirigido al dashboard. En la columna de la derecha, tus tiendas registradas en Trusted Shops aparecen con el respectivo ID de Trusted Shops.

Paso 2: Configura el código del Trustbadge según tus necesidades individuales

En el código del Trustbadge generado puedes realizar algunos ajustes para adaptar la visualización del Trustbadge a las características individuales de tu tienda. Los parámetros relevantes para ello son los que se encuentran en el apartado del código _tsConfig. A continuación, te explicamos los parámetros individuales y los posibles ajustes dentro de estos parámetros.

'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 lugar del 0 el número deseado de píxeles por los que el Trustbadge debe desplazarse hacia arriba.

Por defecto, el Trustbadge se muestra con una separación de 54 px del borde inferior. Así que si quieres mostrar el Trustbadge un poco más abajo, puedes introducir un valor negativo correspondiente. No obstante, no puede ser inferior a -54.
'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. Las cuatro variantes tienen el siguiente aspecto:

  • reviews: En esta variante se muestran tus estrellas de valoración y tu Sello de Calidad.

trustbadge_trustmark_reviews_ES.png

  • default: Esta variante solo muestra el Sello de Calidad, siempre y cuando tu tienda esté certificada.

trustbadge_no_reviews_ES.png

  • custom_reviews: Esta variante del Trustbadge muestra, al igual que en la variante reviews, tus estrellas de valoración y tu Sello de Calidad. Sin embargo, la variante custom_reviews se posiciona de forma flexible en tu tienda.

TB5-custom-trustmark-only_ES.png

  • custom: Esta variante del Trustbadge muestra, al igual que en la variante default, solo el Sello de Calidad. Sin embargo, la variante custom puede posicionarse de forma flexible en tu tienda.

custom.png

Si quieres usar una de las dos variantes custom y custom_reviews en tu tienda, es necesario realizar más ajustes en el código del Trustbadge y en la plantilla que utilices. Aquí te explicamos detalladamente los pasos necesarios: ¿Qué variantes del Trustbadge® existen y cómo las integro en mi tienda? El tutorial actual se concentra en las variantes reviews y default.
A través del parámetro ˈvariantˈse determina qué elemento representa el Trustbadge, según las configuraciones actuales de tu ID de Trusted Shops. Naturalmente, para mostrar el Sello de Calidad, tu tienda debe haber completado con éxito el proceso de certificación. Asimismo, las estrellas de valoración solo se pueden mostrar si ya has recopilado valoraciones de tienda con Trusted Shops. En este artículo te explicamos detalladamente las diferentes formas de representación: ¿Qué es el Trustbadge®?
'disableResponsive': 'false', /* deactivate responsive behaviour */

Por defecto, el Trustbadge se ajusta automáticamente al tamaño de la pantalla utilizada por tus clientes. Si el ancho de la pantalla es de 648 px 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 pueden dar su consentimiento para obtener una invitación de valoración y se les ofrece la garantía.

Paso 3: Copia el código del Trustbadge en el pie de la plantilla de tu tienda

Abre en tu servidor FTP el archivo de plantilla del pie de página que estás usando (footer.php o similar). Copia entonces todo el código que acabas de generar en el campo anterior, y posiblemente hayas configurado a continuación. Ahora inserta el código en el pie de página de la plantilla, justo antes de la etiqueta de cierre </body>. 

De este modo, el Trustbadge estará disponible en cada página de tu tienda; también, en la página de confirmación del pedido. Ya casi hemos terminado, pero nos falta algo importante. 

Paso 4: Define la transferencia de datos para la Trustcard

A través del Trustbadge puedes enviar peticiones de valoración a tus clientes y en caso de que tu tienda esté certificada, ofrecerles la garantía. Pero antes tienes que realizar algunas adaptaciones en el Trustbadge. Se ha de incluir un elemento DIV para reconocer tu página de confirmación del pedido (página de agradecimiento) y para transferir los datos necesarios del pedido. El Trustbadge® abrirá automáticamente la Trustcard para los visitantes, en ella está incluida la protección del pedido y/o el consentimiento para recibir peticiones de valoración.

website_integration_custom_es-ES.png

Los datos del pedido, necesarios para la garantía y para la solicitud de valoración se transmitirán directamente al Trustbadge desde la plantilla de tu tienda, para que los clientes no tengan que volver a escribirlos de nuevo. Para ello, inserta el código que aparece a continuación en la plantilla de la página de confirmación del pedido (finish.tpl, thankkyou.php, success.phtml o similares) y sustituye los valores marcados en negrita en el ejemplo, por las variables utilizadas en el sistema de tu tienda. El elemento DIV se rellenará dinámicamente con los datos correctos del pedido.

<div id="trustedShopsCheckout" style="display: none;">
<span id="tsCheckoutOrderNr">2020-05-21-001</span>
<span id="tsCheckoutBuyerEmail">mi.cliente@mail.es</span>
<span id="tsCheckoutOrderAmount">4005.95</span>
<span id="tsCheckoutOrderCurrency">EUR</span>
<span id="tsCheckoutOrderPaymentType">TRANSFERENCIA BANCARIA</span>
<span id="tsCheckoutOrderEstDeliveryDate">2020-05-24</span>
</div> 

A continuación, explicamos brevemente los parámetros de transferencia mostrados en el ejemplo del código para que te encargues de proporcionar los datos necesarios.

<span id="tsCheckoutOrderNr">2020-05-21-001</span>

Necesario. A través de este parámetro se transfiere el número del pedido. Este es necesario para poder asignar una valoración emitida, al proceso de pedido real. Si no se dispone de un número del pedido, también se puede transferir la hora del respectivo pedido, siempre que esta referencia sea única.

<span id="tsCheckoutBuyerEmail">cliente@mail.es</span>

Necesario. Este parámetro transmite la dirección de correo electrónico de tu cliente. Este es necesario para poder enviar a tus clientes, días después del pedido, una invitación de valoración o un correo de confirmación sobre la garantía contratada.

<span id="tsCheckoutOrderAmount">4005.95</span>

Opcional, pero necesario si tienes el Sello de Calidad. Mediante este parámetro se transfiere el importe total del pedido. Como se puede reconocer en el ejemplo 4005.95, el separador decimal es un punto. También se transfieren dos decimales.

<span id="tsCheckoutOrderCurrency">EUR</span>

Opcional, pero necesario si tienes el Sello de Calidad. Este parámetro transfiere el código de la moneda del pedido de acuerdo con la Norma ISO estándar 4217. Si solo se ofrece una moneda, también se puede introducir este valor en el código fijo.

<span id="tsCheckoutOrderPaymentType">TRANSFERENCIA BANCARIA</span>

Opcional, pero necesario si tienes el Sello de Calidad. A través de este parámetro se transfiere el método de pago utilizado. Aquí basta con una simple cadena de texto. Si el método de pago (ya) no está disponible en el momento de completar el pedido, puedes utilizar la palabra OTHER como valor codificado para este parámetro.

<span id="tsCheckoutOrderEstDeliveryDate">2020-05-24</span>

Opcional, pero necesario si se deben enviar peticiones de valoración dependiendo de la fecha de entrega prevista. Este es un parámetro que se utiliza para transferir la fecha de entrega prevista. Como se puede identificar claramente en el ejemplo 2020-05-24, se admite el formato de fecha AAAA-MM-DD.

Puesto que a través del elemento DIV se transmiten los datos dinámicos del pedido, el ejemplo del código anterior no se debe copiar tal cual en la página de confirmación del pedido. Como hemos explicado anteriormente, se deben reemplazar los valores en negrita en cada parámetro de transferencia por las correspondientes variables. Todo ello, en el lenguaje de programación utilizado por el sistema de tu tienda. En el lenguaje de programación PHP, la transferencia de la dirección de correo electrónico podría ser así, por ejemplo:

<span id="tsCheckoutBuyerEmail"><?php echo $customer_email; ?><span>

$customer_email corresponde a la dirección de correo electrónico del cliente definida en el sistema de tu tienda. Por favor consulta la documentación de tu sistema de tienda para saber la definición exacta de las variables a utilizar, ya que estas varían de un sistema a otro. Por este motivo, no podemos proporcionar ninguna información generalmente válida. Una vez que hayas personalizado el ejemplo del código anterior, puedes copiarlo - como se ha descrito anteriormente - y pegarlo en la plantilla de tu página de confirmación del pedido.

Paso 5: Prueba el Trustbadge en tu tienda

Ya puedes comprobar el funcionamiento de tu Trustbadge haciendo un pedido en tu tienda. Comprueba que al final del pedido aparezca la Trustcard representada anteriormente. En ella, el cliente podrá registrarse haciendo clic en el botón, para recibir una invitación de valoración. Si esto funciona sin problemas, has integrado con éxito el Trustbadge. A partir de ahora, tus clientes tienen la posibilidad, después de concluir la compra, de recibir un recordatorio para realizar una valoración. En cuanto tu tienda esté certificada, también se les ofrecerá la garantía a tus clientes. Comprueba además en la consola del navegador si el DIV-Container "trustedShopsCheckout" está completo y correctamente rellenado.

¿No encuentras todo en este manual? ¿Necesitas más ayuda con la integración del Trustbadge? Entonces ponte en contacto con nosotros a través de members@trustedshops.com o llámanos al +34 91 182 94 72.

Además de las variantes reviews y default, descritas en esta integración estándar del Trustbadge, existen otras variantes. Te las presentamos detalladamente en este artículo: ¿Qué variantes del Trustbadge® existen y cómo las integro en mi tienda?

¿Ha sido útil el artículo?

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