@heyai/concierge

Concierge Chat Widget Web SDK

Overview

The Concierge Chat Widget Web SDK is a powerful tool designed to seamlessly integrate the Concierge chatbot (https://heyai.pro/concierge) into your website. This SDK allows you to embed an interactive chat interface, providing your users with instant access to AI-powered assistance directly from your web pages.

This SDK is designed to be lightweight, easy to implement, and highly customizable, ensuring that it integrates smoothly with your existing web infrastructure while maintaining your brand's look and feel.

Installation

npm

npm install @heyai/concierge 

yarn

yarn add @heyai/concierge

CDN

https://cdn.jsdelivr.net/npm/@heyai/concierge@latest/dist/bundle.js

Usage

HTML

<script src="https://cdn.jsdelivr.net/npm/@heyai/concierge@latest/dist/bundle.js"></script>
<script>
  Concierge.renderChatWidget({ apiKey: '<your-api-key>' });
</script>

Replace the api key with yours.

React

If you use React.js, you can use the following code to embed the chat widget.

import { useEffect } from "react";

declare global {
  interface Window {
    Concierge: any;
  }
}

const ConciergeWidget = () => {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://cdn.jsdelivr.net/npm/@heyai/concierge@latest/dist/bundle.js';
    script.async = true;
    script.onload = () => {
      if (window.Concierge) {
        window.Concierge.renderChatWidget({ apiKey: '<your-api-key>' });
      }
    };
    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    };
  }, []);

  return <div id="chatbot-container" />;
};

export default ConciergeWidget;

You can use this component in your React.js app.

const App = () => {
  return (
    <div>
      <ConciergeWidget />
    </div>
  );
};

Replace the api key with yours.