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

# Connect TikTok

> Authorise TheOptimizer to access your TikTok for Business ad accounts using OAuth so it can read campaign data and manage your ads on your behalf.

export const ArcadeVideoButton = ({id, title = "Watch interactive demo", label = "Watch Video"}) => {
  const [open, setOpen] = useState(false);
  return <div style={{
    display: 'inline-block'
  }}>
      <button type="button" onClick={() => setOpen(true)} style={{
    display: 'inline-flex',
    alignItems: 'center',
    gap: '8px',
    backgroundColor: '#3e47ec',
    color: '#ffffff',
    border: 'none',
    padding: '10px 18px',
    borderRadius: '8px',
    fontSize: '15px',
    fontWeight: '600',
    cursor: 'pointer'
  }}>
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="white">
          <polygon points="5,3 19,12 5,21" />
        </svg>
        {label}
      </button>

      {open && <div onClick={() => setOpen(false)} style={{
    position: 'fixed',
    top: 0,
    left: 0,
    width: '100%',
    height: '100%',
    backgroundColor: 'rgba(0, 0, 0, 0.85)',
    zIndex: 9999999,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center'
  }}>
          <div onClick={e => e.stopPropagation()} style={{
    width: '90%',
    maxWidth: '1100px',
    aspectRatio: '16 / 9',
    borderRadius: '12px',
    overflow: 'hidden',
    position: 'relative'
  }}>
            <iframe src={`https://demo.arcade.software/${id}?embed&embed_mobile=tab&embed_desktop=inline&show_copy_link=true`} title={title} frameBorder="0" loading="lazy" allowFullScreen allow="clipboard-write" style={{
    width: '100%',
    height: '100%',
    border: 'none',
    colorScheme: 'light'
  }} />
          </div>

          <button type="button" onClick={() => setOpen(false)} style={{
    position: 'fixed',
    top: '20px',
    right: '24px',
    background: 'rgba(255,255,255,0.15)',
    border: 'none',
    color: '#ffffff',
    fontSize: '24px',
    lineHeight: 1,
    width: '40px',
    height: '40px',
    borderRadius: '50%',
    cursor: 'pointer',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center'
  }}>
            ✕
          </button>
        </div>}
    </div>;
};

export const ArcadePopoutModal = ({id, title = "Interactive demo"}) => {
  const [isPopout, setIsPopout] = useState(false);
  const iframeRef = useRef(null);
  useEffect(() => {
    function onArcadeIframeMessage(e) {
      if (e.origin !== 'https://demo.arcade.software' || !e.isTrusted) return;
      if (!iframeRef.current || !iframeRef.current.contentWindow) return;
      if (e.data.event === 'arcade-init') {
        iframeRef.current.contentWindow.postMessage({
          event: 'register-popout-handler'
        }, '*');
      }
      if (e.data.event === 'arcade-popout-open') {
        setIsPopout(true);
      }
      if (e.data.event === 'arcade-popout-close') {
        setIsPopout(false);
      }
    }
    window.addEventListener('message', onArcadeIframeMessage);
    return () => window.removeEventListener('message', onArcadeIframeMessage);
  }, []);
  return <div style={{
    position: 'relative',
    paddingBottom: 'calc(54.4737% + 41px)',
    height: 0,
    width: '100%'
  }}>
      <iframe ref={iframeRef} src={`https://demo.arcade.software/${id}?embed&embed_mobile=tab&embed_desktop=modal&show_copy_link=true`} title={title} frameBorder="0" loading="lazy" allowFullScreen allow="clipboard-write" style={{
    position: isPopout ? 'fixed' : 'absolute',
    top: 0,
    left: 0,
    width: '100%',
    height: '100%',
    zIndex: isPopout ? 9999999 : 'auto',
    colorScheme: 'light'
  }} />
    </div>;
};

TikTok Ads uses OAuth for authentication — you log in with your TikTok for Business account directly and grant TheOptimizer the permissions it needs. No API keys to copy and paste.

<Steps>
  <Step title="Open the Integrations page">
    From the left-hand menu, go to **Integrations**. Find the **TikTok** card and click **Connect →**.
  </Step>

  <Step title="Authorise access">
    You will be redirected to TikTok for Business's authorisation screen. Sign in with the TikTok for Business account that has access to the ad accounts you want to manage in TheOptimizer.
  </Step>

  <Step title="Review permissions and complete">
    TikTok will display a summary of the permissions being requested. These allow TheOptimizer to read and manage your ad campaigns via the TikTok Marketing API. Review the permissions and click **Confirm** to complete the authorisation.
  </Step>

  <Step title="Connection confirmed">
    TheOptimizer shows a confirmation screen once the connection is established. Initial sync takes **up to 20–30 minutes**. Your campaigns and ads may not appear immediately — this is expected. Give it up to half an hour before troubleshooting.

    <Note>
      If your TikTok for Business account manages multiple ad accounts, all of them will be pulled in and listed under this integration after the initial sync.
    </Note>
  </Step>
</Steps>

***

## What Permissions Are Granted

TheOptimizer requests the following TikTok permissions:

* **Read ad campaigns** — retrieve campaign structure, ad groups, and ad creative data
* **Manage ad campaigns** — update campaign status, budgets, and bids via the TikTok Marketing API
* **Read performance metrics** — access impressions, clicks, spend, and conversion data

TheOptimizer does not request access to your TikTok creator profile, personal account, or any data outside of TikTok for Business.

***

## Next Steps

* Connect a tracking platform to bring conversion and revenue data into your campaign reports