Jakie opcje wyświetlania Trustbadge® są dostępne i jak mogę zintegrować go z moim sklepem?

Uwaga wstępna: W poniższym samouczku omówimy wszystkie możliwości wyświetlania Trustbadge z uwzględnieniem wszystkich dostępnych parametrów oraz kroków niezbędnych do przeprowadzenia integracji i konfiguracji. Wprowadzenie bazuje na tym samouczku, w którym opisujemy proces standardowej integracji: Jak zintegrować Trustbadge w sklepie bez użycia wtyczki? Przed rozpoczęciem tego samouczka należy przeprowadzić standardową integrację.

Warianty Trustbadge

Warianty reviews i default

01_TB-reviews_PL.pngtrustbadge_reviews_PL.png

Wariant reviews (ze znakiem jakości i bez niego)

02_TB-default_PL.png

Wariant default

W przypadku wariantu reviews wyświetlane są zarówno gwiazdki oceny, jak i znak jakości, natomiast wariant default można skonfigurować tak, aby był wyświetlany tylko znak jakości.

Ten samouczek zawiera szczegółowe instrukcje pozwalające na integrację jednego z tych dwóch wariantów z Twoim sklepem: Jak zintegrować Trustbadge w sklepie bez użycia wtyczki?

Poniższe parametry kodu Trustbadge umożliwiają skonfigurowanie wariantów reviews i default pod kątem indywidualnych wymagań:

'yOffset': '0', /* offset from page bottom */

Domyślnie Trustbadge jest wyświetlany w prawym dolnym rogu strony sklepu. Za pomocą parametru 'yOffset' możesz przesuwać Trustbadge w osi pionowej. Wystarczy zmienić wartość 0 na liczbę pikseli, o którą chcesz przesunąć Trustbadge w górę. Oczywiście możesz również przesunąć Trustbadge w dół. Aby to zrobić, wprowadź odpowiednią wartość ujemną.

Domyślnie Trustbadge jest wyświetlany na wysokości 54 pikseli od dolnej krawędzi. Z tego powodu nie należy wprowadzać wartości mniejszej niż -54 dla parametru 'yOffset'.

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

Istnieją cztery warianty wyświetlania Trustbadge. Parametr 'variant' pozwoli określić, który z nich jest widoczny w Twoim sklepie. Domyślnie wybrany wariant to 'reviews'. Jeśli wolisz inny wariant, zamień wartość 'reviews' w wierszu kodu na 'default', 'custom_reviews' lub 'custom'.

'disableResponsive': 'false', /* deactivate responsive behaviour */

Ogólnie rzecz biorąc Trustbadge automatycznie dostosowuje się do rozmiaru ekranu używanego przez klienta. Oznacza to, że przy szerokości ekranu 648 pikseli lub mniejszej Trustbadge przełącza się na wariant wyświetlania zoptymalizowany pod kątem urządzeń mobilnych. Jeśli zmienisz wartość parametru 'disableResponsive' z false na true, to takie automatyczne dostosowanie zostanie wstrzymane. Wtedy urządzenie mobilne będzie wyświetlać wersję Trustbadge typową dla ekranów komputerowych.

'disableTrustbadge': 'false' /* deactivate trustbadge */

Te parametry mogą również służyć do określenia, czy Trustbadge ma być wyświetlany w Twoim sklepie czy nie. Jeśli zmienisz wartość tego parametru z false na true, Trustbadge zostanie ukryty. Na stronie z potwierdzeniem zamówienia pojawi się jednak Trustcard, umożliwiający klientom wyrażenie zgody na zaproszenie do wystawienia opinii, a także oferujący im Ochronę Kupującego.

Warianty custom i custom_reviews

04_TB-custom_PL.png
Wariant custom

03_TB-customreviews_PL.pngreviews-only_PL.png

Wariant custom_reviews (ze znakiem jakości i bez niego)

W przeciwieństwie do wariantów reviews i default, które są zakotwiczone przy prawej krawędzi sklepu, warianty custom i custom_reviews można pozycjonować elastycznie. Jeśli chcesz zintegrować jeden z tych dwóch wariantów ze swoim sklepem, wykonaj kroki opisane w poniższej instrukcji integracji.

Poniższa instrukcja integracji opiera się na tym samouczku: Jak zintegrować Trustbadge w sklepie bez użycia wtyczki? Należy zapoznać się z nim przed przystąpieniem do dalszych kroków instrukcji.

Krok 1: Utwórz element DIV

Aby użyć jednego z dwóch wariantów Trustbadge — custom lub custom_reviews — musisz najpierw utworzyć element DIV. W tym celu skopiuj poniższy kod HTML do systemu sklepu i umieść go w miejscu, w którym ma być wyświetlany Trustbadge. Może to być np. nagłówek lub stopka.

<div id="MyCustomTrustbadge" style="width:160px;height:80px"></div>

Kod HTML można dostosować na dwa sposoby.

  1. Możesz przypisać nowy identyfikator do elementu DIV. Aby to zrobić, po prostu zastąp wartość 'MyCustomTrustbadge' dowolną nazwą. Jeśli wprowadzasz zmianę w tym punkcie, zapamiętaj zdefiniowany przez siebie identyfikator. Będzie on ponownie potrzebny w kroku 3.
  2. Za pomocą właściwości width (szerokość) i height (wysokość) można dostosować rozmiar Trustbadge. Aby to zrobić, po prostu zamień ich wartości zgodnie z wymaganiami. Pamiętaj, że należy przestrzegać oryginalnego współczynnika proporcji Trustbadge wynoszącego 2:1 (szerokość:wysokość) w wariancie custom_reviews lub 1:1 w wariancie custom.

Krok 2: Wybierz preferowany przez siebie wariant Trustbadge

Teraz przejdź do pliku wtyczki lub szablonu, w którym zapisano kod Trustbadge.

Jeśli kod Trustbadge nie został jeszcze wygenerowany i zintegrowany ze sklepem, należy najpierw wykonać kroki opisane w tej instrukcji: Jak zintegrować Trustbadge w sklepie bez użycia wtyczki?

Możesz określić, który wariant Trustbadge ma być używany w Twoim sklepie, korzystając z parametru 'variant' w kodzie Trustbadge. Aby to zrobić, po prostu wprowadź 'custom' lub 'custom_reviews' jako wartość parametru. Po dostosowaniu wiersz kodu powinien wyglądać w następujący sposób:

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

lub w ten sposób:

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

Krok 3: Połącz kod Trustbadge z elementem DIV

Wprowadź następujący wiersz kodu do kodu Trustbadge (jeśli jeszcze się w nim nie znajduje):

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

Parametr 'customElementId' prowadzi do elementu DIV utworzonego w kroku 1 i łączy go z kodem Trustbadge. W przypadku zmiany identyfikatora w kroku 1 należy również zastąpić w tym parametrze wartość 'MyCustomTrustbadge' zdefiniowanym przez siebie identyfikatorem elementu DIV.

Wariant custom jest dostępny tylko dla sklepów ze znakiem jakości Trusted Shops i widoczny tylko w przypadku aktywnego znaku jakości. Jeśli Twój znak jakości nie jest jeszcze aktywny, jednak chcesz zobaczyć jego podgląd, możesz to zrobić za pomocą konsoli deweloperskiej swojej przeglądarki. Uruchom z jej poziomu komendę trustbadge.showIntegrationPlaceholder();

Opcjonalny krok 4: Ustaw kierunek otwierania Trustbadge

Zminimalizowany Trustbadge jest przez cały czas widoczny dla Twoich klientów na stronie Twojego sklepu. Klient może zmaksymalizować Trustbadge, klikając go — umożliwia to zapoznanie się ze szczegółowymi informacjami na temat Twojego znaku jakości lub opiniami wystawionymi dla Twojego sklepu. Niezależnie od tego, w którym miejscu sklepu internetowego znajduje się Trustbadge, domyślnie zawsze maksymalizuje się on w kierunku, w którym jest najwięcej miejsca.

Możesz jednak przypisać stały kierunek maksymalizacji Trustbadge. Aby to zrobić, najpierw wprowadź następujący wiersz kodu, jeśli to możliwe, do kodu Trustbadge:

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

Określ kierunek maksymalizacji, wprowadzając w parametrze jedną z następujących wartości:

  • 'topRight' — maksymalizacja w kierunku prawego górnego rogu.
  • 'topLeft' — maksymalizacja w kierunku lewego górnego rogu.
  • 'bottomRight' — maksymalizacja w kierunku prawego dolnego rogu.
  • 'bottomLeft' — maksymalizacja w kierunku lewego dolnego rogu.

Na przykład w celu maksymalizacji w kierunku prawego górnego rogu wiersz kodu należy dostosować w następujący sposób:

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

Po wykonaniu tego kroku integracja wariantu custom lub custom_reviews została zakończona; teraz możesz sprawdzić, jak Trustbadge jest wyświetlany w Twoim sklepie internetowym.

Trustbadge nadal wyświetla się w prawym dolnym rogu? Jeśli tak, sprawdź:

  • czy faktycznie wprowadzono 'custom' lub 'custom_reviews' jako wartość parametru ‘variant’;
  • czy w parametrze ‘customElementId’ podano utworzony w kroku 1 identyfikator elementu DIV;
  • czy określono wysokość i szerokość elementu DIV zgodnie z krokiem 1.

W takich przypadkach otrzymasz powiadomienia z dalszymi instrukcjami w konsoli deweloperskiej przeglądarki.

Trustbadge na urządzeniach mobilnych — warianty floating, floating_reviews i topbar

Trusted Shops oferuje oczywiście również warianty wyświetlania Trustbadge na urządzeniach mobilnych. Jeśli dla parametru 'disableResponsive' nie ustawiono wartości true, są one domyślnie wyświetlane na ekranach o szerokości 648 pikseli lub mniejszej.

06_TB-floating_PL.png

Przedstawiony tutaj wariant pływający (floating) jest standardowym wariantem mobilnym Trustbadge. W przeciwieństwie do wariantów reviews i default jest on domyślnie wyświetlany w lewym dolnym rogu sklepu. Ponadto widoczny jest na nim tylko znak jakości.

Jeśli chcesz, aby wyświetlane były również gwiazdki oceny, możesz wybrać dwie opcje:

  • Wariant floating_reviews: tak samo jak w przypadku wariantu floating Trustbadge jest domyślnie wyświetlany w lewym dolnym rogu sklepu internetowego. Jednak w przeciwieństwie do wariantu floating wyświetlane są również gwiazdki oceny.

05_TB-floatingreviews_PL.png

  • Wariant topbar: w przypadku tego wariantu nad nagłówkiem sklepu wyświetlany jest pasek zawierający zarówno znak jakości, jak i informacje o opiniach.

trustbadge-mobile-topbar_PL.jpg

Aby skonfigurować sposób wyświetlania Trustbadge na urządzeniach mobilnych, skopiuj poniższy wiersz kodu i wstaw go w parametrze 'variant' swojego kodu Trustbadge:

'responsive': {'variant':'floating', 'position':'left', 'yOffset':'0'},

W ramach tego parametru dostępne są trzy opcje konfiguracji:

  • Za pomocą wartości wprowadzonej dla parametru 'variant' możesz określić, który wariant Trustbadge ma być wyświetlany na ekranach o szerokości poniżej 648 pikseli. Dostępne warianty to floating, floating_reviews i topbar. Wprowadź preferowany wariant jako wartość parametru 'variant'.
  • Warianty floating i floating_reviews nie są zakotwiczone przy lewej krawędzi sklepu. Za pomocą wartości wprowadzonej dla parametru 'position' można określić pozycję poziomą tych dwóch wariantów. Oprócz domyślnej wartości 'left' możesz również wybrać 'center' w celu wyśrodkowania lub 'right' w celu wyświetlania przy prawej krawędzi. Z kolei w przypadku wariantu topbar nie można dostosować pozycji poziomej, ponieważ pasek obejmuje całą szerokość ekranu.
  • W przypadku wariantów floating i floating_reviews można dostosować pozycję pionową. Służy do tego wartość parametru 'yOffset'. Po prostu zastąp cyfrę 0 liczbą pikseli, aby przesunąć Trustbadge do góry. W przypadku wariantu topbar nie ma możliwości określenia pozycji pionowej. Ten wariant jest zakotwiczony przy górnej krawędzi ekranu.
Możesz skorzystać z opisanych powyżej opcji Trustbadge dostosowanych do urządzeń mobilnych, a jednocześnie użyć wariantów custom lub custom_reviews variants w przypadku prezentacji sklepu na tego rodzaju urządzeniach. Z tego artykułu dowiesz się, jak skonfigurować te warianty w przypadku widoku dostosowanego do urządzeń mobilnych: Jak mogę dostosować sposób prezentacji Trustbadge® na urządzeniu mobilnym?

Dodatkowe parametry

Elastyczne pozycjonowanie Trustcard (niestandardowa strona zamówienia)

Oczywiście możliwe jest umieszczenieć Trustcard w dowolnym miejscu na stronie z potwierdzeniem zamówienia. To ustawienie nie jest powiązane z wariantami custom i custom_reviews; można go używać również w przypadku wariantów reviews i default. Wystarczy wykonać poniższe instrukcje.

Krok 1: Utwórz element DIV na stronie z potwierdzeniem zamówienia

Najpierw utwórz element DIV na stronie z potwierdzeniem zamówienia — musi znajdować się w miejscu, w którym ma być wyświetlany Trustcard. Aby to zrobić, po prostu wstaw następujący wiersz kodu w odpowiednim miejscu:

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

Identyfikator elementów DIV jest wstępnie ustawiony jako customCheckoutDiv. Możesz oczywiście zastąpić go dowolną nazwą. W takim przypadku należy jednak pamiętać, aby użyć tego identyfikatora również w kodzie Trustbadge w następnym kroku.

Krok 2: Połącz kod Trustbadge z elementem DIV

Pod wierszem kodu parametru 'variant' wstaw do kodu Trustbadge następujący wiersz:

'customCheckoutElementId': 'customCheckoutDiv',

Parametr 'customCheckoutElementId' jest odnośnikiem do elementu DIV utworzonego w kroku 1 i łączy go z kodem Trustbadge. W przypadku zmiany identyfikatora w kroku 1 należy również zastąpić w tym parametrze wartość ‘customCheckoutDiv’ zdefiniowanym przez siebie identyfikatorem elementu DIV.

Udało Ci się umieścić Trustcard w wybranym przez Ciebie miejscu. Przetestuj ustawienia, składając próbne zamówienie w swoim sklepie. Jeśli Trustcard jest wyświetlany w odpowiednim miejscu, integracja została przeprowadzona w poprawny sposób.


Czy ten artykuł był pomocny?

Liczba użytkowników, którzy uważają ten artykuł za przydatny: 3 z 9