[User Error] @typebot.io/js Ignores apiHost in Nuxt 3 Project

[petarmihaylov]

Hello all,

I love Typebot! I think it's great and has fantastic potential!

I am building a Nuxt 3 project that will be deployed on Netlify and Self Hosting Typebot. It looks like there isn't a Nuxt 3 module for Typebot (yet?) and I tried to use the HTML & JavaScript integration but ran into some issues.

I installed the @typebot.io/js node package and tried to import directly into a component. My code is below.

  <div
    class="bg-brand-secondary-light xl:w-2/3 p-6 pb-8 mx-auto rounded-lg shadow"
  >
  <typebot-standard style="width: 100%; height: 600px; "></typebot-standard>
  </div>
</template>

<script setup>
  import Typebot from '@typebot.io/js/dist/web.js'

  Typebot.initStandard({
    typebot: "lead-generation-copy-56dc9bi",
    apiHost: "https://[REDACTED]",
  });

  const uiStore = useUiStore()

</script>

<style lang="scss" scoped>
</style>```

When the project loads in development, I get an error stating `window is not defined` is not. I go back to the Home page and it recovers - everything works as expected. 

However, when I publish to Netlify, I get a message `The bot you are looking for does not exist`. Inspecting the Network tab, it looks like the specified `apiHost` value is being ignored and it is sending a POST request to https://viewer.typebot.io/api/v1/sendMessage instead of the correct `apiHost`.

I didn't find any results when I searched for `nuxt` so I am either the first one that is trying or I am doing something really, really wrong.

Any help you can offer would be super appreciated. 

I also tried to look for the source code for the `@typebot.io/js` NPM package, but it looks like it is not available? Maybe I just missed it?

Thanks!

[petarmihaylov]

I did some more testing. The Bubble option works correctly. I suspect the issue is related to timing. The request to the apiHost is not initiated until after the Bubble is clicked. At that point, everything on the page has loaded and the request gets sent to the correct address.

[baptisteArno]

I'm not familiar with Nuxt, unfortunately.

It looks like it executes the script from the server to render the page. Is there any way you can execute the script only on client side?

[petarmihaylov]

Thank you for responding!

Also opted for using the

It took some digging, but I was able to load the script on the client side using the following code:

<template>
</template>

<script setup>

  onMounted(async () => {
    const Typebot = await import('@typebot.io/js/dist/web.js');
    Typebot.default.initBubble({
      typebot: "lead-generation-sellyourhouse-io",
      apiHost: "https://...",
      previewMessage: {
        message: "Need to sell your house fast?",
        autoShowDelay: 5000,
        avatarUrl:
          "https://[REDACTED]",
      },
      theme: {
        button: { backgroundColor: "#00BF63" },
        chatWindow: { backgroundColor: "#141E27" },
      },
    });
  })

</script>

<style lang="scss" scoped>
</style>

[petarmihaylov]

Thanks again!