Installing on a custom website

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.

Single Page App (a note about navigation)

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.

Opening the chat from your own button

The widget adds a <fibly-chat-widget> element to your page. To open the chat window from your own link or button, for example "Contact us", call its open() method:

<button onclick="document.querySelector('fibly-chat-widget').open()">
  Chat with us
</button>

What's next

If you use a Content Security Policy, add https://cdn.fibly.io to the list of allowed script-src sources and https://api.fibly.io to connect-src, because the widget exchanges messages with that address. After embedding the script, complete domain verification, then verify the installation by following the Installation verification article.