Gustavo Steinmetz Posts - Answer Overflow

Gustavo Steinmetz

•Created by Gustavo Steinmetz on 3/27/2024 in #help-and-questions

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"}}}
            />

3 replies

TTypebot

•Created by Gustavo Steinmetz on 3/27/2024 in #help-and-questions

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

6 replies

Gaming

Programming