Gustavo Steinmetz

·

isPreview prop NextJs not working?

I'm trying to test the typebot on my NextJs website, but when I try to use it with the isPreview prop I get the following error:

Plain Text

An error occurred while loading the bot.

{
  "status": 400,
  "body": {
    "message": "Input validation failed",
    "code": "BAD_REQUEST",
    "data": {
      "code": "BAD_REQUEST",
      "httpStatus": 400,
      "path": "startChatPreview"
    },
    "issues": [
      {
        "code": "invalid_type",
        "expected": "string",
        "received": "undefined",
        "path": [
          "typebot",
          "id"
        ],
        "message": "Required"
      },
      {
        "code": "invalid_type",
        "expected": "array",
        "received": "undefined",
        "path": [
          "typebot",
          "variables"
        ],
        "message": "Required"
      },
      {
        "code": "invalid_type",
        "expected": "object",
        "received": "undefined",
        "path": [
          "typebot",
          "settings"
        ],
        "message": "Required"
      },
      {
        "code": "invalid_type",
        "expected": "object",
        "received": "undefined",
        "path": [
          "typebot",
          "theme"
        ],
        "message": "Required"
      }
    ]
  }
}

The error message seems to indicate that some fields are missing. But when I remove the isPreview, the component works perfectly. This is the current code of it:

Plain Text

<Bubble
                isPreview={true}
                typebot="my-typebot-name"
                onOpen={handleClick}
                previewMessage={{
                    autoShowDelay: 6000,
                    message: "I'm waiting for you here! :)",
                    avatarUrl:
                        "avatar-url-here",
                }}
                theme={{button: {backgroundColor: "#3948ef"}}}
            />

2 comments

B

GGustavo Steinmetz

·

Theme/Style Settings Not Reflecting in NextJs Components for typebot.io?

I've been adjusting settings within the theme section of typebot.io, but I've noticed these changes aren't being applied within my NextJs components. Is this expected behavior, or might I be overlooking something? Missing some props maybe? I didn't see any prop that would solve this problem besides implementing myself the style?

To detail the adjustments I made in the design, I'm including the changes and how they appear on the typebot.io page and in the NextJs component, where it seems to revert to the default style.

I experimented with both the Standard and Popup options, encountering the same issue with each. Below are some of the configurations I tried:

Plain Text

<Popup typebot="name-of-my-typebot" isOpen={true}/>

Plain Text

<Standard typebot="name-of-my-typebot" style={{ width: '100%', height: '100%' }} />

Plain Text

<Standard typebot="name-of-my-typebot" style={{ width: '100%', height: '100%' }} />

Plain Text

<Standard typebot="name-of-my-typebot" className="h-full w-full" />

Could there be a step I'm missing, or is this inconsistency between typebot.io settings and NextJs components a known issue?"

5 comments

C

G

B

Share feedback, ideas and get community help

isPreview prop NextJs not working?

Theme/Style Settings Not Reflecting in NextJs Components for typebot.io?