Strony WWW bez Kodowania: Gotowe Widgety

0:00Cześć.

0:00Zgodnie z tym co omawialiśmy już wcześniej, są dwie sytuacje, gdzie chcemy

0:04coś dołączyć do naszej strony, jakieś zewnętrzne narzędzie.

0:07Pierwsza sytuacja jest taka, że nasz Web Builder

0:09oferuje opcję dołączenie go jak gdyby natywnie.

0:12Czyli przykładowo

0:13jak mamy opcję publikacji to możemy po prostu wkleić sobie Google Analytics ID.

0:17Druga sytuacja była taka, że nie mamy takiej opcji np.

0:20w przypadku Facebook'a Pixela i wtedy korzystamy z tego embedowanego kodu, czyli

0:25dołączamy to narzędzie wstrzykując jego kod

0:28w ten sposób. Trzecia opcja łączenia się z różnymi narzędziami też jest natywna i

0:33występuje w postaci tzw. widget'ów i w wielu Web Bulider'ach znajdziesz tego typu

0:38widget'y, które akurat tutaj dostępne są właśnie w tej sekcji.

0:42Z pomocą tej małej ikonki widgets.

0:45Jeśli zaznaczymy np.

0:46sekcję w footerze, a następnie wybierzemy taki widget i będziemy mogli teraz wybrać jeden

0:51z widget'ów, które są predefiniowane, to np.

0:54z pomocą widget'u Facebook Like wstawienie

0:57na naszą stronę guzika do jej polubienia jest dziecinnie proste, czy po prostu

1:01możemy tu wpisać URL do polubienia albo zostawić pusty.

1:04To wtedy oczywiście zostanie wzięty ten URL, który mamy w pasku adresu.

1:08Dlaczego mielibyśmy ten URL w ogóle wypełniać?

1:11Czasem jest tak, że mamy jakieś parametry w adresie czy jakieś hashtagi itd.

1:14I chcielibyśmy, żeby po prostu naszą główną domenę ktoś mógł polubić i

1:17wyświetlić tutaj polubienia tej głównej domeny.

1:20Nie ma sensu tego robić np.

1:22dla podstron możemy wybrać dodatkowo sobie

1:24jakieś opcje czy to ma być Button with count, czyli z ilością polubień, czy

1:30mamy jeszcze taką drugą opcję w ten sposób, albo w ogóle tylko sam Button bez

1:34informacji o tym, ile osób już polubiło naszą stronę.

1:37No i akcja to może być Like albo, Recommend, czyli poleć albo polub.

1:41Możemy też włączyć wariant, gdzie pokażą się zdjęcia naszych znajomych, czyli

1:46awatary osób, które są wśród naszych znajomych i polubiły tę stronę.

1:50I ewentualnie możemy jeszcze dodać guzik Share,

1:52żeby tym można było podzielić się na Facebooku.

1:54W momencie gdy to zrobimy, skorzystamy z

1:56takiego widget'u i oczywiście musimy też opublikować zmiany do naszej strony.

2:00To będzie wszystko, czyli widget to jest

2:02taka jakaś dodatkowa funkcjonalność, która rozszerza działanie naszej strony, ale nie

2:07musimy jej jakoś szczególnie integrować w tym sensie, że nie musimy ani wpinać

2:11jakiegoś dodatkowego kodu, ani nie musimy tego jakoś szczególnie konfigurować.

2:15Po prostu jest i działa out of the box. W momencie gdy kliknąłbym

2:18recommend to automatycznie, a gdybym wybrał guzik share, zostanę też

2:22przeniesiony na Facebook'a i zobacz, że zgodnie z tymi naszymi opcjami

2:25udostępniania zostało to wyświetlone jako nowy post na Facebook'u.

2:30Mogę tutaj opisać ten post i dodać go w odpowiednie miejsce.

2:33Wybrać polecenie Post to Facebook

2:35działa dokładnie tak, jak byśmy tego oczekiwali.

2:38Korzystanie z widget'ów jest naprawdę

2:39dziecinnie proste i sprowadza się do wyklikania kilku opcji, w tym sidebarze Carrd,

2:43A widget'y, które mamy do dyspozycji to przynajmniej na razie jest kilka typów.

2:48Przede wszystkim widget'y do płatności, czyli Stripe, Gumroad oraz PayPal.

2:52To są trzy różne systemy do płatności, gdzie w Stripe możesz nawet przyjmować

2:56płatności subskrypcjne, podobnie jak w Gumroad PayPal oczywiście wszyscy znają.

3:00Możesz podpiąć sobie taki guzik PayPal'a do opłacenia Twojego produktu.

3:04Będziemy jeszcze szczegółowo zajmowali się

3:06integracją tego typu rozwiązań w części bardziej zaawansowanej.

3:09Natomiast już teraz chciałem powiedzieć,

3:11że jest to możliwe akurat tutaj bezpośrednio z widget'u.

3:14Rzecz jasna podpięcie jakiegoś innego rozwiązania, nawet polskiego operatora

3:18płatności jest też możliwe poprzez ten custom'owy kod, który możemy wstrzyknąć.

3:22Natomiast najłatwiej oczywiście będzie

3:24korzystać z widget'ów. Stripe jest dostępne w Polsce, więc można założyć tam konto i

3:29można bardzo łatwo skonfigurować sobie taką komunikację poza systemami płatności.

3:35Zaraz jeszcze pokażę jak one wyglądają.

3:37Mamy Facebook'a, czyli to co już pokazałem,

3:39a także Typeform, czyli możliwość dodawania ankiet.

3:42Ja też pokażę Ci trochę więcej z Typeform'a w

3:45kolejnej części Typeform umożliwia nam stworzenie jakiejś naprawdę bardzo

3:50zaawansowanej ankiety, podlinkowanie jej i po prostu łatwe wyświetlanie na naszej

3:54stronie w postaci jakiegoś modal'a czy pop-up'a.

3:57Zobaczmy zresztą jak te opcje wyglądają.

3:59Z pomocą plusa wybierzmy widget i gdybyśmy wybrali właśnie np.

4:03Typeform, to mamy tutaj tylko URL, który możemy wkleić i jakieś style, czyli możemy

4:08wyświetlać to w pop-up'ie, albo możemy wyświetlać to wysuwane z prawej czy z

4:12lewej strony lub możemy zaembedować to bezpośrednio do naszej strony.

4:17Button Label można jeszcze określić, czyli zmienić to jak wyświetla się ten przycisk.

4:22No i w zasadzie to tyle jest opcji, które mamy tutaj dostępne.

4:25Kolejno mamy właśnie te opcje płatności, czyli Sprite Checkout, Gameroad albo PayPal.

4:30W przypadku wyboru PayPal'a możemy zobaczyć, że mamy taki przycisk Buy Now.

4:35Możemy zmienić go na Add to Cart, Donate albo Subscribe w

4:40zależności od tego jaką usługę wybierzemy i skonfigurujemy sobie w PayPal'u.

4:44Wszystkie te informacje są tutaj szczegółowo wylistowane.

4:47Jeśli wejdziemy np. w Stripe'a zobacz, że ta instrukcja ma tylko 9

4:51kroków, więc to jest naprawdę bardzo proste.

4:53To co musimy zrobić, czyli ustalamy sobie jaki item chcemy sprzedać, jego nazwę,

4:59kwotę, którą chcemy za to charg'ować,

5:01w jakiej walucie.

5:02I tutaj dobra wiadomość, ponieważ jak widzisz Polish złoty czyli PLN jest

5:06dostępny, możemy wybrać ilość, którą sprzedajemy.

5:09Ewentualnie jeśli mamy skonfigurowanego PayPal'a tak żeby pobierał dodatkowo

5:14podatki albo opłaty za przesyłkę też możemy wpisać tutaj te kwoty.

5:18No i mamy coś takiego jak Merchant ID, musimy to uzupełnić,

5:20to jest po prostu nasz identyfikator

5:23sprzedawcy w PayPal'u, który wklejamy, a także ostatnia opcja return URL, czyli w

5:28momencie gdy ktoś już dokona zakupu, na jaki adres chcemy go przekierować.

5:33Tutaj oczywiście możemy przekierować go na jakąś stronę, thank you itd.

5:37Wiele z tych opcji i konkretne integracje,

5:39które tutaj są, będę też pokazywał Ci, a przynajmniej niektóre w części, w której

5:43będziemy tworzyć kompletne rozwiązania z pomocą no-code.

5:46Więc tutaj przejdziemy jeszcze przez tę część praktyczną.

5:48Na razie chciałbym, żebyś wiedział, że te opcje istnieją.

5:51No i właśnie można skonfigurować sobie

5:53zarówno płatności w PayPal'u, jak i w Stripe Checkout oraz Gumroad.

5:58Gumroad to jest taki serwis, w którym można sprzedawać.

6:01Na ogół sprzedaje się tam jakieś dobra

6:03elektroniczne, czyli jakieś ebooki albo np.

6:06dostęp do jakiejś, jakiegoś twojego UA Kit'a czegoś, co stworzysz.

6:10No i tutaj w ogóle sprawa jest dziecinnie

6:11prosta, ponieważ wystarczy, że dodasz ten produkt na Gumroad.

6:14To też jest bardzo łatwe, żeby założyć sobie tam konto.

6:17Następnie go podlinkujesz

6:18produkt URL'em przykładowo to jest

6:20link do jednej z książek, którą znajdziesz na Gumroad.

6:24Tutaj zmieniasz jeszcze Label na tym przycisku np.

6:27Teraz mam Buy my product, możemy to zmienić i

6:29możemy jeszcze automatycznie odpalać nawet formularz do płatności.

6:33Więc jeżeli to wszystko skonfigurujemy w tych kilku kliknięciach i opublikujemy

6:37sobie zmiany, pokażę Ci jak taki przycisk Gumroad może zadziałać.

6:41Wybieram polecenie Viwe Site, a następnie scrolluję się do footer'a.

6:44Tutaj jest już charakterystyczny guzik, na

6:46którym możemy zmienić tylko tekst, bo jest on charakterystyczny dla Gumroad.

6:49Wybieramy ten guzik.

6:51Mamy fajny preloader i jako overlay na naszej

6:53stronie zobacz, że pojawia się od razu po prostu formularz do płatności.

6:57Gumroad jest świetne, ponieważ pozwala Ci jako twórcy np.

7:00właśnie sprzedawać tego typu produkty, również sprzedawać je w ramach

7:03subskrypcji, że możesz zacząć kogoś chage'ować np.

7:06co miesiąc, ale fantastyczne jest to, że Gumroad rozlicza

7:09wszystkie podatki, czyli to Gumroad sprzedaje, a nie Ty jako biznes,

7:13dzięki czemu nie musisz przejmować się w ogólne księgowością.

7:16Możesz sprzedawać na cały świat. Gumroad

7:18oczywiście bierze od tego jakąś prowizję, ale nie jest ona jakoś przesadnie duża, a

7:22dodatkowo kupujący mają możliwość oczywiście uzyskania faktury, w tym mogą

7:26wpisać sobie polski numer NIP i wtedy dostaną fakturę

7:29zwolniona z VAT'u także z reverse charge.

7:31Także naprawdę bardzo fajnie to działa.

7:34Jedyny problem jest taki, że mogą płacić tylko kartą albo PayPal'em.

7:38Nie mają tutaj wsparcia dla polskich przelewów. Ze Stripe'em

7:41już wkrótce albo już teraz w momencie gdy oglądasz to wideo to jest to możliwe.

7:46W związku z tym będzie można w ten sposób spróbować.

7:49Ale jak widzisz integracja płatności bajka.

7:51Dziecinnie proste.

7:53A to jest akurat strona produktu, która też została w tle wyświetlona.

7:57My możemy wrócić do naszej

7:59strony i jeszcze zobaczyć, co tutaj można dodatkowo wyciągnąć z widget'ów.

8:03Więc mamy Gumroad omówiony, Facebook, mamy

8:06PayPala, mamy Typeform, czyli ankiety, no i mamy również Stripe Checkout,

8:10gdzie trzeba będzie po prostu podać klucze Stripe'a.

8:14Po zarejestrowaniu tam konta będziesz miał

8:16dostępny taki klucz, który można opublikować oraz Secret Key,

8:19trzeba tutaj podać te nasze klucze.

8:21Ja z pomocą magii kina sobie

8:23te klucze moje już tutaj wstawiłem w dashboardzie Stripe'a.

8:26Znajdziesz je w sekcji Developers i w momencie gdy przejdziesz do API Keys.

8:30A druga rzecz, której potrzebujesz jest w produktach czyli sekcji Products.

8:33Tutaj możesz zdefiniować sobie nowy produkt dodając go z pomocą Add Product.

8:37I w momencie gdy wejdziesz do tego

8:38produktu, możesz dodać do niego pricing, czyli dodać cenę

8:42i wtedy ustawiasz sobie tą cenę czy ma ona być Recurring, czy ma być np.

8:48co 3 miesiące pobierana ta sama cena, czy ma być to on time, czyli jednorazowa

8:51opłata w ramach jakiegoś pricing modelu ewentualnie.

8:55I teraz identyfikator tej ceny.

8:56I jeszcze ostatnia rzecz, którą musisz

8:58zrobić to przejść do Settings i tutaj znaleźć sekcję Checkout,

9:01a następnie w Check Out Settings udostępnić sobie domeny,

9:06znaczy dopisać tą domenę na której ma być wyświetlany ten formularz czyli slack.eduweb.pl

9:11Wybieram polecenie Save, a następnie

9:14wracasz w to miejsce, wklejasz gdzie jest Price ID.

9:17Ono się zaczyna właśnie od Price.

9:18I to wszystko tzn.

9:20można tutaj jeszcze jakieś dodatkowe opcje wybrać np.

9:23wymagany adres do bilingu i Success URL, czyli

9:26URL, na który osoba zostanie przekierowana po dokonaniu płatności.

9:29Ja nie muszę nawet tego robić. To jest opcjonalne.

9:31Wybieram polecenie Done.

9:32Mam tutaj kropeczkę sygnalizująca, że zmiany są do opublikowania.

9:36Publikuję to te zmiany.

9:38No i zaraz zobaczymy czy w stopce ten guzik będzie teraz działał.

9:42Wybieram polecenie Pay with Card

9:44to automatycznie jestem przekierowany do Checkout'u Stripe'a.

9:47Mogę zapłacić jedną z metod, które tutaj

9:49są i mogę też zapłacić ewentualnie kartą kredytową.

9:53Adres rozliczeniowe podałem jako wymagane, więc jest tutaj też wymagane.

9:57No i po zapłaceniu będę przekierowany na stronę sukcesu

10:00jeśli ją podam tutaj w Carrd, więc to wszystko zobacz jak prosto można

10:04zrobić, dodać płatności do naszej strony, jak łatwo, ja usunę sobie ten widget, jak łatwo

10:09można będzie skomunikować się z Facebook'iem, czy np. z

10:13Gumroad, czy z pomocą Typeforma zbierać

10:15wiele ciekawych informacji o odwiedzających.

10:18Więc w ten sposób możesz rozszerzać

10:20funkcje, funkcje Twojego landing pages strony, którą stworzysz.

10:23Mam nadzieję, że przetestujesz sobie te opcję i do usłyszenia w kolejnej lekcji.