Include Chat in NextJS / ReactJS

[LukeSkywalker]

Infos:

• Used Zammad version: latest
• Used Zammad installation type: docker-compose
• Operating system: debian
• Browser + version: Firefox latest
  Hey
  I want to include the chat widget in a NextJS (ReactJS) project. I have been trying with the Next Script Component but with no luck so far. I have not included an external js library into nextjs other than from npm…

Maybe someone has done this or can give me a hint on how to do it
I added jquery types yarn add -D @types/jquery

const Component = () => {
  return <>
      <Script id='jQuery' src='https://code.jquery.com/jquery-3.6.0.min.js' />
      <Script
        id='chat'
        src='https://service.domain.de/assets/chat/chat.min.js'
        onLoad={() => {
          new ZammadChat({
                  background: '#aad0e4',
                  fontSize: '12px',
                  chatId: 1,
                })
        }}
      />
  </>
}

Browser console returns:

chat notice || Translation needed for 'Compose your message…'

Cheers
Luke

[LukeSkywalker]

Ok, I should have checked the chatId

[LukeSkywalker]

I know it’s more related to Typscript rather than zammad specifically, but can someone enlighten me, so that vs code does not complain about ZammadChat type not being found?
Is there a way to let ts know about the type being imported from the js library?

[LukeSkywalker]

For anyone coming accross this thread later, I simply exported the Chat into a jsx-component and used that one in my TypeScript component.

import Script from 'next/script'

const ServiceChat = () => {
  return (
    <>
      <Script id='jQuery' src='https://code.jquery.com/jquery-3.6.0.min.js' />
      <Script
        id='chat'
        src='https://service.my-domain.de/assets/chat/chat.min.js'
        strategy='lazyOnload'
        onLoad={() => {
          console.log('Loaded Chat')
          $(function () {
            new ZammadChat({
              background: '#122a43',
              fontSize: '12px',
              chatId: 2,
              debug: true,
              title: '<strong>Hilfe benötigt?</strong> Schreiben Sie uns!',
            })
          })
        }}
      />
    </>
  )
}

export default ServiceChat