Skip to content

Chat SDK Integration

Overview

What is it?

  • NeuralSeek's Chat feature enables users to test questions and generate answers using content from their connected KnowledgeBase, similar to Seek. The Chat SDK is easy to integrate, allowing seamless embedding in any website by adding a JavaScript snippet.

Why is it important?

  • This feature empowers users to integrate NeuralSeek's capabilities with a chat-like interface rapidly. It also allows users to drag and drop documents directly into the chat to inquire about them, enhancing interaction and accessibility.

How does it work?

  • NeuralSeek’s Chat SDK connects to the KnowledgeBase content. Users can ask questions directly through a customizable chat widget, which is embedded on their website. When a user submits a question, the Chat SDK queries the NeuralSeek, processes the information, and delivers a relevant response. The integration supports document uploads, making it possible for users to drop files and ask specific questions based on file content. Additionally, options for welcome messages and styling help personalize the chat experience.

Embedding Chat

This is a step-by-step guide to integrating NeuralSeek's Chat SDK into a custom HTML or website.

  1. Go to the NeuralSeek Chat tab.

    chat

  2. Copy the provided embed code for the chat feature, using the HTML <script> tag.

    chat_config

  3. Insert the snippet into your site or HTML file to embed the chat configuration. Below is an example using sample HTML. Make sure to match the chat container id in your HTML with the chatElement within the Chat SDK params.

HTML Example 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NeuralSeek Chat Integration</title>
    <style>
    body, html {
        margin: 0;
        padding: 0;
        height: 100%;
        font-family: Arial, sans-serif;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    h1 {
        margin-top: 20px;
        text-align: center;
    }

    #chat {
        width: 80%; 
        height: auto;
        max-height: 90%; 
        border: 1px solid #ccc;
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
        padding: 20px;
        margin-top: 20px;
        background-color: #f9f9f9;
        overflow: hidden;
    }
</style>
</head>
<body>
    <h1>Welcome to NeuralSeek Chat Integration</h1>
    <div id="chat"></div>
    <script type="module">
    import { NsChat } from 'https://test-neuralseek-instance.neuralseek.com/src/chatSDK.js';

    const chatConfig = {
    "userId": "",
    "chatElement": "chat",
    "apiServer": "https://test-neuralseek-instance.neuralseek.com",
    "instanceId": "test-instance-name",
    "embedCode": 123456,
    "streaming": true,
    "maistroLed": false,
    "maistroFlow": "",
    "enableDrop": true,
    "allowedFiles": [
        ".png",
        ".jpg",
        ".jpeg"
    ],
    "welcomeMessage": "Welcome to NeuralSeek Test!",
    "welcomeBotMessages": [
        "How can we help?"
    ],
    "welcomeButtons": [
        "Tell me about NeuralSeek Test"
    ],
    "turnHistoryLimit": 1,
    "includeRequired": true
    }

    const chat = new NsChat(chatConfig);
    </script>
</body>
</html>

  1. The chat widget will appear as configured and can be further customized to fit the website's design and requirements.

    chat_integrated

  2. Or embed the chat configuration into an existing website.

    chat_website