Widget

Dies ist die Referenzdokumentation für das chatjetapp.com Widget. Wenn du lernen möchtest, wie du ein Chat-Widget zu einer Website hinzufügst, siehe das Widget-Tutorial.

Verwendungsbeispiel

<!DOCTYPE html>
<html dir="ltr" lang="de">
  <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>chatjetapp.com 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="Los geht's">
    </chatjetapp-widget>
  </body>
</html>

Eigenschaften und HTML-Tag-Attribute

Eigenschaft	Attribut	Beschreibung	Typ	Standard
`bot` (erforderlich)	`bot`	Der Bot-Slug zum Verbinden.	`string`	`undefined`
`buttonText`	`button-text`	Der Text, der auf dem Button angezeigt wird.	`string`	`"Chat"`
`expanded`	`expanded`	Ob das Chat-Widget anfänglich erweitert ist.	`boolean`	`false`
`position`	`position`	Die Anfangsposition des Chat-Widgets auf dem Bildschirm.	`"center" \| "left" \| "right"`	`'right'`
`server`	`server`	Die chatjetapp.com Server-URL	`string`	`'https://chatjetapp.com'`
`team` (erforderlich)	`team`	Der Team-Slug zum Verbinden.	`string`	`undefined`
`visible`	`visible`	Ob das Chat-Widget beim Laden sichtbar ist.	`boolean`	`false`

CSS Custom Properties

Name	Beschreibung
`--button-background-color`	Button-Hintergrundfarbe
`--button-background-color-hover`	Button-Hintergrundfarbe bei Hover
`--button-border-color`	Button-Rahmenfarbe
`--button-border-color-hover`	Button-Rahmenfarbe bei Hover
`--button-text-color`	Button-Textfarbe
`--button-text-color-hover`	Button-Textfarbe bei Hover
`--chatjetapp-widget-z-index`	Z-Index der Komponente

Erstellt mit StencilJS.