​
Tixae Widget

The Tixae Widget is a React component that allows you to easily integrate Tixae chatbots and voice interfaces into your React applications.

​
Installation

npm install tixae-widget
# or
yarn add tixae-widget
# or
pnpm add tixae-widget

​
Basic Usage

​
Single Widget

import React from "react";
import { TixaeWidget } from "tixae-widget";

const MyApp = () => {
  return (
    <div>
      <h1>My Tixae Widget</h1>
      <TixaeWidget
        configs={[
          {
            ID: "your-widget-id", // YOUR AGENT ID
            region: "eu", // YOUR ACCOUNT REGION
            render: "bottom-right", // can be 'full-width' or 'bottom-left' or 'bottom-right'
            // modalMode: true, // Set this to 'true' to open the widget in modal mode
          },
        ]}
      />
    </div>
  );
};

export default MyApp;

​
Multiple Widgets on the Same Page

When using multiple widgets on the same page, always use unique containerId and unique className values for each widget to prevent conflicts.

import React from "react";
import { TixaeWidget } from "tixae-widget";

const MyApp = () => {
  return (
    <div>
      <h1>My Tixae Widgets</h1>

      <div className="widget-section">
        <h2>Widget 1</h2>
        <TixaeWidget
          configs={[
            {
              ID: "first-widget-id", // YOUR AGENT ID
              region: "eu", // YOUR ACCOUNT REGION
              render: "full-width",
              divClass: "first-widget-container", // unique class for the div
            },
          ]}
          className="first-widget-container"
          height="400px"
          width="200px"
          containerId="widget-1" // unique id
        />
      </div>

      <div className="widget-section">
        <h2>Widget 2</h2>
        <TixaeWidget
          configs={[
            {
              ID: "second-widget-id",
              region: "na",
              render: "full-width",
              divClass: "second-widget-container",
            },
          ]}
          className="second-widget-container"
          height="400px"
          width="200px"
          containerId="widget-2"
        />
      </div>
    </div>
  );
};

export default MyApp;

​
Advanced Configuration

import React from "react";
import { TixaeWidget } from "tixae-widget";

const MyApp = () => {
  return (
    <div>
      <h1>Advanced Configuration</h1>

      <div className="widget-section">
        <h2>Widget with User Data & VF Variables</h2>
        <TixaeWidget
          configs={[
            {
              ID: "your-widget-id",
              region: "eu",
              render: "bottom-right",

              // Custom user data
              user: {
                name: "Jane Smith",
                email: "jane@example.com",
                phone: "+1987654321",
                customField: "Custom user value",
              },

              // Custom user ID
              userID: "custom-user-123",

              // VF variables injection
              vf_variables: {
                from_vg: "This is injected from React component",
                custom_var: "Custom variable value",
              },

              // Auto-start chat
              autostart: true,
            },
          ]}
        />
      </div>

      <div className="widget-section">
        <h2>Widget with Custom Styling</h2>
        <TixaeWidget
          configs={[
            {
              ID: "another-widget-id",
              region: "eu",
              render: "bottom-left",

              // Modal mode
              modalMode: true,

              // Custom stylesheets
              stylesheets: [
                "https://vg-bunny-cdn.b-cdn.net/vg_live_build/styles.css",
                "/path/to/your/custom.css",
              ],

              // Theme customization
              variables: {
                roundedImageURL: "https://example.com/rounded-image.jpg",
                avatarImageUrl: "https://example.com/avatar.jpg",
                headerImageUrl: "https://example.com/header.jpg",
                bannerImageUrl: "https://example.com/banner.jpg",
              },
            },
          ]}
        />
      </div>
    </div>
  );
};

export default MyApp;

​
Component Props

​
TixaeWidget Props

PropTypeDescriptionDefault
configsWidgetConfig[]Array of widget configurationsRequired
classNamestringCSS class for the container''
styleReact.CSSPropertiesCustom styles for the container{}
containerIdstringUnique ID for the widget containerAuto-generated
heightstringHeight of the container'500px'
widthstringWidth of the container'100%'

​
WidgetConfig Options

PropertyTypeDescriptionRequired
IDstringThe ID of the widgetYes
regionstringThe region of the widget (e.g., ‘eu’, ‘na’)Yes
renderstringThe rendering positionYes
divClassstringCustom class for the container divNo
userobjectUser data (name, email, phone, etc.)No
userIDstringCustom user IDNo
autostartbooleanWhether to auto-start the chatbotNo
modalModebooleanWhether to open the widget in modal modeNo
stylesheetsstring[]List of custom stylesheet URLsNo
vf_variablesRecord<string,any>Voice Flow variables to injectNo
variablesobjectTheme customization (avatarImageUrl, etc.)No

​
Best Practices

​
Using Multiple Widgets

When using multiple widgets on the same page:

  1. Always use unique container IDs: Set a unique containerId for each TixaeWidget component to ensure proper isolation.

    <TixaeWidget containerId="widget-1" />
<TixaeWidget containerId="widget-2" />

  2. Use unique class names: Assign unique className values to each widget to prevent CSS conflicts.

    <TixaeWidget className="first-widget-container" />
<TixaeWidget className="second-widget-container" />

  3. Use unique divClass in configs: If you specify divClass in your widget configs, make sure they are unique.

    configs={[{ divClass: "unique-widget-class-1" }]}

​
User Data Configuration

You can provide user information to the widget using the user property:

{
  user: {
    name: 'John Doe',
    email: 'john@example.com',
    phone: '+1234567890',
    // You can add any custom fields here
    customField: 'Custom value'
  }
}

​
Voice Flow Variables

You can inject variables into Voice Flow using the vf_variables property:

{
  vf_variables: {
    from_vg: 'This is injected from React component',
    user_tier: 'premium',
    custom_var: 'Custom variable value'
  }
}

​
Theme Customization

You can customize the widget’s appearance using the variables property:

{
  variables: {
    roundedImageURL: "https://example.com/rounded-image.jpg",
    avatarImageUrl: "https://example.com/avatar.jpg",
    headerImageUrl: "https://example.com/header.jpg",
    bannerImageUrl: "https://example.com/banner.jpg"
  }
}