Documentation

Make your content collaborative!

Thank you so much for trying out ai-term, on this page, you'll find everything you need to get going!

  • Created: 17 March, 2024
  • Update: 17 March, 2024

If you have any questions that are beyond the scope of this help file, Please feel free to email via The Contact Page.

Installation

Please select the environment you want to set-up ai-term in:

After following the appropriate setup procedure, you can start
Styling your AI-Term

Plain Javascript integration using <ai-term> VanillaJS Web Components

AI-Term Authentication Setup

You must setup your <ai-term> auth key within your web site by adding a meta tag to your <head> section:

html
<meta name="ai-term_apiKey" content="##### API KEY ####"/>
<head>
    <meta name="ai-term_ApiKey" content="##### API KEY ####"/>
    
    <!-- Your other head content goes here -->

</head>

Installation

Simply include the library in your index HTML file. Add the following script tag as the first element inside the <body> or <head> tag:

html
<script type="module" src="https://cryptng.github.io/ai-term-vanillajs/ai-term.js" crossorigin="anonymous"></script>
<body>
    <script type="module" src="https://cryptng.github.io/ai-term-vanillajs/ai-term.js" crossorigin="anonymous"></script>
    
    <!-- Your body content goes here -->

</body>

Usage of <ai-term> Web Component

To use the <ai-term> component, wrap the term you want to enhance within the <ai-term> element. For example:

html 
<h1 class="page-title">
    The <ai-term>Privacy-Friendly</ai-term> Alternative for Secure, User-Respecting Web Human Verification
</h1>

AI-Term chat box web component location and options

To add the AI-powered chat interface, include the <ai-term-chat> element towards the end of your body content. Provide your API key and optional configuration options as attributes:

html
<ai-term-chat/>

    <!-- Your body content is here -->

    <ai-term-chat api-key="your_api_key" options="{chat:'no'}"></ai-term-chat>

</body>

Configuration

  • api-key: Your unique API key for accessing AI services. This overrides the meta tag api-key and can be used for the dev api key. Remember to remove before deploying you site to production.
  • options: A JSON object with configuration settings. For example, {"hightlight":"rgb"} activates the rgb gradient underline for all ai-term tags. Check styling section for more information.

Examples

Here are some examples of how to use in your project:

  • Basic Term Highlighting: <ai-term>Edge Computing</ai-term>
  • Chat Interface: <ai-term-chat ></ai-term-chat>

Support

For support, issues, or contributions, please visit the GitHub repository.

NPM packaged integration using <ai-term> Web Components

AI-Term Authentication Setup

You must setup your <ai-term> auth key within your web site by adding a meta tag to your <head> section:

html
<meta name="ai-term_apiKey" content="##### API KEY ####"/>
<head>
    <meta name="ai-term_ApiKey" content="##### API KEY ####"/>
    
    <!-- Your other head content goes here -->

</head>

Installation

Add our web components library to your project by installing the npm @ai-term/web-components package:

npm
npm install --save @ai-term/web-components
npm install --save @ai-term/web-components

Usage of <ai-term> Web Component

To use the <ai-term> component, wrap the term you want to enhance within the <ai-term> element. For example:

html 
<h1 class="page-title">
    The <ai-term>Privacy-Friendly</ai-term> Alternative for Secure, User-Respecting Web Human Verification
</h1>

AI-Term chat box web component location and options

To add the AI-powered chat interface, include the <ai-term-chat> element towards the end of your body content. Provide your API key and optional configuration options as attributes:

html
<ai-term-chat/>

    <!-- Your body content is here -->

    <ai-term-chat api-key="your_api_key" options="{chat:'no'}"></ai-term-chat>

</body>

Configuration

  • api-key: Your unique API key for accessing AI services. This overrides the meta tag api-key and can be used for the dev api key. Remember to remove before deploying you site to production.
  • options: A JSON object with configuration settings. For example, {"hightlight":"rgb"} activates the rgb gradient underline for all ai-term tags. Check styling section for more information.

Examples

Here are some examples of how to use in your project:

  • Basic Term Highlighting: <ai-term>Edge Computing</ai-term>
  • Chat Interface: <ai-term-chat ></ai-term-chat>

Support

For support, issues, or contributions, please visit the GitHub repository.

React Next.js integration using <ai-term> React Components

AI-Term Authentication Setup

You must setup your <ai-term> auth key within your web site by adding a meta tag to your <head> section:

html
<meta name="ai-term_apiKey" content="##### API KEY ####"/>
<head>
    <meta name="ai-term_ApiKey" content="##### API KEY ####"/>
    
    <!-- Your other head content goes here -->

</head>

In React Next.js this can be achieved by using the Metadata module of Next.js in you page.tsx file:

page.tsx
import { Metadata } from 'next' export const metadata: Metadata = { other: { "ai-term_apiKey": '#### API KEY ####', } }
//Your other imports
import { Metadata } from 'next'

export const metadata: Metadata = {
    other: {
        "ai-term_apiKey": '#### API KEY ####',
    }
}

//Your other page.tsx code

Installation

Add our react components library to your Next.js project by installing the npm @ai-term/react package:

npm
npm install --save @ai-term/react
npm install --save @ai-term/react

Usage of <AiTerm> React Component

To use the React <AiTerm> component, wrap the term you want to enhance within the <AiTerm> element. For example:

html 
<h1 class="section-title">
    The <AiTerm>Privacy-Friendly</AiTerm> Alternative for Secure, User-Respecting Web Human Verification
</h1>

AI-Term chat box React component location and options

To add the AI-powered chat interface, include the <AiTermChat> element towards the end of your page content. Provide optional configuration options as attributes:

html
<AiTermChat></AiTermChat>

    <!-- Your page content is here -->

    <AiTermChat></AiTermChat>

</main>

Configuration

  • api-key: Your unique API key for accessing AI services. This overrides the meta tag api-key and can be used for the dev api key. Remember to remove before deploying you site to production.
  • options: A JSON object with configuration settings. For example, {"hightlight":"rgb"} activates the rgb gradient underline for all ai-term tags. Check styling section for more information.

Examples

Here are some examples of how to use in your project:

  • Basic Term Highlighting: <AiTerm>Edge Computing</AiTerm>
  • Chat Interface: <AiTermChat ></AiTermChat>

Support

For support, issues, or contributions, please visit the GitHub repository.

Wordpress integration using <ai-term> Web Components

WordPress Preparation

Integrating AI-Term into your WordPress site is straightforward. We recommend using the "Head & Footer Code" plugin for a seamless addition of custom scripts. Here's a simple guide to get you started:
Follow these steps:

  1. Navigate to the 'Plugins' section in your WordPress dashboard.
  2. Click on 'Add New' to explore new plugins.
  3. Type "Head & Footer Code" in the search bar and wait for the results.
  4. Find and click 'Install Now' on the "Head & Footer Code" plugin.
  5. Go to 'Installed Plugins' under the plugins menu and activate the "Head & Footer Code" plugin.
  6. Select 'Head & Footer Code' from the 'Tools' menu.
  7. You will now be directed to the plugin's page.
Once completed, you're ready to install and configure <ai-term> on your site.

AI-Term Authentication Setup with "Head & Footer Code" plugin

In "Site-wide head, body and footer code" segment insert a meta tag with ai-term authentication information into "HEAD Code" input box:

HEAD Code
<meta name="ai-term_apiKey" content="##### API KEY ####"/>
<meta name="ai-term_ApiKey" content="##### API KEY ####"/>

AI-Term Web Components Installation with "Head & Footer Code" plugin

In the "BODY Code" input box add the ai-term web components script reference:

BODY Code
<script type="module" src="https://cryptng.github.io/ai-term-vanillajs/ai-term.js" crossorigin="anonymous"></script>
<script type="module" src="https://cryptng.github.io/ai-term-vanillajs/ai-term.js" crossorigin="anonymous"></script>

AI-Term Chat Box Web Component Wordpress Installation

Finaly you can insert the ai-term-chat Web Component into the FOOTER Code input box:

FOOTER Code
<ai-term-chat></ai-term-chat>
<ai-term-chat></ai-term-chat>

Usage of <ai-term> Web Component in Wordpress

To use the <ai-term> component in Wordpress, in page edit mode click into the paragraph you want to edit. Wordpress will show above the paragraph some editing tools like this:

Block Paragraph is the only block, and cannot be moved
Change text alignment
Displays more block tools

Hi there! I'm a bike messenger by day, aspiring actor by night, and this is my website. I live in Los Angeles, have a great dog named Jack, and I like orange juice.(And gettin' caught in the rain.)

Click to open a menu with more editing tools. Select "Edit as Html" to enable html edit mode of the selected paragraph.

Block Paragraph is the only block, and cannot be moved
Change text alignment
Displays more block tools

You can now use the <ai-term> tag to enrich your content for example like this!

html
<p>Hi there! I'm a <ai-term>bike messenger</ai-term> by day, aspiring actor by night, and this is my website. I live in Los Angeles, have a great dog named Jack, and I like juice. (And gettin' caught in the rain.)</p>
<p>Hi there! I'm a <ai-term>bike messenger</ai-term>  by day, aspiring actor by night, and this is my website. I live in Los Angeles, have a great dog named Jack, and I like orange juice.(And gettin' caught in the rain.)</p>

Update the page and press "View Page" to see AI-Term in action

Configuration

  • api-key: Your unique API key for accessing AI services. This overrides the meta tag api-key and can be used for the dev api key. Remember to remove before deploying you site to production.
  • options: A JSON object with configuration settings. For example, {"hightlight":"rgb"} activates the rgb gradient underline for all ai-term tags. Check styling section for more information.

Examples

Here are some examples of how to use in your project:

  • Basic Term Highlighting: <ai-term>Edge Computing</ai-term>
  • Chat Interface: <ai-term-chat ></ai-term-chat>

Support

For support, issues, or contributions, please visit the GitHub repository.

AI-Term styling options

CSS variables

For the styling of ai-term text element we provide some pre configured variables you can use in your css 

default:
--underline: 
-style: dashed; 
-width: 0.1em;
--color:inherited;
--text:
-color:inherited;
-cursor:pointer;
-size:auto;
-family:revert; /* the same as the parent of ai-term tag */

All variables can be overwritten by combining parent and child like --underline-width:0.2em;

Example style in your website css: 

ai-term {
--underline-color: #ace7ff;
--text-color: #ace7ff;
--underline-style: solid;
}

ai-term text can be directly styled with the ai-term::part(ai-term-tag) selector like 

ai-term::part(ai-term-tag){
color:yellow;
cursor:hand;
}

Special styles can be activated for each ai-term tag by setting the appropriate class

RGB gradient underline: 

<ai-term class="rgb">Asiatic Double Lily</ai-term>

The rgb underline can be styled via variables 

default:
--underline:
-rgb:linear-gradient(90deg, #e50b58,#b29d23,#55ddbd);
-width: 0.1em;

Asterisk: 

<ai-term class="asterisk">Asiatic Double Lily</ai-term>

The asterisk color ist styled using the --text variables 

--text:
-color:inherited;

Booth styles can be combined like 

<ai-term class="rgb asterisk">Asiatic Double Lily</ai-term>

it is possible to activate them for all ai-term tags by setting the options highlight property at the ai-term-chat web component like 

<ai-term-chat options='{"highlight":"rgb,asterisk"}'></ai-term-chat>