Instalacja na własnej stronie

Jak osadzić widget Fibly w czystym HTML-u, Next.js, Nuxt, Vue i React.

Jeśli Twoja witryna nie korzysta z gotowej platformy CMS, wklej skrypt bezpośrednio w kodzie. Poniżej znajdziesz przykłady dla najczęściej spotykanych frameworków.

Czysty HTML

W pliku, który renderuje wszystkie podstrony (np. index.html lub szablon współdzielony), tuż przed </body> wklej:

<script async src="https://cdn.fibly.io/widget/fibly-widget.js"></script>

Next.js

W aplikacji Next.js użyj wbudowanego komponentu <Script>. W pliku app/layout.tsx (App Router) lub pages/_app.tsx (Pages Router):

import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html lang="pl">
      <body>
        {children}
        <Script
          src="https://cdn.fibly.io/widget/fibly-widget.js"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

Nuxt 3

W pliku nuxt.config.ts dodaj wpis do app.head.script:

export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          src: 'https://cdn.fibly.io/widget/fibly-widget.js',
          async: true,
        },
      ],
    },
  },
});

Vue (CLI / Vite)

W index.html wklej skrypt przed </body>. Jeśli korzystasz z plugin typu vue-meta, możesz zarejestrować go z poziomu komponentu głównego.

React (Create React App / Vite)

W pliku public/index.html (CRA) lub index.html (Vite) wklej skrypt przed </body>. Snippet wystarczy raz, nie ma potrzeby dodawać go w komponentach.

Single Page App (uwaga o nawigacji)

Widget rejestruje się raz, przy pierwszym załadowaniu strony. Wewnętrzne przejścia w SPA (np. między widokami w React Router) nie wymagają ponownego osadzania skryptu, widget pozostaje aktywny.

Jeśli korzystasz z Content Security Policy, dodaj https://cdn.fibly.io do listy dozwolonych źródeł script-src. Po osadzeniu skryptu wykonaj weryfikację domeny, a następnie sprawdź instalację zgodnie z artykułem Weryfikacja instalacji.