1. Hosted webchat
  2. Canvas Components

Hosted webchat

Canvas Components

Overview

Canvas components are specialized UI elements that can be used in Stubber-hosted webchat interfaces to create rich, interactive experiences. These components are rendered directly in the webchat interface and provide a way to display complex information or collect user input.

Open canvas

This will automatically open the canvas for the user

        {
  "platforms": {
    "webchat": {
      "sessionuuid": "~~stub.data._incoming_webchat_data.sessionuuid",
      "webchat_control_event": {
        "action": "page_control",
        "params": {
          "page_action": "open_canvas"
        }
      },
    }
  },
}

Close canvas

This will automatically close the canvas for the user

        {
  "platforms": {
    "webchat": {
      "sessionuuid": "~~stub.data._incoming_webchat_data.sessionuuid",
      "webchat_control_event": {
        "action": "page_control",
        "params": {
          "page_action": "close_canvas"
        }
      },
    }
  },
}

HTML Renderer

The HTML renderer component allows you to display rich HTML content within the webchat interface. This is useful for displaying formatted text, images, tables, and other HTML elements.

Example Usage

        {
  "platforms": {
    "webchat": {
      "sessionuuid": "~~stub.data._incoming_webchat_data.sessionuuid",
      "webchat_control_event": {
        "action": "render_component",
        "params": {
          "component_type": "html",
          "component_params": {
            "html_page": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Random Size Text Test</title>\n  <style>\n    body {\n      margin: 0;\n      padding: 0;\n      font-family: sans-serif;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      height: 100vh;\n      text-align: center;\n      background-color: #f0f0f0;\n    }\n\n    .container {\n      display: flex;\n      flex-direction: column;\n      gap: 1rem;\n    }\n\n    h1 {\n      font-size: 48px; /* Random large size */\n    }\n\n    h2 {\n      font-size: 32px; /* Smaller than h1 */\n    }\n\n    h3 {\n      font-size: 40px; /* Randomly larger than h2 */\n    }\n\n    h4 {\n      font-size: 28px; /* Randomly smallest heading */\n    }\n\n    p {\n      font-size: 20px;\n      max-width: 600px;\n      margin: 0 auto;\n    }\n  </style>\n</head>\n<body>\n  <div class=\"container\">\n    <h1>Heading One</h1>\n    <h2>Heading Two</h2>\n    <h3>Heading Three</h3>\n    <h4>Heading Four</h4>\n    <p>This is a simple paragraph to test font sizes and layout.</p>\n  </div>\n</body>\n</html>\n",
          }
        }
      },
    }
  },
}

The carousel view component allows you to display a horizontal scrollable list of images

Example Usage

        {
  "platforms": {
    "webchat": {
      "sessionuuid": "~~stub.data._incoming_webchat_data.sessionuuid",
      "webchat_control_event": {
        "action": "render_component",
        "params": {
          "component_type": "carousel",
          "component_params": {
            "images": [
              "IMAGE_URL",
              "IMAGE_URL",
            ]
          }
        }
      }
    }
  }
}
Previous <- Hosted webchat
Next Quick Chats ->