Can't figure out how to render a HTML file with Next.JS

I'm working on a project where I want to use Next.JS to create a web page that will show a PDF file on the left side of the screen and on the right side I want to use Chaindesk to create a chat bot that will help you retrieve information from said file, but I can't figure out how to do this, when I have a chat bot ready I can embed the Agent with a bubble on a page by copying the following code on the component of a HTML file:

<script type="module">
  import Chatbox from 'https://cdn.jsdelivr.net/npm/@chaindesk/embeds@latest/dist/chatbox/index.js';

  Chatbox.initBubble({
    agentId: 'id',
    
    // optional 
    // If provided will create a contact for the user and link it to the conversation
    contact: {
      firstName: 'John',
      lastName: 'Doe',
      email: 'customer@email.com',
      phoneNumber: '+33612345644',
      userId: '42424242',
    },
    // optional
    // Override initial messages
    initialMessages: [
      'Hello Georges how are you doing today?',
      'How can I help you ?',
    ],
    // optional
    // Provided context will be appended to the Agent system prompt
    context: "The user you are talking to is John. Start by Greeting him by his name.",
  });
</script>

I have set up a CodePen sandbox to try it out, note that the chat bot won't actually respond with anything, as the id is not provided because I trained it with a file containing sensitive info.

Alternatively I can do the same with a HTML component

<script type="module">
  import Chatbox from 'https://cdn.jsdelivr.net/npm/@chaindesk/embeds@latest/dist/chatbox/index.js';

  Chatbox.initStandard({
    agentId: 'id',
  });
</script>

<chaindesk-chatbox-standard style="width: 100%; height: 650px" />

So far I can't figure out if what I want to do is even possible, I've tried using next/head and next/script as possible solutions but they either don't work or I'm doing something wrong

I can generate a separate HTML file on the /public folder and access it with the router, but that doesn't quite accomplish what I want.

Alternatively, is there a way to divide the page to render the JSX on the left and the HTML on the right?

I am quite new to web development and I'm still learning a lot, so excuse me if I ask things that don't make sense or are not even possible at all.

Either way I appreciate your comments and possible solutions if you have some.

Solution

You can add <script> tags with inline JavaScript by using dangerouslySetInnerHTML and by passing the script contents as a string:

const chatboxJs = `
    import Chatbox from 'https://cdn.jsdelivr.net/npm/@chaindesk/embeds@latest/dist/chatbox/index.js';

  Chatbox.initStandard({
    agentId: 'id',
  });
`

In your component:

<script type="module" dangerouslySetInnerHTML={{ __html: chatboxJs }} />

Since React components return JSX, the style attribute on the custom element must be a style object property.

<chaindesk-chatbox-standard style={{ width: '100%', height: '650px' }} />

See a working example at https://stackblitz.com/edit/stackoverflow-78102886?file=app%2Fpage.tsx