Add Live Commenting to Bubble.io Sites

Najpierw przejdź do strony/układu, na którym chcesz dodać FastComments. W edytorze Bubble przeciągnij i upuść element HTML z paska bocznego Visual Elements na swoją stronę.

Dodaj element HTML

Element HTML pozwoli nam osadzić widżet FastComments bezpośrednio w twojej aplikacji Bubble.

Kliknij element HTML, który właśnie dodałeś. W edytorze właściwości, który się pojawi, wklej poniższy kod do pola HTML:

Fragment kodu komentowania na żywo dla Bubble.io

Copy

1

2<script src="https://cdn.fastcomments.com/js/embed-v2.min.js"></script>

3<div id="fastcomments-widget" style="width: 100%;height: 100%;"></div>

4<script>

5 (function fcLoad() {

6 function tryLoad() {

7 // Bubble ma tendencję do zmieniania fragmentu kodu na async

8 const container = document.getElementById('fastcomments-widget');

9 if (!container) {

10 return waitRetry();

11 }

12 if (!window.FastCommentsUI) {

13 return waitRetry();

14 }

15 if (container.fastCommentsSetup) {

16 return;

17 }

18 window.FastCommentsUI(container, {

19 tenantId: 'demo',

20 pageTitle: top.document.title,

21 url: top.location.href,

22 urlId: top.location.pathname

23 });

24 container.fastCommentsSetup = true;

25 }

26 function waitRetry() {

27 setTimeout(tryLoad, 500);

28 }

29 tryLoad();

30 })();

31</script>

32

Wstaw kod FastComments

Uwaga: Ten kod zawiera mechanizm ponawiania prób, aby zapewnić prawidłowe załadowanie FastComments w dynamicznym środowisku Bubble. Inne fragmenty kodu nie będą działać.

Pamiętaj, aby po rejestracji zastąpić 'demo' swoim rzeczywistym tenant ID FastComments. Jeśli jesteś zalogowany na FastComments.com, powinno być to już zastąpione.

Aby zapewnić poprawne wyświetlanie widżetu komentarzy, musimy dostosować szerokość elementu HTML. Poszukaj zakładki Układ w edytorze właściwości elementu.

Znajdź ustawienie szerokości

Zakładka Układ zawiera istotne opcje rozmiarów, które pomogą naszemu widżetowi komentarzy poprawnie wyświetlać się na różnych rozmiarach ekranów.

W zakładce Układ ustaw szerokość na 100%. Zapewnia to, że widżet komentarzy zajmuje całą szerokość swojego kontenera i poprawnie reaguje na różne rozmiary ekranu.

Ustaw szerokość na 100%

Po zmianie wartości w polu na 100 (lub na wybrany procent) trzeba kliknąć rozwijane menu obok liczby, aby zmienić jednostkę z pikseli na procenty.

Ustaw także minimalną wysokość (np. 400px), aby zapewnić widżetowi komentarzy wystarczającą przestrzeń do poprawnego wyświetlania.

Po wprowadzeniu tych zmian kliknij przycisk Podgląd, aby zobaczyć widżet FastComments w akcji!

Świetna robota! Dodałeś komentarze na żywo na swojej stronie Bubble.io.

Jeśli napotkałeś błąd 'permission denied' lub chciałbyś dostosować FastComments, czytaj dalej.

FastComments został zaprojektowany tak, aby można go było dostosować do twojej witryny.

Jeśli chcesz dodać własne style lub zmienić konfigurację, Zapoznaj się z naszą dokumentacją dotyczącą dostosowywania, aby dowiedzieć się, jak.