T
Typebot•13mo ago
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: 
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"
      }
    ]
  }
}
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: 
<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"}}}
            />
<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 Replies
Baptiste
Baptiste•13mo ago
If you set isPreview then typebot needs to be the typebot ID not the typebot public ID
Baptiste
Baptiste•13mo ago

Did you find this page helpful?