Add Live Commenting to Bubble.io Sites

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.

På fanen Layout skal du sætte bredden til 100%. Dette sikrer, at kommentarmodulet fylder hele bredden af sin beholder og reagerer korrekt på forskellige skærmstørrelser.

Indstil bredden til 100%

Efter at have ændret inputværdien til 100 (eller den ønskede procentdel) you'll have to click the dropdown next to the number to change it from pixels to procent.

Sæt også en minimumshøjde (f.eks. 400px) for at sikre, at kommentarmodulet har nok plads til at blive vist korrekt.

Efter at have foretaget disse ændringer skal du klikke på knappen Forhåndsvisning 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.