Zmiana pozycji Trustbadge

W prawym dolnym rogu czy w innym miejscu?

 Trustbadge w dowolnym miejscu na stronie sklepu

Jeśli chcesz przenieść Trustbadge z prawego dolnego rogu w inne miejsce na stronie swojego sklepu, skorzystaj z poniższej instrukcji.

Krok 1:  Wpisz adres strony swojego sklepu (URL), aby wygenerować swój osobisty kod Trustbadge.


 

Krok 2:  W wygenerowanym kodzie wyszukaj następujące wiersze

'variant': 'reviews', /* reviews, default, custom, custom_reviews */

i wybierz jako wartość parametru 'custom_reviews' lub 'custom' w zależności od tego, czy chcesz pokazać na Trustbadge także aktualną ocenę sklepu, czy tylko sam znak jakości.

Wskazówka: Wariant 'custom' jest dostępny tylko w sklepach, które posiadają znak jakości Trusted Shops. Wyświetla się tylko wtedy, gdy certyfikat jest ważny. Aby przejść do podglądu tego elementu, uruchom funkcję

trustbadge.showIntegrationPlaceholder();
w konsoli deweloperskiej twojej przeglądarki.

Krok 3: Wprowadź kod tam, gdzie ma być wyświetlany Trustbadge, np. w nagłówku lub w stopce strony:

<div id="MyCustomTrustbadge" style="width:100px;height:50px"></div>

Używając reguły CSS 'width' i 'height' w tym kodzie HTML określasz, jak duży powinien być wyświetlany Trustbadge. Należy przy tym podać obie wartości.
Zwróć uwagę na prawidłowe proporcje Trustbadge (szerokość:wysokość) i oznacz je jako 2:1 w wariancie 'custom_reviews' lub 1:1 dla wariantu 'custom'.

Krok 4: W wygenerowanym kodzie wyszukaj następujące wiersze

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

i wprowadź ‚MyCustomTrustbadge‘ jako wartość parametru 'customElementId':

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

Krok 5: Aby ustalić pozycję Trustcard, należy wybrać odpowiednią wartość parametru ('topLeft', 'topRight', 'bottomLeft' lub 'bottomRight') w linijce trustcardDirection.

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

Krok 6:  Do automatycznego zbierania opinii klientów i oferowania im gwarancji Trustbadge potrzebuje już tylko niewielkiej pomocy. Polega ona na wprowadzeniu elementu <div> w celu identyfikacji Twojej strony z potwierdzeniem zamówienia. Dzięki niemu Trustbadge otworzy automatycznie Trustcard z zaproszeniem do skorzystania z gwarancji zwrotu pieniędzy i/ lub prośbą o zgodę na przypomnienie o możliwości oceny sklepu. 

Jeśli jeszcze go nie masz, wstaw wyżej wspomniany kontener <div> na stronę z potwierdzeniem zamówienia: 

<div id="trustedShopsCheckout" style="display: none;">
<span id="tsCheckoutOrderNr">2017-01234</span>
<span id="tsCheckoutBuyerEmail">customer@mail-test.pl</span>
<span id="tsCheckoutOrderAmount">1001.95</span>
<span id="tsCheckoutOrderCurrency">PLN</span>
<span id="tsCheckoutOrderPaymentType">credit card</span>
<span id="tsCheckoutOrderEstDeliveryDate">2017-08-30</span></div> 

Na stronie z potwierdzeniem zamówienia pojawi się teraz okienko Trustcard z zaproszeniem do skorzystania z gwarancji.

Wskazówka: Jeśli Trustbadge nadal pojawia się w prawym dolnym rogu, sprawdź, czy w wygenerowanym kodzie rzeczywiście wybrałeś wariant 'custom' lub 'custom_reviews'. Upewnij się także, czy parametr 'customElementId' wskazuje na identyfikator istniejącego elementu strony sklepu, a także czy ustawiłeś wysokość i szerokość zgodnie z wskazówkami podanymi w trzecim kroku. W tych przypadkach w konsoli deweloperskiej przeglądarki otrzymujesz komunikaty z dalszymi informacjami.

Dostosowywanie i wyświetlanie Trusbadge’a na urządzeniach mobilnych

Na mniejszych ekranach Trustbadge domyślnie wyświetla się w górnej części ekranu.

Parametr “responsive” w konfiguracji Trustbadge’a może być użyty do dostosowania sposobu jego prezentowania oraz pozycji, w jakiej ma się on znaleźć.

Ruchomy Trustmark

Dodaj poniższy kod do już skonfigurowanego Trustbadge’a jako dodatkowy parametr. Ruchomy znak jakości pojawi się automatycznie i stanie się widoczny dla Twoich klientów.

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

Wybierz jako wartość 'floating_reviews' lub 'floating' dla parametru 'variant', w zależności od tego, czy chcesz pokazać na Trustbadge także aktualną ocenę sklepu, czy tylko sam znak jakości.

Wersja niestandardowa umieszczona jest inaczej dla wersji mobilnej niż desktopowej.

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

Warianty "custom" i "custom_reviews" są możliwymi wartościami w obiekcie "variant". Wstaw następujący kod HTML w miejsce, w którym ma być wyświetlany Trustbadge® - na przykład w nagłówku lub stopce strony:

<div id="myMobileCustomTrustbadge" style="width:100px;height:50px"></div>

Użyj właściwości CSS 'width' i 'height' w kodzie HTML, aby ustawić wyświetlany rozmiar Trustbadge. Należy określić obie wartości.

Pamiętaj, aby przestrzegać oryginalnego współczynnika proporcji Trustbadge (szerokość:wysokość) 2:1 w wariancie "custom_reviews" lub 1:1 dla wariantu "custom".
 
 

Trustcard w dowolnym miejscu na stronie z potwierdzeniem zamówienia

Zaproszenie do skorzystania z gwarancji Trusted Shops lub zgłoszenie chęci oceny sklepu może zostać umieszczone w dowolnym miejscu na stronie z potwierdzeniem zamówienia.

Krok 1:  Wprowadź na swojej stronie z potwierdzeniem zamówienia, na której ma wyświetlać się Trustcard, pusty kontener <div>. Kontenerowi <div> należy nadać indywidualne oznaczenie ID, np.

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

Krok 2:  W kodzie Trustbadge wstaw w obszarze _tsConfig jako dodatkowy parametr 'customCheckoutElementId': 'customCheckoutDiv' i uzupełnij wybrane przez Ciebie w pierwszym kroku oznaczenie ID jako wartość parametru 'customCheckoutElementId' (w tym przykładzie byłoby to 'customCheckoutDiv').