Case Study: How AiWerkz Leverages Chat Packages

At AiWerkz, we are not only the inventors and providers of AI Chat Packages but also their very first users. Our journey began with a unique challenge: introducing a groundbreaking technology to users who were largely unfamiliar with it.

The idea of using AI to interact with documentation or content is not entirely new. However, the solutions currently available to businesses and organizations often fall into two extremes. On one end, there are expensive and complex systems, such as those relying on vector databases and Retrieval-Augmented Generation (RAG). On the other, businesses are left "hoping" their users will manually copy content or upload PDFs to AI chat platforms like ChatGPT.

AiWerkz bridges this gap by offering an innovative and accessible alternative: Chat Packages. These packages provide a seamless way to make content interactive, easy to use, and directly integrated into the user's experience.

AiWerkz maintains two to three dozen documents as web pages, providing detailed information on building, using, and maintaining chat packages. For a smaller site, creating a single, comprehensive chat package might have been feasible. However, due to the volume of our content, that approach wasn't practical.

With AiWerkz, chat packages can be tailored to meet your specific needs. For more details, take a look at Chat Package Best Practices. We quickly realized that one large chat package would not suffice. At the same time, our web pages contain a wealth of descriptive information that can be extremely useful during an AI chat session to address user questions effectively.

Another consideration was whether a page of content would provide all necessary context to answer a person's question. We decided to include supplementary background information about AiWerkz and chat packages to complement the content of any given web page. We also deliberated over whether to add the AiWerkz chat header "Enter a question" and "Chat..." button to every web page, omit it entirely, or include it selectively. Alternatively, we considered linking to chat packages via buttons or links.

Ultimately, we chose to include the AiWerkz "Enter a question" and "Chat..." button on every web page. Adding the necessary code to each page was straightforward, thanks to the instructions provided at How to Add Chat to a Web Page. We configured a meta tag, `aiwerkz_get_body_text`, on each page to capture the page content dynamically. This content is included in the chat package whenever a user enters a question and clicks "Chat...". Additionally, we incorporated a `document_section_ids` meta tag to pull in related chat package content, enriching the dynamically generated chat experience.

The steps we took...

We took the following steps to integrate chat packages in to the AiWerkz web site.

We identified several web pages that had content that would be relevant background context in every chat package. While we could have used the in-web-page meta tag "aiwerkz_fetch_pages" to dynamically fetch the content from the web pages, we decided to create chat packages. One of the key benefits of chat packages is that they can be compressed. Compressing the content reduces the size of the content by up to 75%. This allows for more data (more context) to be included in the chat package.

Each chat package has a unique ID called the document_section_id. So, we added the meta tag of aiwerkz_document_section_ids with several IDs.

AiWerkz provides a meta tag that can capture the content of the current page. This is particularly useful when the user has arrived at a page that is contextually relevant to a question they might ask. AiWerkz also provides instructions to the AI chat system to prioritize the content from the web page that the user starts the chat from.

To the header of each web page we added the AiWerkz javascript and styling sheet. The styling sheet (CSS) allows for a basic style to be applied to the both the AiWerkz Chat Header (chat question bar) and the overlay popup HTML. The basic styles worked well for our site so we used them without any changes.

The code reference also includes the URL for the AiWerkz javascript. Without the Javascript then chat packages will not be created and the Chat Header will not work.

Putting it all together...

We used the below code within our web pages to integrate AiWerkz chat packages. Of course, you will change to reflect your own configuration, document_section_ids, etc.

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="styles_aiwerkz_chat_overlay.css?v=1.014">
    <meta name="aiwerkz_document_section_ids" 
          content='{
            "dttxocysw2dc": "Creating and Managing AI Chat Packages with AiWerkz: A Step-by-Step Guide", 
            "mchutf0n9enj": "Revolutionizing Document Interaction with ICEppl and ICE Packages", 
            "scnxazd7tu1s": "Creating and Managing Chat Package Groups in AiWerkz", 
            "527p98wduq82": "Rethinking Document Chat: AiWerkzs RAG-less Approach"
          }'>
    <meta name="aiwerkz_custom_instruction" content="Content is for the site https://AiWerkz.com"> 
    <meta name="aiwerkz_get_body_text" content="yes"> 
    <script src="https://aiwerkz.com/includes/aiwerkz_chat_overlay.js" defer></script>
</head>
<body>
    <div class="aiwerkz-chatheader-input-area">
        <input type="text" id="aiwerkzChatHeaderInput" placeholder="Enter a question..." autofocus>
        <button id="aiwerkzsendBtn">Chat...</button>
    </div>

    <!-- / html display overlay -->
    <div class="aiwerkz_show_after_go" style="display:none;">
        <div style="max-width:400px; margin:20px auto; text-align:center;">
            <a href="https://aiwerkz.com" style="text-decoration: none; color: inherit;">
                <span><small>Powered by </small><span class="aiwerkz-logo-part1-overlay">Ai</span><span class="aiwerkz-logo-part2-overlay">Werkz</span></span>
            </a>
            <p style="margin-bottom:16px;">A chat package has been created and copied to your clipboard. You can now paste it into ChatGPT or any other AI chat system.</p>
            <button id="aiwerkz_copyBtn" style="width:100%; padding:10px; margin-bottom:10px; background-color:#a9a9a9; color:white; border:none; border-radius:5px; cursor:pointer;">Copy...</button>
            &nbsp<br><hr>&nbsp<br>
            <button onclick="window.open('https://chatgpt.com', '_blank')" style="width:100%; padding:10px; margin-bottom:10px; background-color:#d3d3d3; color:black; border:none; border-radius:5px; cursor:pointer;">Open ChatGPT</button>
            <button onclick="window.open('https://gemini.google.com/', '_blank')" style="width:100%; padding:10px; background-color:#d3d3d3; color:black; border:none; border-radius:5px; cursor:pointer;">Open Google Gemini</button>
        </div>
    </div>
</body>
</html>