Installing on a custom website

How to embed the Fibly widget in plain HTML, Next.js, Nuxt, Vue, and React.

If your site doesn't use a ready-made CMS platform, paste the script directly into the code. Below you'll find examples for the most common frameworks.

Plain HTML

In the file that renders all of your pages (e.g. index.html or a shared template), paste the following just before </body>:

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

Next.js

In a Next.js app, use the built-in <Script> component. In app/layout.tsx (App Router) or pages/_app.tsx (Pages Router):

import Script from 'next/script';

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

Nuxt 3

In the nuxt.config.ts file, add an entry to app.head.script:

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

Vue (CLI / Vite)

In index.html, paste the script before </body>. If you use a plugin like vue-meta, you can register it from your root component.

React (Create React App / Vite)

In public/index.html (CRA) or index.html (Vite), paste the script before </body>. The snippet only needs to be added once; there's no need to add it in your components.

The widget registers once, on the first page load. Internal transitions in an SPA (e.g. between views in React Router) don't require re-embedding the script; the widget stays active.

If you use a Content Security Policy, add https://cdn.fibly.io to the list of allowed script-src sources. After embedding the script, complete domain verification, then verify the installation by following the Installation verification article.

Cookie consent