BlipChat em Next.js

Estou tentando implementar o chatbot no meu projeto em Next.js. Tentei das duas formas, mas ocorrem os seguintes problemas:

Via script:
Mesmo utilizando o .withTarget('page-wrap'), o layout do blip fica quebrado, tendo que o button perde completamente as configs default e oculpa 100% da tela.
Estou utilizando nesse formato:

<script src="https://unpkg.com/blip-chat-widget@1.6.*" type="text/javascript"></script>
                <script
                    dangerouslySetInnerHTML={
                        {__html: `
                            (function () {
                                window.onload = function () {
                                    new BlipChat()
                                    .withAppKey("minha appkey")
                                    .withButton({ color: "#00F0FA" })
                                    .withTarget('page-wrap')
                                    .build();
                                }
                            })();
                        `}
                    }
                />

Via import { BlipChat } from "blip-chat-widget";:

Após instalação via npm (npm install blip-chat-widget), o recebo um warning do import no vscode com a seguinte mensagem:

Could not find a declaration file for module ‘blip-chat-widget’. ‘/Users/renanvieira/Documents/my-repository/node_modules/blip-chat-widget/dist/blip-chat.js’ implicitly has an ‘any’ type.

e ao consumir o import, conforme abaixo:

useEffect(() => {
        new BlipChat()
            .withAppKey("minha appkey")
            .withButton({ color: "#00F0FA" })
            .build();
    });

Eu recebo o retorno de “self is not defined”.

Qual seria a forma mais correta de implementar o blip em um projeto em Next.js ?