Cognitium AI Chat Widget Setup Documentation

Getting Started

This guide will walk you through installing and configuring the Cognitium AI Chat Widget on your website. The widget consists of two files: chat.php and config.json.

Step 1: Download and Place the Files

• Download Files: Use the download button in the hero section to obtain a ZIP archive containing chat.php and config.json.
• Upload to Webroot: Extract the ZIP file and upload both files to your website’s public directory (commonly named public_html, www, or similar). This ensures the files are accessible via a URL.

Step 2: Configure config.json

Open the config.json file in your favorite text editor. This file is divided into three main sections: api, appearance, and logging.

API Configuration

In the api section, update the following values with your credentials:

• user_id: Your unique API user identifier.
• api_key: The API key provided to you.
• api_url: The URL endpoint for the remote API (for example, https://fastapi.cognitium.co.uk/api).

Appearance Settings

The appearance section controls the look and feel of the chat widget. Here are the available options:

• header_text: The title displayed in the chat header (default: "AI Live Chat").
• header_bg_color: The background color of the header (example: #2563eb).
• header_text_color: The text color of the header (example: #ffffff).
• header_font_size: The font size of the header text in pixels (default: 16).
• chat_bubble_color: The background color of the chat bubble icon that appears on your page (example: #2563eb).
• chat_bubble_hover_color: The background color when a user hovers over the chat bubble (example: #1d4ed8).
• chat_bubble_icon: The URL to an image used for the chat bubble (for example, an emoji SVG URL).
• send_button_color: The background color of the send button in the chat interface.
• send_button_text: The text that appears on the send button (default: "Send").
• send_button_text_color: The text color of the send button.
• user_bubble_color: The background color for user message bubbles.
• bot_bubble_color: The background color for bot message bubbles.
• user_text_color: The text color used for user messages.
• bot_text_color: The text color used for bot messages.
• chat_background_color: The overall background color of the chat widget container.
• chat_footer_bg_color: The background color of the chat footer (where the input field is located).
• chat_footer_text_color: The text color used in the chat footer.
• max_chat_height: The maximum height of the chat container (for example, "80vh" means 80% of the viewport height).

Logging Options

The logging section lets you control PHP error logging:

• enable_logs: Set to true to enable error logging, or false to disable it.
• log_file_path: The path or filename where PHP errors will be logged (for example, php_errors.log).

Step 3: Include the Chat Widget in Your Webpage

To add the chat widget to your website, include the following script tag on any page (preferably just before the closing </body> tag):

<!-- Include jQuery if not already included -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<!-- Include the Chat Widget -->
<script src="/chat.php?load=chatwidget"></script>
  

This script dynamically loads the chat widget. A chat bubble will appear at the bottom-right corner of your page. When clicked, it opens the full chat interface.

Step 4: Test the Chat Widget

• Visit the webpage where you have included the chat widget script.
• Click on the chat bubble (located at the bottom-right of the page) to open the chat window.
• Type a message and verify that the widget communicates with the remote API correctly and displays responses.

Additional Information

The chat widget sends user messages to a remote API that returns responses (and may also include link previews). If you encounter any issues, ensure that:

• Your API credentials in config.json are correct.
• Both chat.php and config.json have the proper file permissions.
• Your webserver can access the remote API endpoint specified in api_url.

For further customization options and advanced configurations, refer to the inline comments in chat.php.

Conclusion

After following these steps, your Cognitium AI Chat Widget should be fully operational on your website. You can further customize its appearance and behavior by tweaking the settings in config.json as needed.

Sample Integration Template

The sample code below demonstrates how to integrate the widget into a simple HTML page:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Chat Test</title>
    <!-- Tailwind CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
    <!-- jQuery -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
</head>
<body>
    <!-- Chat Widget Script -->
    <script src="/chat.php?load=chatwidget"></script>
</body>
</html>