Run the Live Chat Widget

Dev Mode

To run the widget in development mode, execute the following command at the project root level:

npm run dev:widget

The live chat widget will be accessible at http://localhost:5173.

Build for Production

To build the widget for production, execute the following command at the widget folder level:

npm run build

This will generate a production-ready build in the dist folder.

Embed Chat Widget

Once the widget is built, you can easily embed it into any webpage. Here's an example of how to add it to your website:

<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<link rel="stylesheet" href="./style.css">
<script src="<<WIDGET URL>>/cellcast-bot-widget.umd.js"></script>

<div id="live-chat-widget"></div>
<script>
  const el = React.createElement;
  const domContainer = document.getElementById('live-chat-widget');
  ReactDOM.render(
    el(CellcastBotWidget.ChatWidget, {
      apiUrl: 'https://api.yourdomain.com',
      channel: 'web-channel',
      ownerId: 'ownerId'
    }),
    domContainer,
  );
</script>

Replace the values in apiUrl and token with your configuration details.

To prevent the website css from conflicting with the chat widget css, we can leverage the shadow dom:

<script crossorigin src="https://cdn.jsdelivr.net/npm/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://cdn.jsdelivr.net/npm/react-dom@17/umd/react-dom.production.min.js"></script>
<script src="<<WIDGET URL>>/cellcast-bot-widget.umd.js"></script>

<div id="live-chat-widget"></div>
<script>
  // Create the shadow root and attach it to the widget container
  const createElement = (tag, props = {}) => Object.assign(document.createElement(tag), props);
  const shadowContainer = createElement("div");
  document
      .getElementById('live-chat-widget')
      .attachShadow({ mode: 'open' })
      .append(
        shadowContainer,
        createElement("link", {
          rel: "stylesheet",
          href: "<<WIDGET URL>>/style.css"
        });
      );

  // Render the widget inside the shadow root
  ReactDOM.render(
    React.createElement(CellcastBotWidget.ChatWidget, {
      apiUrl: 'https://api.yourdomain.com',
      channel: 'web-channel',
      ownerId: 'ownerId',
    }),
    shadowContainer,
  );
</script>