Skip to main content

Installation

Instructions​

To integrate the Tekstiai Widget into your website or application, follow these steps:

Include the Widget Script​

Include the Tekstiai Widget script in your HTML file by adding the following <script> tag to the <head> or end of the <body> section:

<script src="https://cdn.teksti.ai/widget/tekstiai-embed-widget-v0.9.9.js"></script>

Add the Custom Element​

Insert the custom <tekstiai-widget> element into your HTML where you want the widget to appear:

<tekstiai-widget
  api-key="YOUR_API_KEY"
  options-button-text="Ask"
  styles-button-background-color="#007bff"
></tekstiai-widget>

Set Required Attributes​

  • api-key: (Required) Your API key provided by Tekstiai. This key is necessary for the widget to function properly.

Customize Options and Styles (Optional)​

You can customize the widget's behavior and appearance using the options-* and styles-* attributes.

  • Options Attributes (options-*): Configure the widget's functionality.
  • Styles Attributes (styles-*): Adjust the widget's visual appearance.

For a full list of available options and styles, see the Customization section.

Ensure Your Domain is Enabled​

Make sure your domain is authorized to use the widget. If you haven't enabled your domain yet, please enable the domain in Administration page of TekstiAI web application.

Type Declaration​

If you're using TypeScript in your project, you need to include the type declaration file to ensure proper typings and avoid type errors.

Download the Type Declaration File​

Download the tekstiai-widget.d.ts file from the following link:

Download tekstiai-widget-v0.9.9.d.ts

Include the Declaration File in Your Project​

  1. Place the File

    Save the tekstiai-widget.d.ts file in your project's src/types directory or any directory where you keep your type declarations.

  2. Update tsconfig.json

    Ensure that the directory containing the declaration file is included in your TypeScript configuration:

    {
      "compilerOptions": {
        // ... other options
      },
      "include": [
        "src",
        "src/types/tekstiai-widget.d.ts"
      ]
    }

Using the Widget in TypeScript Files​

With the type declarations in place, you can now use the <tekstiai-widget> element in your TypeScript files without any type errors:

import React from 'react';
import 'https://cdn.teksti.ai/widget/tekstiai-embed-widget-v0.9.9.js';

function App() {
  return (
    <div>
      <tekstiai-widget
        api-key="YOUR_API_KEY"
        options-button-text="Ask"
        styles-button-background-color="#007bff"
      ></tekstiai-widget>
    </div>
  );
}

export default App;

Validation Options​

The Tekstiai Widget allows you to enable input validation to ensure that the user's input meets certain criteria before being processed.

Enabling Validation​

To enable validation, use the options-validate-input attribute:

<tekstiai-widget
  api-key="YOUR_API_KEY"
  options-validate-input="true"
></tekstiai-widget>

Validation Parameters​

You can customize the validation behavior using the following attributes:

  • options-validation-error-message: The message displayed to the user when validation fails.

    options-validation-error-message="Please enter a valid question."

  • options-validation-input-length: The minimum number of characters required.

    options-validation-input-length="10"

  • options-validation-regex: A regular expression pattern that the input must match.

    options-validation-regex=".*[a-zA-Z0-9].*"

Example with Validation​

<tekstiai-widget
  api-key="YOUR_API_KEY"
  options-validate-input="true"
  options-validation-error-message="Please enter at least 10 characters."
  options-validation-input-length="10"
  options-validation-regex=".*[a-zA-Z0-9].*"
></tekstiai-widget>

Examples​

HTML​

Here's a complete example of how to use the Tekstiai Widget in a plain HTML file:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Tekstiai Widget Example</title>
  <script src="https://cdn.teksti.ai/widget/tekstiai-embed-widget-v0.9.9.js"></script>
</head>
<body>
  <tekstiai-widget
    api-key="YOUR_API_KEY"
    options-button-text="Send"
    options-validate-input="true"
    options-validation-error-message="Please enter at least 10 characters."
    options-validation-input-length="10"
    styles-button-background-color="#28a745"
  ></tekstiai-widget>
</body>
</html>

Single Page Application (SPA)​

React Application​

To use the widget in a React application:

  1. Include the Widget Script

    Import the widget script in your main JavaScript or TypeScript file:

    import 'https://cdn.teksti.ai/widget/tekstiai-embed-widget-v0.9.9.js';

  2. Use the Custom Element

    import React from 'react';

    function App() {
      return (
        <div>
          <tekstiai-widget
            api-key="YOUR_API_KEY"
            options-button-text="Ask"
            styles-button-background-color="#007bff"
          ></tekstiai-widget>
        </div>
      );
    }

    export default App;

  3. Include the Type Declaration (TypeScript Only)

    Follow the steps in the Type Declaration section to include the tekstiai-widget.d.ts file in your project.

Next.js Application​

When using Next.js, you need to ensure that the widget is only rendered on the client side to prevent server-side rendering issues.

  1. Dynamic Import

    Use dynamic imports to load the widget script only on the client:

    import dynamic from 'next/dynamic';
    import React from 'react';

    const TekstiaiWidget = dynamic(
      () => import('https://cdn.teksti.ai/widget/tekstiai-embed-widget-v0.9.9.js'),
      { ssr: false }
    );

    function HomePage() {
      return (
        <div>
          <tekstiai-widget
            api-key="YOUR_API_KEY"
            options-button-text="Ask"
            styles-button-background-color="#007bff"
          ></tekstiai-widget>
        </div>
      );
    }

    export default HomePage;

  2. Include the Type Declaration

    Include the type declaration file as per the instructions in the Type Declaration section.