Skip to main content

Introduction

Getting Started​

Here is a simple implementation of the widget. Please refer to Installation section for thorough instructions and examples.

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>

How it's built​

The Tekstiai Widget is built using modern web technologies and best practices to ensure compatibility, performance, and ease of integration. The Widget is a custom web component designed to be easily embedded into any web page or application. It leverages the power of Web Components, React, and Styled Components to provide a seamless and customizable user experience.

Key Technologies​

  • Web Components

    • Custom Elements: The widget is defined as a custom HTML element <tekstiai-widget> using the Custom Elements API. This allows it to be used like any standard HTML element.
    • Shadow DOM: The widget utilizes the Shadow DOM to encapsulate its DOM tree and styles, preventing them from interfering with the host page and vice versa.

  • React

    • React Library: React is used for building the widget's user interface, enabling a modular and component-based architecture.
    • ReactDOM: Responsible for rendering React components into the DOM, including within the Shadow DOM of the custom element.
    • React Context API: Used to pass configuration and state throughout the widget's component tree without prop drilling.

  • Styled Components

    • CSS-in-JS: Styled Components allows for writing CSS directly within JavaScript, scoped to individual components.
    • StyleSheetManager: Ensures that styles are injected into the Shadow DOM, maintaining encapsulation and preventing style leakage.

Dependencies​

The widget relies on the following dependencies:

  • react: Version ^18.2.0
  • react-dom: Version ^18.2.0
  • react-markdown: Version ^9.0.1 (for rendering markdown content)
  • styled-components: Version ^6.1.1

Prerequisites​

API key​

You can generate an API key for your widget in Organization keys section of Administration page inside TekstiAI web application. Copy the Organization key, and replace the value of api-key property in <tekstiai-widget> with the key in your clipboard.

Enabling domain for the widget​

Enabling domains to your widgets can be done in in Embed domains section of Administration page inside TekstiAI web application. The widget's request headers are compared to these domains during the widget's initialization and on every request.

Backwards compatibility​

Current version 0.9.9. of the widget is not backwards compatible with previous versions, due to architectural differences in how the widget is rendered and encapsuled.