Tilføj live-kommentarer til Bubble.io-websteder

Først skal du navigere til den side/layout, hvor du vil tilføje FastComments. I Bubble-editoren træk og slip et HTML element fra Visual Elements-sidepanelet ind på din side.

Tilføj HTML-element

HTML-elementet giver os mulighed for at indlejre FastComments-widgeten direkte i din Bubble-app.

Klik på det HTML-element, du lige har tilføjet. I egenskabseditoren, der vises, indsæt følgende kode i HTML-feltet:

Bubble.io Live-kommentering kodeudsnit

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 har en tendens til at ændre kodeudsnittet til at være 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

Indsæt FastComments-kode

Bemærk: Denne kode indeholder en genforsøgs-mekanisme for at sikre, at FastComments indlæses korrekt i Bubbles dynamiske miljø. Andre kodeudsnit vil ikke fungere.

Husk at udskifte 'demo' med dit faktiske FastComments-tenant-ID efter tilmelding. Hvis du er logget ind på FastComments.com, burde det allerede være udskiftet.

For at sikre, at kommentar-widgeten vises korrekt, skal vi justere HTML-elementets bredde. Se efter fanen Layout i elementets egenskabseditor.

Find breddeindstilling

Fanen Layout indeholder vigtige indstillinger for størrelse, som hjælper vores kommentar-widget med at vises korrekt på forskellige skærmstørrelser.

Under fanen Layout, indstil bredden til 100%. Dette sikrer, at comment-widget'en fylder hele bredden af sin container og reagerer korrekt på forskellige skærmstørrelser.

Indstil bredden til 100%

Efter at have ændret inputværdien til 100 (eller den ønskede procentdel) skal du klikke på dropdown-menuen ved siden af tallet for at ændre det fra pixels til procentdel.

Indstil også en minimumshøjde (f.eks. 400px) for at sikre, at comment-widget'en har plads nok til at vises korrekt.

Efter disse ændringer skal du klikke på knappen Preview for at se din FastComments-widget i aktion!

Godt klaret! Du har tilføjet live-kommentarer til dit Bubble.io-websted.

Hvis du er stødt på en "permission denied"-fejl, eller gerne vil tilpasse FastComments, så læs videre.

FastComments er designet til at kunne tilpasses, så det matcher din side.

Hvis du vil tilføje brugerdefineret styling eller justere konfigurationen, Se vores tilpasningsdokumentation for at lære hvordan.