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

Puedes integrar el Trustbadge® desde el primer día de tu adhesión a Trusted Shops. Para ello, solo necesitas seguir estos cinco pasos:

1. Encuentra tu ID de Trusted Shops ("TS-ID")
2. Configura el código del Trustbadge
3. Integra el código del Trustbadge en tu página web
4. Define la transferencia de datos para la Trustcard
5. Comprueba la integración del Trustbadge

Paso 1: Encuentra tu ID de Trusted Shops

Para la integración del Trustbadge necesitas tu ID personal de Trusted Shops. Encontrarás tu TS-ID en My Trusted Shops.

1. Inicia sesión en My Trusted Shops. Se abrirá el panel de control.
2. En la columna derecha del panel de control encontrarás tu TS-ID.

Paso 2: Configura el código del Trustbadge

El siguiente código de integración es la base para la integración del Trustbadge:

<script async 
data-desktop-y-offset="0" 
data-mobile-y-offset="0" 
data-desktop-disable-reviews="false" 
data-desktop-enable-custom="false" 
data-desktop-position="right" 
data-desktop-custom-width="156" 
data-desktop-enable-fadeout="false" 
data-disable-mobile="false" 
data-disable-trustbadge="false" 
data-mobile-custom-width="156" 
data-mobile-disable-reviews="false" 
data-mobile-enable-custom="false" 
data-mobile-position="left" 
data-mobile-enable-topbar="false" 
data-mobile-enable-fadeout="true" 
charset="UTF-8" 
src="//widgets.trustedshops.com/js/YOUR_TSID.js"> 
</script>

1. Busca dentro del código de integración, la siguiente línea de código:

   src="//widgets.trustedshops.com/js/YOUR_TSID.js">

2. Sustituye la zona marcada en negrita YOUR_TSID por tu ID de Trusted Shops.

Con esto ya has creado tu código del Trustbadge. Si no realizas más ajustes, el Trustbadge...

... muestra tus valoraciones recopiladas y, tras la certificación, tu Sello de Calidad de forma automática.

... tu Trustbadge será visible en la vista de escritorio, en la esquina inferior derecha 54 píxeles por encima del borde inferior de la pantalla y en la vista móvil, a la izquierda 10 píxeles por encima del borde inferior de la pantalla.

Llegados a este punto, tienes dos opciones:

• ¿Estás de acuerdo con estos ajustes? Entonces ve directamente al paso 3.

• ¿Quieres mostrar el Trustbadge de otra forma o integrarlo en otro lugar de tu tienda? Entonces, continúa con la configuración del código del Trustbadge con la ayuda de este artículo: ¿Cómo adapto el Trustbadge® a mis necesidades? Después vuelve a este manual y continúa con el paso 3.

Paso 3: Integra el código del Trustbadge en tu página web

¿Has configurado el código del Trustbadge según tus preferencias? Entonces, intégralo ahora en tu página web.

1. Abre el archivo de pie de página desde el sistema de software de tu tienda o en el servidor FTP. 

2. Copia todo el código del Trustbadge preparado en el paso anterior. 
3. Inserta el código del Trustbadge en el archivo de pie de página 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.

Paso 4: Define la transferencia de datos para la Trustcard

Una función importante del Trustbadge es la Trustcard. La Trustcard aparecerá en tu tienda una vez se haya realizado el pedido. A través de la Trustcard, tu clientela puede dar su consentimiento para recibir una petición de valoración y/o asegurar su pedido mediante la Protección al Comprador.

Para que la Trustcard se abra en el momento oportuno, el Trustbadge debe poder reconocer la página de confirmación del pedido. Para ello, integra el siguiente elemento DIV en la plantilla de la página de confirmación del pedido.

A través de este elemento DIV tu tienda transfiere al Trustbadge los datos necesarios para la Protección al Comprador y para el envío de una petición de valoración.

La base del elemento DIV es el siguiente código:

<div id="trustedShopsCheckout" style="display: none;"> 
<span id="tsCheckoutOrderNr">2020-05-21-001</span> 
<span id="tsCheckoutBuyerEmail">esto.es.un.ejemplo@mail.de</span> 
<span id="tsCheckoutOrderAmount">4005.95</span> 
<span id="tsCheckoutOrderCurrency">EUR</span> 
<span id="tsCheckoutOrderPaymentType">transferencia</span> 
<span id="tsCheckoutOrderEstDeliveryDate">2020-05-24</span> 
</div>

A través del elemento DIV se deben rellenar y transferir los datos del pedido de forma dinámica. Por lo tanto, no copies el ejemplo de código anterior en la página de confirmación del pedido sin antes cambiarlo.

1. Sustituye los valores de los parámetros de ejemplo, es decir los que están marcados en negrita. Para ello, utiliza las variables correspondientes al lenguaje de programación utilizado por tu plataforma de ecommerce. En la siguiente tabla se explican los parámetros individuales: 

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

2. Abre el archivo de plantilla de la página de confirmación del pedido.

3. Copia todo el código del elemento DIV recién preparado.
4. Pega el código en el archivo de plantilla de la página de confirmación del pedido.

De este modo, tras realizar el pedido se abrirá la Trustcard en la página de confirmación de pedido. El Trustbadge está integrado en tu tienda con todas sus funciones.

Paso 5: Comprueba la integración del Trustbadge

Comprueba ahora el funcionamiento del Trustbadge haciendo un pedido de prueba en tu tienda.
Si el Trustbadge se ha integrado correctamente, la Trustcard aparecerá al final del proceso de compra.

Este artículo te ayudará a comprobar tu integración del Trustbadge: ¿Cómo compruebo la integración de mi Trustbadge