Skip to main content

Customization

The Tekstiai Widget offers a variety of customization options that allow you to tailor its appearance and behavior to match your application's needs. You can customize the widget by setting options-* and styles-* attributes on the <tekstiai-widget> element.

Customization Overview​

You can customize the Tekstiai Widget by adding attributes to the <tekstiai-widget> element:

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

Each attribute corresponds to a specific property that you can set to customize the widget's behavior or style.

Options Attributes (options-*)​

Available Options​

Below is a list of all available options-* attributes, their types, default values, and descriptions.

maxLength​

  • Attribute: options-max-length
  • Type: Number
  • Default: 360
  • Description: The maximum number of characters allowed in the user's input.

buttonText​

  • Attribute: options-button-text
  • Type: String
  • Default: "Send"
  • Description: The text displayed on the submit button.

copyButtonText​

  • Attribute: options-copy-button-text
  • Type: String
  • Default: "Copy"
  • Description: The text displayed on the copy button.

referenceButtonText​

  • Attribute: options-reference-button-text
  • Type: String
  • Default: "References"
  • Description: The text displayed on the button that shows references.

inputPlaceholderText​

  • Attribute: options-input-placeholder-text
  • Type: String
  • Default: "Type your question here..."
  • Description: The placeholder text displayed in the input field.

gatheringReferencesText​

  • Attribute: options-gathering-references-text
  • Type: String
  • Default: "Gathering references"
  • Description: The text displayed while the widget is fetching references.

referenceListHeaderText​

  • Attribute: options-reference-list-header-text
  • Type: String
  • Default: "" (empty string)
  • Description: The header text displayed above the list of references.

referencesOpenByDefault​

  • Attribute: options-references-open-by-default
  • Type: Boolean
  • Default: false
  • Description: Determines whether the references section is open by default.

copiedToClipboardText​

  • Attribute: options-copied-to-clipboard-text
  • Type: String
  • Default: "✅"
  • Description: The text displayed when content is successfully copied to the clipboard.

validateInput​

  • Attribute: options-validate-input
  • Type: Boolean
  • Default: false
  • Description: Enables or disables input validation.

validationRegex​

  • Attribute: options-validation-regex
  • Type: String (Regular Expression)
  • Default: ".*[a-zA-Z0-9].*"
  • Description: A regular expression pattern that the input must match for validation to pass.

validationInputLength​

  • Attribute: options-validation-input-length
  • Type: Number
  • Default: 5
  • Description: The minimum number of characters required in the input for validation.

validationErrorMessage​

  • Attribute: options-validation-error-message
  • Type: String
  • Default: "Please enter a more concise question, and I will be able to answer it."
  • Description: The error message displayed when input validation fails.

Styles Attributes (styles-*)​

Available Styles​

Below is a list of all available styles-* attributes, their types, default values, and descriptions.

backgroundColor​

  • Attribute: styles-background-color
  • Type: String (CSS color)
  • Default: "#FFF"
  • Description: The background color of the widget.

buttonBackgroundColor​

  • Attribute: styles-button-background-color
  • Type: String (CSS color)
  • Default: "#45ddc5"
  • Description: The background color of the submit button.

buttonTextColor​

  • Attribute: styles-button-text-color
  • Type: String (CSS color)
  • Default: "#FFFFFF"
  • Description: The text color of the submit button.

chatContainerWidth​

  • Attribute: styles-chat-container-width
  • Type: String (CSS width)
  • Default: "90%"
  • Description: The width of the chat container.

controlsBackgroundColor​

  • Attribute: styles-controls-background-color
  • Type: String (CSS color)
  • Default: "#000"
  • Description: The background color of the control elements.

controlsTextColor​

  • Attribute: styles-controls-text-color
  • Type: String (CSS color)
  • Default: "#FFF"
  • Description: The text color of the control elements.

questionBackgroundColor​

  • Attribute: styles-question-background-color
  • Type: String (CSS color)
  • Default: "#fafafa"
  • Description: The background color of the user's question bubbles.

discussionTextColor​

  • Attribute: styles-discussion-text-color
  • Type: String (CSS color)
  • Default: "#000"
  • Description: The text color within the discussion area.

Example Usage​

Below is an example of how to customize the widget using the options and styles attributes.

<tekstiai-widget
  api-key="YOUR_API_KEY"
  options-button-text="Ask Now"
  options-input-placeholder-text="What's on your mind?"
  options-max-length="500"
  options-validate-input="true"
  options-validation-error-message="Please enter at least 10 characters."
  options-validation-input-length="10"
  styles-background-color="#f0f0f0"
  styles-button-background-color="#28a745"
  styles-button-text-color="#fff"
  styles-chat-container-width="80%"
  styles-controls-background-color="#333"
  styles-controls-text-color="#fff"
  styles-question-background-color="#e9ecef"
  styles-discussion-text-color="#212529"
></tekstiai-widget>

Explanation of the Example:

  • Customized Options:

    • Button Text: Changed to "Ask Now".
    • Input Placeholder: Changed to "What's on your mind?".
    • Maximum Input Length: Increased to 500 characters.
    • Validation Enabled: Input must be at least 10 characters.
    • Validation Error Message: Custom message when validation fails.

  • Customized Styles:

    • Background Color: Set to a light gray (#f0f0f0).
    • Button Background Color: Set to green (#28a745).
    • Button Text Color: Set to white (#fff).
    • Chat Container Width: Reduced to 80% of the parent container.
    • Controls Background Color: Set to dark gray (#333).
    • Controls Text Color: Set to white (#fff).
    • Question Background Color: Set to a light gray (#e9ecef).
    • Discussion Text Color: Set to dark gray (#212529).