Discussions

I added this to my app's home page:

  useEffect(() => {
      const script = document.createElement('script');
      script.type = 'module';
      script.src = 'https://agent.d-id.com/v1/index.js';
      script.setAttribute('data-name', 'did-agent');
      script.setAttribute('data-mode', 'fabio');
      script.setAttribute('data-client-key', clientKey);
      script.setAttribute('data-agent-id', agentId);
      script.setAttribute('data-monitor', 'true');
      script.setAttribute('data-position', 'fixed');
      script.setAttribute('data-bottom', '20px');
      script.setAttribute('data-right', '20px');
      document.body.appendChild(script);

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

and it embeds a bubble of my agent fixed to the bottom right of the screen, is there a way to change it so that I can drag it to different parts of the screen? It blocks some of the other elements on my screen. Changing the setAttributes didn't work.