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

# Remark SDK Documentation

> Complete guide to implementing and customizing Remark's expert chat widget

## Welcome to Remark SDK

Remark's SDK enables you to integrate expert chat functionality into your website, providing your customers with real-time access to knowledgeable experts who can help them make informed purchasing decisions.

<Card title="Quick Start" icon="rocket" href="/sdk/getting-started" horizontal>
  Get up and running with Remark in minutes. Add the script tag and start tracking customer events.
</Card>

## Key Features

<Columns cols={2}>
  <Card title="Easy Integration" icon="plug" href="/sdk/getting-started">
    Add Remark to your site with a single script tag. No complex setup required.
  </Card>

  <Card title="Customer Tracking" icon="chart-line" href="/sdk/getting-started#set-up-remark-to-track-shopper-journey">
    Track product views, cart additions, and purchases to give experts context.
  </Card>

  <Card title="Widget Control" icon="sliders-horizontal" href="/sdk/advanced#customizing-your-user-experience-with-the-remark-sdk">
    Programmatically open, close, and customize the chat widget behavior.
  </Card>

  <Card title="Event Handling" icon="code" href="/sdk/advanced#listening-for-remark-events">
    Listen to user interactions and create custom integrations.
  </Card>
</Columns>

## Customization

<Card title="Styling & Theming" icon="palette" href="/sdk/styling">
  Customize the widget's appearance to match your brand using CSS variables and Shadow DOM parts.
</Card>

## Implementation Examples

<AccordionGroup>
  <Accordion title="Basic Implementation">
    Add the Remark script directly to your page template's `<head>`.

    ```html theme={null}
    <script
      type="text/javascript"
      src="https://chat-widget.withremark.com/api/loader?shop=your-domain.com"
      async
    ></script>
    ```
  </Accordion>

  <Accordion title="Track Product Views">
    Track when customers view products to give experts context:

    ```javascript theme={null}
    window.remark('track', {
      type: 'ProductPageView',
      productId: 'your-product-id'
    });
    ```
  </Accordion>

  <Accordion title="Control Widget Programmatically">
    Open the chat widget with custom options:

    ```javascript theme={null}
    window.remark('open', {
      from: 'product-page',
      message: 'I need help with this product',
      mode: 'send'
    });
    ```
  </Accordion>
</AccordionGroup>

## What's Next?

<CardGroup cols={2}>
  <Card title="Installation Guide" icon="download" href="/sdk/getting-started">
    Learn how to add Remark to your website and set up tracking.
  </Card>

  <Card title="Styling Guide" icon="palette" href="/sdk/styling">
    Customize the widget's appearance to match your brand.
  </Card>

  <Card title="Advanced Usage" icon="settings" href="/sdk/advanced">
    Explore advanced features like event handling and widget control.
  </Card>
</CardGroup>

<Note>
  **Need help?** Check out our [implementation examples](/sdk/getting-started) or contact our support team.
</Note>
