How to Make a Chat Widget Sticky in a Next.js App

Issue:

The Voiceflow widget in my Next.js app is not fixed in position and moves with the page when scrolling. It should behave like a sticky navbar and remain fixed in the viewport. I tried all ways by CSS, add classes But still not working.

Desired Solution:

Make the Voiceflow widget sticky so it stays in a fixed position as users scroll through the page.

'use client';
import { useEffect } from 'react';
const VoiceflowWidget = () => {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://cdn.voiceflow.com/widget/bundle.mjs';
    script.type = 'text/javascript';
    script.onload = () => {
      if (window.voiceflow) {
        window.voiceflow.chat.load({
          verify: { projectID: '66b3a00fbfc1de98a9d1f53e' },
          url: 'https://general-runtime.voiceflow.com',
          versionID: 'production',
          assistant: {
            title: "Your Title Here",
            description: "Your Description Here",
            image: "Your Image URL Here",
            stylesheet: "../page.module.css"
          }
        });
      }
    };
    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    };
  }, []);

  return <div id="voiceflow-widget" className="voiceflow-widget"></div>;
};

export default VoiceflowWidget;

I think the problem lies in the CSS you have defined in ``, maybe remove that and check. Below is a working example for reference.

script.onload = () => {
  if (window.voiceflow) {
    window.voiceflow.chat.load({
      verify: { projectID: '66b3a00fbfc1de98a9d1f53e' },
      url: 'https://general-runtime.voiceflow.com',
      versionID: 'production',
      assistant: {
        title: "Your Title Here",
        description: "Your Description Here",
        image: "Your Image URL Here",
        // stylesheet: "../page.module.css" // <- remove this!
      }
    });
  }
};

Stackblitz Demo