Widget

This is the reference document for the chatjet.app widget. If you want to learn how to add a chat widget to a website, see the widget tutorial.

Usage Example

<!DOCTYPE html>
<html dir="ltr" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta 
      name="viewport" 
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"
    />
    <title>chatjet.app widget demo</title>
    <script 
      type='module' 
      src='https://unpkg.com/chatjetapp-widget@0.1.0/dist/chatjetapp-widget/chatjetapp-widget.esm.js'>
    </script>
  </head>

  <body style="background-color: #98dbcc">
    <chatjetapp-widget 
      visible="false" 
      bot="demo" 
      team="demo" 
      button-text="Let's Chat">
    </chatjetapp-widget>
  </body>
</html>

Properties and HTML Tag Attributes

Property	Attribute	Description	Type	Default
`bot` (required)	`bot`	The bot slug to connect to.	`string`	`undefined`
`buttonText`	`button-text`	The text to display on the button.	`string`	`"Chat"`
`expanded`	`expanded`	Whether the chat widget is initially expanded.	`boolean`	`false`
`position`	`position`	The initial position of the chat widget on the screen.	`"center" \| "left" \| "right"`	`'right'`
`server`	`server`	The chatjet.app server URL	`string`	`'https://chatjet.app'`
`team` (required)	`team`	The team slug to connect to.	`string`	`undefined`
`visible`	`visible`	Whether the chat widget is visible on load.	`boolean`	`false`

CSS Custom Properties

Name	Description
`--button-background-color`	Button background color
`--button-background-color-hover`	Button background color on hover
`--button-border-color`	Button border color
`--button-border-color-hover`	Button border color on hover
`--button-text-color`	Button text color
`--button-text-color-hover`	Button text color on hover
`--chatjetapp-widget-z-index`	Z-index of the component

Built with StencilJS.