Kody osadzania wygenerowane na Twoim koncie Entase umieszczają na stronie gotowy widżet wydarzenia. Są przeznaczone do kopiowania i wklejania bez konieczności prac programistycznych – zobacz Osadzanie wydarzeń na swojej stronie internetowej, aby dowiedzieć się, jak go uzyskać.
Na tej stronie opisano opcje, które możesz dodać do tego fragmentu, oraz sposób konfiguracji otwieranej przez niego finalizacji zakupu.
Widżet sam ładuje klienta JavaScript, więc nie dodajesz obok niego pliku client.js. Nie potrzebuje też klucza publicznego: widżet jest udostępniany przez Entase, dlatego finalizacja zakupu jest autoryzowana za pośrednictwem widżetu, a nie klucza na Twojej stronie.
Konfiguracja
Każdy widżet jest konfigurowany za pomocą obiektu opcji:
<div id="entase_OBJ_CODE"></div>
<script>
window.entase = window.entase || { o: [] };
window.entase.o.push({
obj: 'OBJ_CODE',
theme: 'dark',
ext: true
});
</script>
<script src="https://js.entase.com/embed.js" async></script>obj łączy konfigurację z jej kontenerem: widżet renderuje się w elemencie, którego identyfikator to entase_, po którym występuje ten sam kod. Jeśli tego elementu brakuje, widżet zapisuje ostrzeżenie w dzienniku i niczego nie renderuje.
Aby umieścić kilka widżetów na jednej stronie, dodaj po jednym wpisie dla każdego z nich.
| Nazwa | Typ | Domyślnie | Opis |
|---|---|---|---|
obj | string | – | Kod obiektu z fragmentu osadzania. Wymagane. |
width | string | 'auto' | Szerokość kontenera jako wartość CSS. 'auto' oznacza pełną szerokość. |
height | string | 'auto' | Wysokość kontenera jako wartość CSS. 'auto' zaczyna od 200px, a widżet dostosowuje swój rozmiar do zawartości. |
theme | string | 'light' | 'light' lub 'dark'. |
locale | string | 'auto' | Język widżetu. 'auto' odczytuje atrybut lang elementu <html>. |
ext | boolean | false | Rozszerzony układ – dodaje nazwę wydarzenia i plakat nad datami. |
attribution | boolean | true | Wyświetla informację o Entase. Ustaw false, aby ją ukryć. |
client | object | {} | Opcje przekazywane do klienta JavaScript otwierającego finalizację zakupu. |
Niezależnie od wartości width kontener otrzymuje minimalną szerokość 200px, poniżej której widżet nie może poprawnie się ułożyć.
Konfigurowanie finalizacji zakupu
client akceptuje te same opcje co konstruktor klienta, dzięki czemu finalizacja zakupu otwierana z widżetu może być stylizowana i mieć taki sam rozmiar jak ta otwierana samodzielnie:
window.entase.o.push({
obj: 'OBJ_CODE',
client: {
checkoutMode: 'pane',
pane: { width: '60vw' },
backdrop: true,
backdropColor: '#101014'
}
});Pełną listę znajdziesz w artykule Opcje konstruktora.
Dwa zastrzeżenia. tprm jest ustawiane przez sam widżet na podstawie adresu URL strony (zobacz poniżej), więc wartość przekazana tutaj zostanie zastąpiona. Ponadto, gdy kilka widżetów znajduje się na jednej stronie, współdzielą one jedną instancję klienta – obowiązują opcje client ostatniego zainicjowanego widżetu, dlatego zachowaj identyczne opcje dla wszystkich widżetów na tej samej stronie.
Automatyczne przekazywanie parametrów kampanii
W przeciwieństwie do samodzielnego klienta widżet odczytuje ciąg zapytania Twojej strony i przekazuje znane parametry kampanii zarówno do widżetu, jak i do finalizacji zakupu:
sgm, utm_source, utm_medium, utm_campaign, utm_term, utm_content, utm_id, utm_source_platform, utm_creative_format, fbclid
W przypadku osoby odwiedzającej yoursite.com/concert?utm_source=facebook&sgm=SOCIAL ta atrybucja zostanie zapisana przy każdym wynikającym z tego zamówieniu bez dodatkowej konfiguracji. Parametry spoza tej listy są ignorowane – aby przekazywać własne parametry, otwórz finalizację zakupu bezpośrednio za pomocą klienta i samodzielnie ustaw tprm. Zobacz Śledzenie i zgoda.