> ## Documentation Index
> Fetch the complete documentation index at: https://www.text.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Home

> Integrate Text with your tools and extend native features you use daily.

export const Eyebrow = ({children}) => <div className="eyebrow">{children}</div>;

export const PageButton = ({children, href, target}) => <a href={href || '#'} target={target} className="page-button">
    {children}
  </a>;

export const LabeledCard = ({label, title, description}) => <div className="labeled-card">
    {label && <div className="labeled-card__eyebrow">{label}</div>}
    <div className={`labeled-card__title${description ? ' has-body' : ''}`}>
      {title}
    </div>
    {description && <div className="labeled-card__description">
        {description}
      </div>}
  </div>;

export const ApiPlayground = () => {
  const icons = {
    total_chats: <svg aria-hidden="true" width="14" height="14" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
				<rect x="1" y="9" width="3" height="6" rx="1" fill="currentColor" />
				<rect x="6" y="5" width="3" height="10" rx="1" fill="currentColor" />
				<rect x="11" y="1" width="3" height="14" rx="1" fill="currentColor" />
			</svg>,
    list_agents: <svg aria-hidden="true" width="14" height="14" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
				<circle cx="8" cy="5" r="3" stroke="currentColor" strokeWidth="1.4" />
				<path d="M2 14c0-3.314 2.686-5 6-5s6 1.686 6 5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" />
			</svg>
  };
  const ENDPOINTS = [{
    id: "list_agents",
    label: "List agents",
    method: "POST",
    path: "/configuration/action/list_agents",
    url: "https://api.livechatinc.com/v3.6/configuration/action/list_agents",
    referenceUrl: "/api/configuration/",
    buildBody: () => ({})
  }, {
    id: "total_chats",
    label: "Total chats",
    method: "POST",
    path: "/reports/chats/total_chats",
    url: "https://api.livechatinc.com/v3.6/reports/chats/total_chats",
    referenceUrl: "/api/reports/",
    buildBody: () => ({
      distribution: "day"
    })
  }];
  const [activeTab, setActiveTab] = useState(0);
  const [token, setToken] = useState("");
  const [response, setResponse] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  const endpoint = ENDPOINTS[activeTab];
  const handleTabChange = idx => {
    setActiveTab(idx);
    setResponse(null);
    setError(null);
  };
  const handleSend = async () => {
    if (!token) {
      setError("Please enter your authorization token.");
      return;
    }
    setLoading(true);
    setError(null);
    setResponse(null);
    try {
      const isGet = endpoint.method === "GET";
      const res = await fetch(endpoint.url, {
        method: endpoint.method,
        headers: {
          Authorization: `Basic ${token}`,
          ...!isGet && ({
            "Content-Type": "application/json"
          })
        },
        ...!isGet && ({
          body: JSON.stringify(endpoint.buildBody())
        })
      });
      const data = await res.json();
      setResponse({
        status: res.status,
        ok: res.ok,
        data
      });
    } catch (e) {
      setError(e.message);
    } finally {
      setLoading(false);
    }
  };
  const colorizeJson = jsonStr => {
    const tokens = [];
    const regex = /("(?:[^"\\]|\\.)*")(\s*:)?|(\btrue\b|\bfalse\b|\bnull\b)|(-?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?)/g;
    let lastIndex = 0;
    let match = regex.exec(jsonStr);
    while (match !== null) {
      if (match.index > lastIndex) {
        tokens.push(<span key={`p${match.index}`}>
						{jsonStr.slice(lastIndex, match.index)}
					</span>);
      }
      if (match[1] !== undefined) {
        if (match[2] !== undefined) {
          tokens.push(<span key={`k${match.index}`} className="json-key">
							{match[1]}
						</span>);
          tokens.push(<span key={`c${match.index}`}>{match[2]}</span>);
        } else {
          tokens.push(<span key={`s${match.index}`} className="json-str">
							{match[1]}
						</span>);
        }
      } else if (match[3] !== undefined) {
        tokens.push(<span key={`b${match.index}`} className="json-bool">
						{match[3]}
					</span>);
      } else if (match[4] !== undefined) {
        tokens.push(<span key={`n${match.index}`} className="json-num">
						{match[4]}
					</span>);
      }
      lastIndex = match.index + match[0].length;
      match = regex.exec(jsonStr);
    }
    if (lastIndex < jsonStr.length) {
      tokens.push(<span key="end">{jsonStr.slice(lastIndex)}</span>);
    }
    return tokens;
  };
  return <div className="api-card">
			<div className="api-chrome">
				<div className="api-chrome-dots">
					{[0, 1, 2].map(i => <div key={i} className="api-chrome-dot" />)}
				</div>
				<span className="api-chrome-title">Text API — v3.6</span>
			</div>

			<div className="api-content">
				<div className="api-tab-bar">
					{ENDPOINTS.map((ep, idx) => <button key={ep.id} type="button" className="api-tab-btn" data-active={idx === activeTab} onClick={() => handleTabChange(idx)}>
							{icons[ep.id]}
							{ep.label}
						</button>)}
				</div>

				<div className="api-token-hint">
					You'll need a personal access token to run this.{" "}
					<a href="https://www.text.com/app/settings/integrations/api-access/personal-access-tokens">
						Create yours →
					</a>
				</div>

				<input id="api-token" className="api-token-input" type="text" placeholder="Enter your Base64-encoded token" value={token} onChange={e => setToken(e.target.value)} />

				<div className="api-request-row">
					<span className={`api-method api-method-${endpoint.method.toLowerCase()}`}>
						{endpoint.method}
					</span>
					<span className="api-path">{endpoint.path}</span>
					<button type="button" className="api-send-btn" onClick={handleSend} disabled={loading}>
						{loading ? "Sending…" : <>
								Try it
								<svg aria-hidden="true" width="11" height="11" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
									<path d="M3 1.5l6 4.5-6 4.5V1.5z" fill="currentColor" />
								</svg>
							</>}
					</button>
				</div>

				{(response || error) && <div className="api-block">
						<div className="api-response-header">
							{response && <span className="api-status" data-ok={response.ok}>
									{response.status}
								</span>}
							{error && <span className="api-error">{error}</span>}
						</div>
						{response && <div className="api-response-body">
								<pre className="api-code">
									{colorizeJson(JSON.stringify(response.data, null, 2))}
								</pre>
							</div>}
					</div>}
				{response && <div className="api-token-hint" style={{
    textAlign: "right"
  }}>
						<a href={endpoint.referenceUrl}>See full API reference →</a>
					</div>}
			</div>
		</div>;
};

<div id="home-page" className="prose">
  <div className="page-hero">
    <Eyebrow>Text documentation</Eyebrow>

    <h1>
      <span className="font-baskerville">Text API.</span>The backbone of service
      that sells.
    </h1>

    Connect Text to your CRM, automate what your team does manually, and create chat experiences that fit how your business actually works.

    <div className="not-prose hero-actions">
      <div className="desktop-only">
        <PageButton href="#try-it">Send first request ↓</PageButton>
      </div>

      <div className="mobile-only">
        <PageButton href="https://www.text.com/app/settings/integrations/api-access/personal-access-tokens">
          Create token
        </PageButton>
      </div>

      <span>
        <a href="https://www.text.com/docs/getting-started">Get started ›</a>
      </span>
    </div>
  </div>

  <div className="page-section playground-section">
    <Eyebrow>Try it out</Eyebrow>

    <h2 id="try-it">See Text respond in real time</h2>

    Pick an endpoint, paste your token, and run it. This is your API connection — all under one minute.

    <div className="not-prose playground-wrapper">
      <ApiPlayground />
    </div>
  </div>

  <div className="page-section">
    <Eyebrow>How it works</Eyebrow>

    ## How your tools and Text talk to each other

    Every integration uses one of two patterns — sometimes both. Which one you need depends on whether you're telling Text to do something, or waiting for Text to tell you something happened.

    <div className="two-col-grid">
      <LabeledCard label="APIs and SDKs" title="Send commands from your systems into Text" description="Use the API when you want to trigger something inside Text from an external tool — on your schedule, in response to something happening in your own stack." />

      <LabeledCard label="Webhooks and pushes" title="Get notified the moment something happens in Text" description="Use webhooks when you want Text to push data to your systems automatically — no polling, no manual exports, no missed timing." />
    </div>
  </div>

  <div className="page-section">
    <Eyebrow>What you can build</Eyebrow>

    ## Revenue gaps Text integrations will help you close

    <div className="two-col-grid">
      <LabeledCard label="Revenue" title="Chats that end without a purchase — and no follow-up" description="Connect Text to your store. When a customer leaves without buying, your system gets their details and exactly what they were browsing. The follow-up handles itself." />

      <LabeledCard label="Agent productivity" title="Context missing at the moment it costs you" description="Pull order history, account status, and past interactions from your existing tools directly into Text. Agents see what they need before the conversation starts — without switching tabs." />

      <LabeledCard label="Reporting" title="Conversation data that never makes it into your reports" description="Response times, satisfaction scores, purchase outcomes — sent to your CRM or BI tool automatically at the end of every conversation. No exports, no manual steps." />

      <LabeledCard label="Automation" title="Agent hours lost to questions a bot could handle" description="Build a bot for order status, returns, and availability. It runs around the clock and hands off when needed — with the full conversation already there." />
    </div>
  </div>

  <div className="page-section">
    <Eyebrow>Explore all APIs</Eyebrow>

    ## Pick your starting point

    <CardGroup cols={3}>
      <Card title="Agent Chat API" icon="headset" href="/api/agent-chat/">
        Send messages and build bots from outside Text.
      </Card>

      <Card title="Reports API" icon="chart-bar" href="/api/reports/">
        Pull performance data into your BI tools or sheets.
      </Card>

      <Card title="Configuration API" icon="gear" href="/api/configuration/">
        Manage agents, teams, and routing rules in bulk.
      </Card>
    </CardGroup>

    <Card title="Explore all APIs" icon="arrow-right" href="/api-overview/messaging-apis" style={{ marginTop: "16px" }}>
      A plain-language tour of every Text API — what each one does, who it's for,
      and when to use it.
    </Card>
  </div>
</div>
