How to add the AiWerkz Chat Header to a web page

With AiWerkz, you can create a chat package that can be easily shared. The chat package can be sent as a complete package (e.g., via email) or accessed through a shared or embedded link on a web page.

Another option is to embed the AiWerkz Chat Header, a "Chat..." button, directly within your web pages. This feature allows your users to both enter a question and load a chat package to their clipboard simply by clicking "Go..."

While enabling this feature involves several steps, it is straightforward for any web developer. The following instructions will guide you through adding an AiWerkz Chat Header "Enter a question..." text field and "Chat..." button to your web pages. For a practical example, refer to the top of this web page. Additionally, you can customize the chat functionality to be specific to the current web page or other related content.

Quick Start

Add CSS: Include the AiWerkz stylesheet in your web page.
Add JavaScript: Add the AiWerkz chat overlay JavaScript to your web page.
Add HTML for the Button: Insert the AiWerkz question text box and chat button HTML into your web page.
Add HTML for Display: Add the AiWerkz display HTML element(s) to your web page.
Markup Page Content: Use one or more "div" elements to designate the content to be included in the chat.
Publish: Deploy your page live.

Detailed Instructions

Add CSS

Within the <head> of your web page include the AiWerkz stylesheet reference.

Of course, you can modify the CSS as you like to fit with your own site's styles. <link rel="stylesheet" href="https://aiwerkz.com/styles_aiwerkz_chat_overlay.css">

Add JavaScript

Within the <head> of your web page add the AiWerkz chat overlay JavaScript.

Add HTML for the Button

Insert the AiWerkz question text box and chat button HTML into your web page within the <body> section.

To get the proper placement within your web page may require some experimenting. Generally, we have found that the Chat question field and button work well just below the HTML for the web page menu or logo.

Add HTML for Display

Add the AiWerkz display HTML element(s) within the <body> section of the web page.

We have included buttons for two AI chat platforms; ChatGPT and Google Gemini. Feel free to use other AI chat platforms as AiWerkz chat packages works with all of them. <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> <br><hr> <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>

Including Content from the Web Page in to the Chat Package

Often the page that the user has arrived at will have content that should be included in the chat package. AiWerkz provides several options to include the web page, even if the web page is dynamnically generated, into the chat package.

Specifiy with "div":Use one or more "div" elements to designate the content to be included in the chat package. There are two approaches to marking up content with "div" to be included in a chat package. First, include the entire HTML body within the AiWerkz <div> tag. This is easy but may end up including HTML, CSS and Javascript coding that would also be included in the chat package. If that coding is minimal, like a few HTML tags, then that is ok. Second, and as shown in the example code below, multiple AiWerkz <div> tags could be used around the relevant web page content that you want to include in the chat package. <div class="aiwerkz_page_content">An example of content to include in the chat package. </div> <div class="aiwerkz_page_content">And some more content to include in the chat package. </div>

Reference a chat package: create a chat package How to create a chat package on AiWerkz specificalyl for the content. That chat package would then be referenced in a <meta> tag. Instructions are below.
Set a "meta" tag for the page: A meta tag "aiwerkz_get_body_text" can be set to automatically capture all the text of the web page and included in the chat package. See the next section on Meta Tags for information on how to set this up.

Meta Tags

Several <meta> tags can be specified with the <head> of the web page. There are three meta tags available to customize AiWerkz chat packages.

aiwerkz_get_body_text : Is optional. Specifies that the entire text of the web page should be captured and included in a chat package. Should not be used with "in page" "div" tags like <div class="aiwerkz_page_content"> as all text will be captured regardless. This is typically the easiest way to include web page content into a chat package. This options provides the least control over what information is included in the chat package as it grabs all of the text of the web page.
aiwerkz_fetch_pages : Is optional. Enables web pages from the host domain to be included in chat packages.
aiwerkz_document_section_ids : Is optional. Specifies the document_section_id of one or more existing chat packages that will also be inlcuded in the dynamically generated chat package. Is a meta tag in JSON format. In the example below there are three included document_section_ids (chat packages) and descriptions of them. The descriptions are optional.
aiwerkz_custom_instruction : Is optional. Allows for the inclusion of a custom instruction within the chat package. Keep in mind that a chat package is made up of three components;
1. Instructions to the AI Chat System
2. Content or information to be used as context in a chat session
3. The user question.
aiwerkz_document_section_ids : Is optional. Specifies the document_section_id of one or more existing chat packages that will also be inlcuded in the dynamically generated chat package. Is a meta tag in JSON format. In the example below there are three included document_section_ids (chat packages) and descriptions of them. The descriptions are optional.
aiwerkz_group_id : Is optional. Specifies one AiWerkz chat package group. Do not use if including aiwerkz_document_section_ids.

Below are examples of <meta> tags. Of course, you would change the values to your own.

A complete example of adding AiWerkz chat to a web page

Below is a complete example of a simple web page with integrated AiWerkz chat package capabilities.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="aiwerkz_document_section_ids" content="dttxocysw2dc_mchutf0n9enj_scnxazd7tu1s_527p98wduq82"> <meta name="aiwerkz_custom_instruction" content="Limit all responses to 20 words or less."> <title>AiWerkz Chat Integration Example</title> <link rel="stylesheet" href="https://aiwerkz.com/styles_aiwerkz_chat_overlay.css"> <script src="https://aiwerkz.com/includes/aiwerkz_chat_overlay.js" defer></script> </head> <body> <header> <h1>AiWerkz Chat Integration</h1> </header>  <div class="aiwerkz-chatheader-input-area"> <input type="text" id="aiwerkzChatHeaderInput" placeholder="Enter a question..." autofocus> <button id="aiwerkzsendBtn">Chat...</button> </div>  <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> <br><hr><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>  <div class="aiwerkz_page_content"> <p>This is an example of content to include in the chat package.</p> </div> <div class="aiwerkz_page_content"> <p>Here is some additional content to include in the chat package.</p> </div> <footer> <p>© 2024 TrxSys LLC. All rights reserved.</p> </footer> </body> </html>

Publish

Deploy your web page to your production web server.