Integración del Trustbadge

¿Abajo a la derecha o en cualquier otro lugar de su tienda?

Ubicar el Trustbadge de forma flexible en la tienda

¿No desea mostrar el Trustbadge en su tienda a abajo a la derecha, sino en un lugar diferente?
Ningún problema, ajuste el Trustbadge con esta guía según sus expectativas.

Paso 1: Introduzca abajo la URL de su tienda para generar el código personalizado de su Trustbadge®.


 

Paso 2: Busque en el código de integración generado más arriba la siguiente línea

'variant': 'reviews', /* reviews, default, custom, custom_reviews */
y modifique el valor para el parámetro en ‘custom_reviews’ o ‘custom’, dependiendo de si también desea que se muestren las valoraciones actuales de la tienda en el Trustbadge o solo el sello de calidad. 

Paso 3: introduzca el siguiente código

<div id="MyCustomTrustbadge"></div>

en el lugar en el que desea mostrar el Trustbadge, p. ej., en el encabezado o el pie de la página.

Paso 4: Busque en el código de integración generado más arriba la siguiente línea

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

e introduzca ‚ MyCustomTrustbadge‘ como valor para el parámetro 'customElementId':

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

Paso 5: Para definir la posición en que se abrirá la Trustcard, utilice el parámetro dentro de la línea trustcardDirection, introduciendo ‘topLeft’, ‘topRight’, ‘bottomLeft’ o ‘bottomRight’.

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

Paso 6: Para ajustar el tamaño del Trustbadge®, introduzca el número deseado de píxeles en la línea customBadgeWidth o customBadgeHeight. Usted puede seleccionar entre 40 y 90 píxeles.

'customBadgeWidth': '', /* 40 - 90 (in pixels) */
'customBadgeHeight': '', /* 40 - 90 (in pixels) */

Paso 7: Para la recopilación automática de opiniones de clientes y para contratar la garantía, el Trustbadge® necesita un poco de ayuda. Esta se consigue introduciendo en el código un elemento <div> para reconocer su página de confirmación del pedido (página de agradecimiento). Entonces el Trustbadge® abre ahí la Trustcard para sus visitantes de forma automática, la cual contiene el registro para la garantía de reembolso y/o la autorización para el recordatorio de valoración. 

En caso de que aún no lo haya hecho, introduzca ahora este contenedor <div> en el página de confirmación del pedido:

<div id="trustedShopsCheckout" style="display: none;">
<span id="tsCheckoutOrderNr">%Value: ORDER_NUMBER%</span>
<span id="tsCheckoutBuyerEmail">%Value: BUYER_EMAIL_ADDRESS%</span>
<span id="tsCheckoutOrderAmount">%Value: SHOPPING_BASKET_TOTAL%</span>
<span id="tsCheckoutOrderCurrency">%Value: ORDER_CURRENCY%</span>
<span id="tsCheckoutOrderPaymentType">%Value: PAYMENT_METHOD%</span>
<span id="tsCheckoutOrderEstDeliveryDate">%Value: DELIVERYDATE (YYYY-MM-DD)%</span></div> 

En la página de confirmación del pedido ahora aparece la Trustcard en una Lightbox y ofrece la contratación de la garantía:

Personalización del Trustbadge® para móviles

Por defecto, el Trustbadge® se muestra como un banner en la parte superior en pantallas pequeñas.

Usa el parámetro ‘responsive’ de la configuración para ajustar la presentación y la posición del Trustbadge®.

Variante flotante

Añade el siguiente parámetro al código de tu Trustbadge® y automáticamente te beneficiarás de la nueva variante flotante del Trustmark.

'responsive': {'variant': 'floating'}

Para el parámetro `variant', especifica el valor 'floating_reviews' o `floating', dependiendo de si también deseas mostrar tus comentarios de tienda actuales en el Trustbadge® o solo en el Trustmark.

Diferentes variantes para móvil y escritorio

'responsive': {'variant': 'custom', 'customElementId': 'myMobileCustom'}

Es posible usar los valores ‘custom’ y ‘custom reviews’ en el objeto ‘variant’. Añade el siguiente código HTML donde quieras mostrar el Trustbadge®, por ejemplo, en el encabezado o en el pie de página:

<div id ='myMobileCustom' style ='width: 100px; height: 50px'></div>

Utiliza las propiedades de CSS 'width' y 'height' en este código HTML para determinar el tamaño del Trustbadge®. Debes especificar ambos valores. Ten en cuenta que el ratio (ancho:alto) del Trustbadge® en la variante 'custom_reviews' debe ser 2:1 y 1:1 para la variante 'custom'.
 
 

Mostrar la Trustcard en la página de confirmación del pedido en un lugar seleccionado

La contratación de la garantía de Trusted Shops o el registro para otorgar una valoración en la página de agradecimiento por el pedido puede ubicarse igualmente de forma libre.

Paso 1: En su página de agradecimiento por el pedido, introduzca un contenedor <div> vacío en el lugar seleccionado en el que debe mostrarse la Trustcard. Otorgue a este contenedor <div> una designación de ID característica, p. ej.,

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

Paso 2: Entonces, en el área _tsConfig  del código del Trustbadge, introduzca 'customCheckoutElementId': 'customCheckoutDiv'  como parámetro adicional y complemente la designación ID seleccionada por usted en el primer paso como valor para el parámetro 'customCheckoutElementId' (en el ejemplo seria el 'customCheckoutDiv').