@supportai.it/chat-widget NPM

Universal Chat Widget

Installation

Usign CND:

<script src="https://cdn.jsdelivr.net/npm/@supportai.it/chat-widget"></script>

Using npm

npm install @supportai.it/chat-widget

Usage

JS

<chat-widget
  chat-id="chat-id"
  api-key="api-key"
  button-color="#ff0000"
  button-size="56px"
></chat-widget>

React

import "@supportai.it/chat-widget";

function App() {
  return (
    <chat-widget
      chat-id="chat-id"
      api-key="api-key"
    ></chat-widget>
  );
}

Vue

<script setup>
  import '@supportai.it/chat-widget'
</script>

<template>
  <chat-widget
    chat-id="chat-id"
    api-key="api-key"
  ></chat-widget>
</template>

Updating Context Dynamically

window.dispatchEvent(new CustomEvent("chat-widget/updateContext", {
  detail: {
    /* your object here */
  },
}));

Props

chat-id: The ID of the chat to be opened.
api-key: The API key for authentication.
button-color: Custom button color (Default: #582975)
button-hover-color: Custom hover color (Default: #7b2ba6)
button-size: Button size (Default: 64px)
message-bubble: Display a message bubble on top of the open button (when the chat is closed). Set to false to disable.
chat-align: Chat alignment "left" or "right". (Default: right)
chat-width: Chat width (Default: 400px)
chat-height: Chat height (Default: 600px)