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

# New tools to provide a seamless integration experience

> We are excited to announce several key updates aimed to improve integration processes and enhancing usability across our platform.

export const ChangelogActions = () => {
  return <>
      <style>{`
        .changelog-actions {
          display: flex;
          justify-content: center;
          gap: 12px;
          margin-top: 2rem;
          padding-top: 1.5rem;
          border-top: 1px solid #e5e7eb;
        }
        
        [data-theme="dark"] .changelog-actions {
          border-top-color: #374151;
        }
        
        .changelog-btn {
          display: inline-flex;
          align-items: center;
          gap: 6px;
          padding: 8px 16px;
          border-radius: 9999px;
          border: 1px solid #d1d5db;
          background: transparent;
          color: #6b7280;
          font-size: 14px;
          cursor: pointer;
          transition: all 0.2s ease;
        }
        
        .changelog-btn:hover {
          border-color: #9ca3af;
          background: #f9fafb;
        }
        
        [data-theme="dark"] .changelog-btn {
          border-color: #4b5563;
          color: #9ca3af;
        }
        
        [data-theme="dark"] .changelog-btn:hover {
          border-color: #6b7280;
          background: #1f2937;
        }
      `}</style>
      <div className="changelog-actions">
        <button className="changelog-btn" onClick={() => {
    const btn = event.target.closest("button");
    btn.innerHTML = "❤️ Like";
    btn.style.borderColor = "#ec4899";
  }}>
          🤍 Like
        </button>
        <button className="changelog-btn" onClick={() => {
    const btn = event.target.closest("button");
    navigator.clipboard.writeText(window.location.href);
    const originalContent = btn.innerHTML;
    btn.innerHTML = "✓ Copied";
    btn.style.borderColor = "#22c55e";
    btn.style.color = "#22c55e";
    setTimeout(() => {
      btn.innerHTML = originalContent;
      btn.style.borderColor = "";
      btn.style.color = "";
    }, 2000);
  }}>
          ↗ Share
        </button>
      </div>
    </>;
};

<div style={{ display: "flex", gap: "8px", flexWrap: "wrap", marginBottom: "16px" }}>
  <Badge color="gray" size="sm" icon="calendar">October 3, 2024</Badge>
  <Badge color="purple" size="sm" icon="server">Ad Server</Badge>
  <Badge color="orange" size="sm" icon="arrow-up">Improvement</Badge>
</div>

# Segment Integration

The Segment integration enables users already utilizing Twilio Segment for tracking to easily integrate Topsort events without the need for additional code. This allows for seamless event tracking and reporting, making it faster and more efficient for marketplaces to send events to Topsort.

## Key Features

* No Code Integration: Existing Segment users can integrate Topsort without writing any new code.
* Universal Compatibility: Follows Segment's e-commerce event specification for impressions, clicks, and purchases.
* Simplified Event Mapping: Pre-configured event mapping for product views, clicks, and purchases, reducing setup time.

## Usage

Add Topsort as a destination within your Segment account.

<Frame>
  <img src="https://mintcdn.com/topsort/M3N4mDiL0uw6VdTk/images/changelog/segment-integration.webp?fit=max&auto=format&n=M3N4mDiL0uw6VdTk&q=85&s=6c79e92e40bf0cd5380e21199335bc32" alt="segment integration" width="2938" height="1546" data-path="images/changelog/segment-integration.webp" />
</Frame>

Ensure events like Product Clicked, Product Viewed, and Order Completed are mapped with the required `resolvedBidId` for proper attribution.

Track logged-in users via Segment's identify method.

See complete documentation [here](/en/ad-server/events/twilio-segment).

# New Documentation Platform

We have transitioned from README to Starlight for our documentation platform, adding Codapi for interactive code examples. This new platform reduces integration time, makes it easier for developers to follow best practices, and offers better navigation and search capabilities.

## Key Benefits

* Improved Navigation and Search: Faster, more accessible documentation.
* Interactive Code Examples: Codapi integration provides 30+ interactive code playgrounds for various programming languages.
* SEO and Internationalization: Enhanced global reach and visibility.
* Developer-Focused Design: Features like dark mode, syntax highlighting, and clear typography make the documentation more engaging.

<ChangelogActions />
