Comprueba en esta vista general si hay un plugin disponible para tu plataforma de ecommerce: Integra a Trusted Shops en tu tienda
- ¿Hay un plugin disponible? Si es así, sigue las instrucciones de integración que has encontrado en la vista general anterior.
- ¿No hay ningún plugin disponible? Entonces, vuelve a estas instrucciones y sigue los pasos que se describen a continuación.
Puedes integrar el Trustbadge® desde el primer día de tu adhesión a Trusted Shops. Para ello, solo necesitas seguir estos cinco pasos:
- Encuentra tu ID de Trusted Shops ("TS-ID")
- Configura el código del Trustbadge
- Integra el código del Trustbadge en tu página web
- Define la transferencia de datos para la Trustcard
- 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.
- Inicia sesión en My Trusted Shops. Se abrirá el panel de control.
- 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 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"
data-color-scheme="light"
charset="UTF-8"
src="//widgets.trustedshops.com/js/YOUR_TSID.js">
</script>
- Busca dentro del código de integración, la siguiente línea:
src="//widgets.trustedshops.com/js/YOUR_TSID.js">
- Sustituye la parte 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 forma diferente o integrarlo en otro lugar de tu sitio web? 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.
- Abre el archivo de pie de página desde el sistema de software de tu tienda o en el servidor FTP.
- Copia todo el código del Trustbadge preparado en el paso anterior.
- 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 todas las páginas de tu sitio web, incluida la página de confirmación de pedido.
Paso 4: Define la transferencia de datos para la Trustcard
Una función importante del Trustbadge es la Trustcard. La Trustcard se abre en tu sitio web después de realizar el pago. 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 de pedido. Para ello, debes integrar un elemento DIV en la plantilla de la página de confirmación de pedido.
Este elemento DIV también se utiliza para transferir datos de tu sitio web al Trustbadge, lo que es necesario para la Protección al Comprador y para generar una petición de valoración.
Los siguientes pasos varían en función de si solo recopilas valoraciones de servicio o tanto valoraciones de producto como de servicio con Trusted Shops. Ahora haz clic en el enlace que coincida con los productos contratados para continuar:
Definir la transferencia de datos para las valoraciones de servicio
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.es</span>
<span id="tsCheckoutOrderAmount">1.01</span>
<span id="tsCheckoutOrderCurrency">EUR</span>
<span id="tsCheckoutOrderPaymentType">transferencia</span>
<span id="tsCheckoutOrderEstDeliveryDate">2020-05-24</span>
</div>
Los datos del pedido que se transmiten a través del elemento DIV se deben rellenar de forma dinámica. Por lo tanto, no copies el ejemplo de código anterior en la página de confirmación de pedido sin realizar las modificaciones necesarias.
- Sustituye los valores ejemplares, es decir los datos marcados en negrita por las variables correctas y correspondientes al lenguaje de programación utilizado por tu plataforma de ecommerce. En la siguiente tabla se explican los parámetros individuales:
| Parámetros | Función | Observaciones |
| <span id="tsCheckoutOrderNr">2020-05-21-001</span> | Transferencia del número de pedido | |
| <span id="tsCheckoutBuyerEmail">esto.es.un.ejemplo@mail.es</span> | Transferencia de la dirección de correo electrónico de tu cliente | |
| <span id="tsCheckoutOrderAmount">1.01</span> | Transferencia del importe total del pedido | Como se puede ver en el ejemplo 1.01, el separador decimal es un punto. Además se indican dos decimales. |
| <span id="tsCheckoutOrderCurrency">EUR</span> | Transferencia del código de divisa del pedido | La norma ISO 4217 establece los códigos de divisa. Si solo se ofrece una moneda, se puede harcodear la divisa, es decir poner un valor fijo. |
| <span id="tsCheckoutOrderPaymentType">transferencia</span> | Transferencia del método de pago utilizado | |
| <span id="tsCheckoutOrderEstDeliveryDate">2020-05-24</span> | Transferencia de la fecha de entrega prevista | Necesario si deseas enviar peticiones de valoración en función de la fecha de entrega prevista. La fecha de entrega que se transmite no debe ser demasiado lejana, máximo un año. El formato de fecha utilizado es AAAA-MM-DD. |
<span id="tsCheckoutBuyerEmail"><?php echo $customer_email; ?><span>
$customer_email corresponde a la dirección de correo electrónico del cliente en el sistema de tu tienda. Consulta la documentación de tu sistema de tienda para conocer la definición exacta de las variables a utilizar, ya que estas pueden cambiar de un sistema a otro. Por este motivo, no podemos proporcionar ninguna información válida de forma general.
- Abre el archivo de plantilla de la página de confirmación de pedido.
- Copia todo el código del elemento DIV recién preparado.
- Pega el código en el archivo de plantilla de la página de confirmación de pedido.
De este modo, tras realizar el pedido se abrirá la Trustcard en la página de confirmación de pedido. Con esto, el Trustbadge está integrado en tu sitio web con todas sus funciones.
Definir la transferencia de datos para valoraciones de servicio y de producto
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.es</span>
<span id="tsCheckoutOrderAmount">1.01</span>
<span id="tsCheckoutOrderCurrency">EUR</span>
<span id="tsCheckoutOrderPaymentType">transferencia</span>
<span id="tsCheckoutOrderEstDeliveryDate">2020-05-24</span>
<!-- product reviews start -->
<!-- for each product in the basket full set of data is required -->
<span class="tsCheckoutProductItem">
<span class="tsCheckoutProductUrl">http://www.shop.url/product_page.html</span>
<span class="tsCheckoutProductImageUrl">http://www.shop.url/image.png</span>
<span class="tsCheckoutProductName">Product Name</span>
<span class="tsCheckoutProductSKU">0123456789</span>
<span class="tsCheckoutProductGTIN">0123456789</span>
<span class="tsCheckoutProductMPN">0123456789</span>
<span class="tsCheckoutProductBrand">My Great Brand</span>
</span>
<!-- product reviews end -->
</div>
Los datos del pedido que se transmiten a través del elemento DIV se deben rellenar de forma dinámica. Por lo tanto, no copies el ejemplo de código anterior en la página de confirmación de pedido sin realizar las modificaciones necesarias.
- Sustituye los valores ejemplares, es decir los datos marcados en negrita por las variables correctas y correspondientes al lenguaje de programación utilizado por tu plataforma de ecommerce. En la siguiente tabla se explican los parámetros individuales:
| Parámetros | Función | Observaciones |
| <span id="tsCheckoutOrderNr">2020-05-21-001</span> | Transferencia del número de pedido | |
| <span id="tsCheckoutBuyerEmail">esto.es.un.ejemplo@mail.es</span> | Transferencia de la dirección de correo electrónico de tu cliente | |
| <span id="tsCheckoutOrderAmount">1.01</span> | Transferencia del importe total del pedido | Como se puede ver en el ejemplo 1.01, el separador decimal es un punto. Además se indican dos decimales. |
| <span id="tsCheckoutOrderCurrency">EUR</span> | Transferencia del código de divisa del pedido | La norma ISO 4217 establece los códigos de divisa. Si solo se ofrece una moneda, se puede harcodear la divisa, es decir poner un valor fijo. |
| <span id="tsCheckoutOrderPaymentType">transferencia</span> | Transferencia del método de pago utilizado | |
| <span id="tsCheckoutOrderEstDeliveryDate">2020-05-24</span> | Transferencia de la fecha de entrega prevista | Necesario si deseas enviar peticiones de valoración en función de la fecha de entrega prevista. La fecha de entrega que se transmite no debe ser demasiado lejana, máximo un año. El formato de fecha utilizado es AAAA-MM-DD. |
| <span class="tsCheckoutProductUrl">http://www.shop.url/product_page.html</span> | Transferencia de la URL completa de la página con los detalles del producto | |
| <span class="tsCheckoutProductName">Product Name</span> | Transferencia del nombre del producto | |
| <span class="tsCheckoutProductSKU">0123456789</span> | Transferencia de la referencia del producto (SKU, por sus siglas en inglés), es decir, el número de artículo o el id del producto que has asignado | |
| <span class="tsCheckoutProductImageUrl">http://www.shop.url/image.png</span> | Transferencia de la URL de una imagen de producto | Opcional, pero muy recomendable. La imagen del producto se muestra en el cuestionario de opinión y permite a tus clientes recordar el producto de manera más sencilla. Esto incrementa la tasa de conversión de tus peticiones de valoración. |
| <span class="tsCheckoutProductGTIN">0123456789</span> | Transferencia del número global de artículo comercial (GTIN, por sus siglas en inglés) | Opcional, pero obligatorio cuando se ha contratado también la Integración con Google. Dado que el GTIN identifica de forma exclusiva un producto en todo el mundo, la transferencia del GTIN permite a Google asignar fácilmente las valoraciones de producto recopiladas al producto correcto. |
| <span class="tsCheckoutProductMPN">0123456789</span> | Transferencia del número de pieza del fabricante (MPN, por sus siglas en inglés) | Opcional. El parámetro también se utiliza para identificar claramente el producto. |
| <span class="tsCheckoutProductBrand">My Great Brand</span> | Transferencia de la marca del producto | Opcional. Al igual que el GTIN y el MPN, la marca del producto también ayuda a identificar claramente el producto. |
<span id="tsCheckoutBuyerEmail"><?php echo $customer_email; ?><span>
$customer_email corresponde a la dirección de correo electrónico del cliente en el sistema de tu tienda. Consulta la documentación de tu sistema de tienda para conocer la definición exacta de las variables a utilizar, ya que estas pueden cambiar de un sistema a otro. Por este motivo, no podemos proporcionar ninguna información válida de forma general.
- Abre el archivo de plantilla de la página de confirmación de pedido.
- Copia todo el código del elemento DIV recién preparado.
- Pega el código en el archivo de plantilla de la página de confirmación de pedido.
De este modo, tras realizar el pedido se abrirá la Trustcard en la página de confirmación de pedido. Con estom el Trustbadge está integrado en tu sitio web con todas sus funciones.
Paso 5: Comprueba la integración del Trustbadge
Ahora prueba la función de tu Trustbadge realizando un pedido de prueba en tu sitio web. Si el Trustbadge se ha integrado correctamente, la Trustcard aparecerá al final del proceso de compra en la página de confirmación de pedido.
Este artículo te ayudará a comprobar tu integración del Trustbadge: ¿Cómo compruebo la integración de mi Trustbadge