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

# Home

> Welcome to the social.plus documentation

<div className="hero-section">
  <div className="hero-content">
    <div className="hero-text">
      <h1 className="hero-title">Build with social.plus</h1>

      <p className="hero-description">
        Get started with social.plus SDKs, UIKits, and APIs to integrate powerful social features into
        your application - fast, flexible, and built for scale.
      </p>
    </div>

    <div className="search-container">
      <div className="search-box" id="custom-search-trigger" onclick="console.log('DIRECT CLICK DETECTED'); triggerSearch();">
        <span className="search-icon">🔍</span>

        <input type="text" placeholder="Search..." className="search-input" readOnly />

        <span className="search-shortcut">⌘K</span>
      </div>
    </div>

    <script
      dangerouslySetInnerHTML={{__html: `
  console.log('Script is loading...');

  window.triggerSearch = function() {
    console.log('triggerSearch called!');

    // Method 1: Try to find and examine all buttons first
    const allButtons = Array.from(document.querySelectorAll('button'));
    console.log('All buttons on page:', allButtons.map(b => ({
      element: b,
      text: b.textContent?.trim(),
      ariaLabel: b.getAttribute('aria-label'),
      className: b.className,
      id: b.id,
      dataset: Object.assign({}, b.dataset)
    })));

    // Method 2: Try to find search in different ways
    const searchCandidates = [
      document.querySelector('button[aria-label*="Search"]'),
      document.querySelector('button[aria-label*="search"]'),
      document.querySelector('.DocSearch-Button'),
      document.querySelector('[data-search]'),
      document.querySelector('[role="search"] button'),
      document.querySelector('input[type="search"]'),
      ...allButtons.filter(b =>
        b.textContent?.toLowerCase().includes('search') ||
        b.getAttribute('aria-label')?.toLowerCase().includes('search') ||
        b.className.toLowerCase().includes('search')
      )
    ].filter(Boolean);

    console.log('Search candidates found:', searchCandidates);

    // Method 3: Try to trigger via keyboard event to different targets
    const targets = [document, window, document.body, document.documentElement];
    const events = ['keydown', 'keypress', 'keyup'];

    for (const target of targets) {
      for (const eventType of events) {
        const event = new KeyboardEvent(eventType, {
          key: 'k',
          code: 'KeyK',
          keyCode: 75,
          which: 75,
          metaKey: true,
          ctrlKey: false,
          bubbles: true,
          cancelable: true,
          composed: true
        });

        try {
          console.log(\`Dispatching \${eventType} to\`, target);
          target.dispatchEvent(event);
        } catch (e) {
          console.error(\`Error dispatching \${eventType}:\`, e);
        }
      }
    }

    // Method 4: Try clicking the most likely search candidate
    if (searchCandidates.length > 0) {
      console.log('Attempting to click first search candidate:', searchCandidates[0]);
      try {
        searchCandidates[0].click();
      } catch (e) {
        console.error('Error clicking search candidate:', e);
      }
    }

    // Method 5: Check for Mintlify-specific globals
    console.log('Window globals check:');
    console.log('window.mintlify:', window.mintlify);
    console.log('window.docsearch:', window.docsearch);
    console.log('window.DocSearch:', window.DocSearch);
    console.log('window.algolia:', window.algolia);
  };

  // Also set up click handler via JavaScript
  function setupSearch() {
    console.log('Setting up search handler...');
    const searchBox = document.getElementById('custom-search-trigger');
    if (searchBox) {
      console.log('Found search box, adding event listener');
      searchBox.addEventListener('click', window.triggerSearch);
      searchBox.style.cursor = 'pointer';
    } else {
      console.log('Search box not found!');
    }
  }

  // Try multiple times to set up
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', setupSearch);
  } else {
    setupSearch();
  }

  setTimeout(setupSearch, 100);
  setTimeout(setupSearch, 500);
  setTimeout(setupSearch, 1000);

  console.log('Script setup complete');
`}}
    />

    <div className="cards-section">
      <CardGroup cols={3}>
        <Card title="SDKs" icon="layer-plus" href="/social-plus-sdk/overview">
          Integrate social.plus with platform-specific SDKs for auth, real-time events, data, and
          core services.
        </Card>

        <Card title="UIKits" icon="bring-forward" href="/uikit/overview">
          Use prebuilt UI components for feeds, profiles, groups, chat, and live streaming features.
        </Card>

        <Card title="API Reference" icon="code" href="/analytics-and-moderation/social+-apis-and-services/README">
          Explore complete API docs with endpoints, parameters, auth methods, and response formats.
        </Card>

        <Card title="Admin Portal" icon="sidebar" href="/analytics-and-moderation/social+-portal/README">
          Manage apps, regions, billing, usage, and account settings from one centralized platform.
        </Card>

        <Card title="Admin Console & Moderation" icon="sliders" href="/analytics-and-moderation/console/overview/">
          Monitor data, configure settings, and manage moderation across your social.plus applications.
        </Card>

        <Card title="Analytics Dashboard" icon="chart-waterfall" href="/analytics-and-moderation/social+-portal/dashboard/README">
          Analyze chat, community, and live stream data to track engagement and platform performance.
        </Card>
      </CardGroup>
    </div>
  </div>
</div>