EnhanceDocs Chat

📦 Installing

Package manager

Using npm:

npm install enhancedocs-chat

Using yarn:

yarn add enhancedocs-chat

🚀 Usage

Getting Started

First you will need to create a project and a public key (pk_) in our Discord Channel. Then you can install the package and start using it 🎉🎉

Use your public key to enable the EnhanceDocs chat powered by AI:

import EnhancedChat from 'enhancedocs-chat';

import 'enhancedocs-chat/dist/style.css';

<EnhancedChat
  config={{
    projectId: "abc123", // <your-project-id>
    accessToken: "pk_abc123" // <your-access-token>
  }}
  {...props}
/>

Usage via script

Use the Chat component in any project, not just React. Load the CSS via style tag, refer to an element by id in your HTML and load EnhanceDocs script using a CDN for NPM:

• unpkg: https://unpkg.com/[email protected]/dist/enhancedocs-chat.umd.js
• jsdelivr: https://cdn.jsdelivr.net/npm/[email protected]/dist/enhancedocs-chat.umd.js

NOTE: You will need to load peer dependencies react and react-dom.

<link href="https://unpkg.com/[email protected]/dist/style.css" rel="stylesheet">

<script>
  document.addEventListener('DOMContentLoaded', () => {
    function loadScript(src, onLoadCallback) {
      const script = document.createElement('script');
      script.src = src;
      script.onload = onLoadCallback;
      document.head.appendChild(script);
    }

    function initEnhanceDocsChat() {
      EnhancedocsChat.renderChat('enhancedocs-chat', {
        config: {
          projectId: 'abc123', // <your-project-id>
          accessToken: 'pk_abc123' // <your-access-token>
        }
        // ...props
      });
    }

    loadScript('https://unpkg.com/react@18/umd/react.production.min.js', () => {
      loadScript('https://unpkg.com/react-dom@18/umd/react-dom.production.min.js', () => {
        loadScript('https://unpkg.com/[email protected]/dist/enhancedocs-chat.umd.js', initEnhanceDocsChat);
      });
    });
  })
</script>

<div id="enhancedocs-chat"></div>