Widżet pokazuje Twoje wydarzenia, bilety lub osoby z Kadens na własnej witrynie, a odwiedzający mogą kupić, nie opuszczając jej. Potrzebujesz konta Kadens i dostępu do edycji swojej witryny. Utwórz widżet, dodaj swoją witrynę do dozwolonych, a potem skopiuj i wklej krótki kod.
Widżet to fragment Twojej strony Kadens, który żyje wewnątrz Twojej witryny. Są trzy rodzaje:
| Widżet | Opis |
|---|---|
Wydarzenia i bilety | Twoje nadchodzące wydarzenia z zakupem biletów na Twojej stronie. |
Jedno wydarzenie | Strona jednego wydarzenia: terminy, miejsce, opis i bilety, z przyciskiem Kup. |
Osoby | Karty profili wybranych osób z linkami do ich publicznych profili. |
Kursy | Twoje kursy z cenami, każdy z linkiem do swojej strony w Twojej witrynie. |
Plany i ceny | Twoje plany członkowskie obok siebie, każdy z linkiem do swojej strony zapisu. |
Grafik zajęć | Twoje nadchodzące zajęcia w formie agendy, zawsze aktualnej. |
Przycisk zakupu | Jeden przycisk dla jednego wydarzenia, kursu lub planu, w stylu Twojej strony. |
Wklejony kod podaje tylko nazwę Twojego widżetu. Gdy zmieniasz widżet w Kadens (co pokazuje, jego układ lub kolory), każda witryna, która go używa, aktualizuje się sama. Nigdy nie wklejasz kodu ponownie.
Cztery kroki, bez kodowania.
W Kadens otwórz Integracje, potem Widżety, i utwórz nowy. Wybierz, co ma pokazywać i jak ma wyglądać.
Dodaj adres swojej witryny, na przykład https://www.example.com. Widżet pojawia się tylko na dozwolonych witrynach.
Otwórz swój widżet i przejdź do zakładki Instalacja. Skopiuj pokazany tam kod. Zawiera już Twoją nazwę użytkownika i Twój widżet.
Wklej kod tam, gdzie ma się pojawić widżet, a następnie opublikuj swoją witrynę. Znajdź swój kreator stron w przewodnikach poniżej, aby poznać dokładne kroki.
Widżet ładuje się tylko na witrynach dodanych do Twojej listy.
To chroni Twoją płatność: nikt nie może umieścić Twojego widżetu na stronie, nad którą nie masz kontroli. Twoja lista jest wysyłana do przeglądarek jako reguła bezpieczeństwa (frame-ancestors), więc witryna, której nie ma na liście, pokazuje puste miejsce tam, gdzie miał być widżet.
| Adres | Wynik |
|---|---|
https://www.example.com | Dozwolone. Jedna witryna. Każda ścieżka lub ukośnik na końcu, który wpiszesz, zostaje usunięty. |
https://*.example.com | Dozwolone. Każda subdomena jednego poziomu, jak shop.example.com. Nie obejmuje samego example.com ani głębszych poziomów, jak a.b.example.com: dodaj je jako osobne wpisy. |
* | Niedozwolone. Pozwoliłoby to każdej witrynie w internecie pokazać Twój widżet. |
https://*.com | Niedozwolone. Po symbolu wieloznacznym musi być prawdziwa domena. |
http://www.example.com | Niedozwolone. Witryny muszą używać https. |
http://localhost:3000 | Dozwolone do testowania na własnym komputerze. http działa tylko dla localhost. |
https://www.example.com/tickets | Zapisane jako https://www.example.com. Dozwolona jest cała witryna, nie jedna strona. Adres z ? lub # zostaje odrzucony. |
https://203.0.113.7 | Niedozwolone. Użyj nazwy domeny swojej witryny. |
Jeden skrypt i jeden element. Zakładka Instalacja buduje ten kod za Ciebie.
Dla każdej strony, która przyjmuje kod. Sam dopasowuje wysokość.
W przykładach na tej stronie your-username i your-widget-id oznaczają Twoje własne wartości. Skopiuj swój prawdziwy kod z zakładki Instalacja.
| Atrybut | Typ | Opis |
|---|---|---|
handleWymagane | string | Twoja nazwa użytkownika Kadens. |
widgetWymagane | string | Id widżetu do pokazania. |
locale | string | Język widżetu. Gdy go brakuje, widżet używa lang Twojej strony. |
color-scheme | light | dark | auto | Wymusza jasne lub ciemne kolory w tym miejscu. Pomiń, aby użyć własnego ustawienia widżetu. |
title | string | Dostępna nazwa ramki widżetu, odczytywana przez czytniki ekranu. Domyślnie Kadens widget. |
data-layer | boolean | Wysyła też każde zdarzenie widżetu do window.dataLayer, dla Google Tag Managera. |
meta-pixel | boolean | Wysyła zdarzenie Purchase do Twojego Meta Pixela, gdy ktoś dokończy zakup. Twoja strona musi już wczytywać piksel. |
Dla kreatorów stron, które usuwają skrypty. Stała wysokość.
Wybierz swój kreator stron. Każdy przewodnik mówi, co potrzebujesz na wstępie, gdzie wkleić kod i co sprawdzić.
Potrzebujesz dostępu do edycji stron witryny albo osoby, która go ma i wklei kod za ciebie.
Na stronę: wklej kod na każdej stronie, na której ma się pojawić widżet. Jeśli twoja witryna ma miejsce na kod na wszystkich stronach (często nazywane kodem nagłówka lub stopki), możesz wstawić tam pierwszą linię raz, a na każdej stronie wklejać tylko drugą.
Otwórz opublikowaną stronę w nowej karcie. Widżet pojawi się tam, gdzie wkleiłeś kod, zwykle po kilku sekundach.
Samodzielnie hostowany WordPress (WordPress.org) działa zawsze. Na WordPress.com potrzebujesz płatnego planu z funkcjami hostingu: plan Free usuwa skrypt i widżet się nie pojawi.
Na stronę: dodaj blok Custom HTML na każdej stronie lub wpisie, gdzie ma być widżet. WordPress nie ma wbudowanego miejsca na kod na wszystkich stronach, więc wklejaj cały kod do każdego bloku.
Otwórz stronę w opublikowanej witrynie, nie w edytorze. Widżet pojawi się tam, gdzie dodałeś blok.
Custom Code wymaga planu Premium i podłączonej domeny. Bez obu widżet nie pojawi się w witrynie.
Na wybranych stronach. Custom Code działa bezpośrednio na stronie, w Twojej domenie, a widżet pojawia się na końcu każdej wybranej strony.
Otwórz stronę we własnej domenie, nie w podglądzie Editora. Widżet pojawi się na końcu strony.
Musisz być właścicielem sklepu albo pracownikiem z uprawnieniem do edycji motywów w Shopify admin.
Na szablon: sekcja dodana w edytorze motywu pojawia się na każdej stronie z tym szablonem (na przykład na każdej stronie produktu). Aby była tylko na jednej stronie, najpierw nadaj jej osobny szablon. Dla wszystkich stron przejdź do Online Store › Themes › … › Edit code i wklej go w layout/theme.liquid tuż przed zamykającym tagiem body; widżet pojawi się wtedy na końcu każdej strony.
Otwórz sklep w nowej karcie, nie w edytorze motywu, i przejdź do tej strony. Widżet pojawi się w miejscu sekcji.
Code Embed działa tylko w płatnym planie witryny albo w obszarze roboczym Core, Growth, Agency lub Freelancer. Na darmowej witrynie Starter widżet się nie pojawi.
Na stronę: wstaw Code Embed tam, gdzie ma być widżet. Dla wszystkich stron wklej go raz w Site settings › Custom code › Footer code, który działa przed zamykającym tagiem body i wymaga płatnego Site plan; widżet pojawi się wtedy na końcu każdej strony. Aby był wewnątrz stron, wstaw tylko pierwszą linię w Footer code, a drugą w każdy Code Embed.
Otwórz opublikowaną witrynę. W Designerze Code Embed pokazuje symbol zastępczy zamiast widżetu; to normalne.
Skrypty działają w planach Core, Plus i Advanced. W planie Personal widżet się nie pojawi, wersja iframe również.
Na stronę: dodaj blok Code na każdej stronie, gdzie ma być widżet. Dla wszystkich stron wklej go raz w panelu Code Injection w Settings.
Otwórz stronę opublikowanej witryny w oknie prywatnym. W edytorze blok pokazuje symbol zastępczy, bo skrypty nie działają w podglądzie edytora.
Potrzebujesz uprawnień do edycji projektu Framer.
Na stronę: umieść Embed tam, gdzie ma być widżet, i wklejaj cały kod do każdego Embed.
Otwórz opublikowaną witrynę i przejdź do strony. Widżet pojawi się tam, gdzie umieściłeś Embed.
Potrzebujesz konta zespołu Ghost z prawem publikacji (Author lub wyżej). Contributors mogą dodać kartę, ale nie mogą jej opublikować.
Na wpis lub stronę: dodaj kartę HTML tam, gdzie ma być widżet. Dla wszystkich stron wklej go raz w Settings › Advanced › Code injection › Site footer; widżet pojawi się wtedy na końcu każdej strony. Aby był wewnątrz wpisów, wstaw tylko pierwszą linię w Site footer, a drugą do każdej karty HTML.
Otwórz opublikowany wpis lub stronę. Edytor pokazuje kartę jako kod; widżet pojawia się tylko na opublikowanej stronie.
Potrzebujesz uprawnień do edycji i publikowania stron witryny lub landing pages w HubSpot.
Na stronę: wklej kod w Source code modułu Rich text tam, gdzie ma być widżet, albo w edytorze strony w Settings › Advanced › Footer HTML, aby pokazać go na końcu tej strony. Dla wszystkich stron domeny przejdź do Settings › Content › Pages, wybierz domenę i wklej go w Site footer HTML.
Otwórz opublikowaną stronę. Jeśli brakuje widżetu, otwórz ponownie Source code modułu: jeśli linii skryptu nie ma, HubSpot ją usunął.
Zmieniaj to w studiu widżetów w Kadens. Twoja witryna aktualizuje się sama.
| Ustawienie | Wartości | Opis |
|---|---|---|
Motyw | site | kadens | minimal | bold | soft | dark | Styl początkowy. Po jego wybraniu możesz dostosować każdy szczegół. |
Schemat kolorów | light | dark | auto | Jasny, ciemny lub automatyczny, dopasowany do urządzenia odwiedzającego. |
Kolory | accent, accentForeground, background, card, text, mutedText, border | Twoje własne kolory przycisków, teł, kart, tekstu i obramowań. |
Czcionki | Czcionka Twojej strony, czcionka systemowa odwiedzającego, albo jedna z katalogu czcionek Kadens. Czcionki ładują się wewnątrz widżetu z Kadens, nigdy z Google. | |
Rozmiar tekstu | 12 to 22 px | Podstawowy rozmiar tekstu widżetu. |
Zaokrąglenie rogów | 0 to 64 px | Jak bardzo zaokrąglone są karty i przyciski. |
Element widżetu wysyła zdarzenia DOM do Twojej strony, dzięki czemu możesz mierzyć kliknięcia i sprzedaż własną analityką.
| Zdarzenie | Dane | Opis |
|---|---|---|
kadens:ready | { widget } | Widżet się załadował i jest widoczny. |
kadens:widget-view | { widget, ...props } | Akcja odwiedzającego wewnątrz widżetu. Z atrybutem data-layer jest też wysyłana do window.dataLayer jako kadens_widget_view. |
kadens:item-click | { widget, ...props } | Akcja odwiedzającego wewnątrz widżetu. Z atrybutem data-layer jest też wysyłana do window.dataLayer jako kadens_item_click. |
kadens:checkout-open | { widget, ...props } | Akcja odwiedzającego wewnątrz widżetu. Z atrybutem data-layer jest też wysyłana do window.dataLayer jako kadens_checkout_open. |
kadens:checkout-complete | { widget, ...props } | Akcja odwiedzającego wewnątrz widżetu. Z atrybutem data-layer jest też wysyłana do window.dataLayer jako kadens_checkout_complete. |
kadens:powered-by-click | { widget, ...props } | Akcja odwiedzającego wewnątrz widżetu. Z atrybutem data-layer jest też wysyłana do window.dataLayer jako kadens_powered_by_click. |
kadens:checkout-completed | { widget, orderRef, kind, amountMinor, currency } | Zakup został zakończony. Kwota jest w jednostkach pomocniczych (centy dla EUR lub USD). Z atrybutem meta-pixel wysyła też Purchase do Twojego Meta Pixela. |
<kadens-widget handle="your-username" widget="your-widget-id" data-layer></kadens-widget>
<script>
document.addEventListener('kadens:checkout-completed', (event) => {
const { orderRef, amountMinor, currency } = event.detail;
gtag('event', 'purchase', {
transaction_id: orderRef,
value: amountMinor / 100, // amounts arrive in minor units (cents)
currency,
});
});
</script>Dodaj atrybut meta-pixel. Nic więcej nie jest potrzebne, jeśli Twoja strona już wczytuje piksel.
<kadens-widget handle="your-username" widget="your-widget-id" meta-pixel></kadens-widget>Płatność odbywa się wewnątrz widżetu, w bezpiecznym oknie nad Twoją stroną. Kupujący nie opuszczają Twojej witryny, a Ty nie potrzebujesz własnej konfiguracji płatności.
Kupujący mogą zapłacić, podając tylko e-mail, albo zalogować się na swoje konto Kadens z poziomu widżetu.
Płatność otwiera się w nowej karcie.
| Problem | Rozwiązanie |
|---|---|
Obszar widżetu jest pusty | Twojej witryny prawie zawsze brakuje na liście dozwolonych witryn. Dodaj dokładny adres widoczny w przeglądarce, wraz z www, jeśli je zawiera. |
Kod znika po zapisaniu | Niektóre kreatory stron usuwają skrypty. Użyj zamiast tego kodu iframe: otwórz Zaawansowane w zakładce Instalacja i wybierz iframe. |
Twój kreator nie przyjmuje kodu | Niektóre kreatory stron przyjmują własny kod tylko na płatnym planie. Przewodnik każdego kreatora powyżej mówi, czy dotyczy to Twojego. |
Nadal widzisz starą stronę | Opublikuj swoją witrynę ponownie i odśwież stronę. Niektóre kreatory przez kilka minut przechowują starą kopię. |
Czy to pomogło?