<Script> render every page NEXTJS

Question

I have a problem.. I have a script that renders every page in the same place.

I have a Bot (Watson) component that has this script:

<Script>
                {`
    
                  
              window.watsonAssistantChatOptions = {
                showLauncher: false,
                openChatByDefault: true,
                element: document.querySelector('.chatElement'),
                onLoad: function(instance) {
                    instance.updateHomeScreenConfig({
                        is_on: true,
                        greeting: '',
                        starters: {
                          is_on: true,
                          buttons: [
                            {
                              label: 'Turn home screen off',
                            },
                            {
                              label: 'Add conversation starters',
                            },
                            {
                              label: 'Add custom content',
                            },
                          ],
                        },
                      });

                    // Subscribe to the "pre:send" event.
                    instance.on({ type: "pre:send", handler: preSendhandler });
                  
                    instance.render();
                  }
              };

                setTimeout(function(){
                const t=document.createElement('script');
                t.src="https://web-chat.global.assistant.watson.appdomain.cloud/versions/" +
                    (window.watsonAssistantChatOptions.clientVersion || 'latest') +
                    "/WatsonAssistantChatEntry.js"
                document.head.appendChild(t);
                `}
</Script>

And this is inside a container.

The problem is: Every time that I change of page it creates more one chat screen. eg:

In the example above it was created twice, (main page and another page that I clicked).

I already added on _document.js but it didn't work.

Does someone know how to prevent this?

Answer 1

To resolve this, I have installed the npm package of IBM WebChat (npm I @ibm-watson/assistant-web-chat-react) and then created a component and imported it into app.js.

My component look like this.

import React, { useEffect } from "react";
import { withWebChat } from "@ibm-watson/assistant-web-chat-react";

const Watson = ({ createWebChatInstance }) => {
  useEffect(() => {
    function onWebChatLoad(instance) {
      instance.updateHomeScreenConfig({
        is_on: false,
        greeting: "",
        starters: {
          is_on: false,
          buttons: [
            {
              label: "Turn home screen off",
            },
            {
              label: "Add conversation starters",
              url: "/contact",
            },
            {
              label: "Add custom content",
            },
          ],
        },
      });

      instance.render();
    }

    // A web chat configuration options object as documented at https://web-chat.global.assistant.watson.cloud.ibm.com/docs.html?to=api-configuration#configurationobject
    const webChatOptions = {
      integrationID: "xxxx",
      region: "eu-gb",
      serviceInstanceID: "xxxxxx",
      onLoad: onWebChatLoad,
      showLauncher: true,
      openChatByDefault: true,
      element: document.querySelector(".chatElement"),
    };

    createWebChatInstance(webChatOptions);
  }, []);

  return <div></div>;
};

// Wrap the component with the method returned by `withWebChat`.
export default withWebChat()(Watson);