// Integrations — editorial atlas of connections. const { useState: useIntState, useMemo: useIntMemo, useEffect: useIntEffect } = React; const INT_CATEGORIES = [ { id: 'all', label: 'All' }, { id: 'comm', label: 'Chat & comms' }, { id: 'productivity', label: 'Productivity' }, { id: 'docs', label: 'Docs & files' }, { id: 'code', label: 'Code & dev' }, { id: 'crm', label: 'CRM & sales' }, { id: 'calendar', label: 'Calendar & email' }, { id: 'design', label: 'Design' }, { id: 'data', label: 'Data & analytics' }, { id: 'marketing', label: 'Marketing' }, ]; // status: 'live' | 'beta' | 'soon' const INTEGRATIONS = [ // Chat & comms — the surfaces Octodus lives in { id: 'telegram', name: 'Telegram', cat: 'comm', status: 'live', initial: 'T', bg: '#229ED9', desc: 'Octodus’ native home. DMs, groups and channels.' }, { id: 'slack', name: 'Slack', cat: 'comm', status: 'beta', initial: '#', bg: '#4A154B', desc: 'Mention @octodus in any channel. Threads, DMs, slash commands.' }, { id: 'discord', name: 'Discord', cat: 'comm', status: 'beta', initial: 'D', bg: '#5865F2', desc: 'Server-aware bot — gets community context, follows rules.' }, { id: 'whatsapp', name: 'WhatsApp', cat: 'comm', status: 'beta', initial: 'W', bg: '#25D366', desc: 'Voice notes and groups. Octodus replies like a coworker.' }, { id: 'teams', name: 'Microsoft Teams', cat: 'comm', status: 'soon', initial: 'M', bg: '#5059C9', desc: 'Channel and chat support. SSO-friendly.' }, // Productivity { id: 'notion', name: 'Notion', cat: 'productivity', status: 'live', initial: 'N', bg: '#0F0F0F', desc: 'Reads & writes pages, syncs database rows.' }, { id: 'linear', name: 'Linear', cat: 'productivity', status: 'live', initial: 'L', bg: '#5E6AD2', desc: 'Files issues, updates statuses, schedules cycles.' }, { id: 'asana', name: 'Asana', cat: 'productivity', status: 'beta', initial: 'A', bg: '#F06A6A', desc: 'Create tasks from chat, follow up automatically.' }, { id: 'clickup', name: 'ClickUp', cat: 'productivity', status: 'beta', initial: 'C', bg: '#7B68EE', desc: 'Two-way sync across spaces, lists and tasks.' }, { id: 'trello', name: 'Trello', cat: 'productivity', status: 'beta', initial: 'T', bg: '#0079BF', desc: 'Move cards, add comments, set due dates.' }, { id: 'airtable', name: 'Airtable', cat: 'productivity', status: 'live', initial: 'A', bg: '#FCB400', desc: 'Read & write records, build views in chat.' }, // Docs & files { id: 'gdrive', name: 'Google Drive', cat: 'docs', status: 'live', initial: 'G', bg: '#0F9D58', desc: 'Find, read, share. Octodus follows your folder rules.' }, { id: 'gdocs', name: 'Google Docs', cat: 'docs', status: 'live', initial: 'D', bg: '#4285F4', desc: 'Drafts edits inline, takes meeting notes, version aware.' }, { id: 'dropbox', name: 'Dropbox', cat: 'docs', status: 'beta', initial: 'D', bg: '#0061FF', desc: 'Cross-team file ops. Smart links in chat.' }, { id: 'onedrive', name: 'OneDrive', cat: 'docs', status: 'soon', initial: 'O', bg: '#0364B8', desc: 'Personal & enterprise file access.' }, // Code & dev { id: 'github', name: 'GitHub', cat: 'code', status: 'live', initial: 'G', bg: '#0D1117', desc: 'PRs, issues, releases. Reviews while you sleep.' }, { id: 'gitlab', name: 'GitLab', cat: 'code', status: 'beta', initial: 'G', bg: '#FC6D26', desc: 'Pipelines, MRs, infra-as-code reviews.' }, { id: 'vercel', name: 'Vercel', cat: 'code', status: 'beta', initial: 'V', bg: '#000000', desc: 'Deploys, env vars, preview URLs in chat.' }, { id: 'sentry', name: 'Sentry', cat: 'code', status: 'beta', initial: 'S', bg: '#362D59', desc: 'Triages errors, assigns, drafts fixes.' }, { id: 'datadog', name: 'Datadog', cat: 'code', status: 'soon', initial: 'D', bg: '#632CA6', desc: 'Reads metrics & logs to diagnose live.' }, // CRM & sales { id: 'hubspot', name: 'HubSpot', cat: 'crm', status: 'live', initial: 'H', bg: '#FF7A59', desc: 'Logs hot leads from chat, drafts follow-ups.' }, { id: 'salesforce', name: 'Salesforce', cat: 'crm', status: 'beta', initial: 'S', bg: '#00A1E0', desc: 'Update accounts, opportunities, contacts.' }, { id: 'pipedrive', name: 'Pipedrive', cat: 'crm', status: 'beta', initial: 'P', bg: '#1A1A1A', desc: 'Move deals, schedule activities, post receipts.' }, { id: 'intercom', name: 'Intercom', cat: 'crm', status: 'soon', initial: 'I', bg: '#1F8DED', desc: 'Read inbox, draft replies, escalate as needed.' }, // Calendar & email { id: 'gcal', name: 'Google Calendar', cat: 'calendar', status: 'live', initial: 'G', bg: '#4285F4', desc: 'Schedules, reschedules, finds time across humans.' }, { id: 'gmail', name: 'Gmail', cat: 'calendar', status: 'live', initial: 'M', bg: '#EA4335', desc: 'Drafts, follows up, triages important threads.' }, { id: 'outlook', name: 'Outlook', cat: 'calendar', status: 'beta', initial: 'O', bg: '#0078D4', desc: 'Email + calendar, enterprise SSO.' }, // Design { id: 'figma', name: 'Figma', cat: 'design', status: 'beta', initial: 'F', bg: '#1E1E1E', desc: 'Reads files, drops comments, exports assets.' }, { id: 'canva', name: 'Canva', cat: 'design', status: 'soon', initial: 'C', bg: '#00C4CC', desc: 'Generate brand-safe one-pagers in chat.' }, // Data { id: 'snowflake', name: 'Snowflake', cat: 'data', status: 'soon', initial: 'S', bg: '#29B5E8', desc: 'Run SQL from chat, post results.' }, { id: 'bigquery', name: 'BigQuery', cat: 'data', status: 'soon', initial: 'B', bg: '#4285F4', desc: 'Querying & dashboards via natural language.' }, // Marketing { id: 'mailchimp', name: 'Mailchimp', cat: 'marketing', status: 'beta', initial: 'M', bg: '#FFE01B', fg: '#000', desc: 'Draft campaigns, segment audiences, schedule sends.' }, { id: 'webflow', name: 'Webflow', cat: 'marketing', status: 'soon', initial: 'W', bg: '#146EF5', desc: 'CMS reads & writes. Stage and publish from chat.' }, ]; const FEATURED = ['telegram', 'github', 'notion', 'slack', 'gcal']; // Short scope hint per integration — surfaces the OAuth story without legal-ese. const SCOPE_HINTS = { telegram: 'Native · no OAuth', slack: 'Channels · DMs', discord: 'Servers · DMs', whatsapp: 'Voice · groups', teams: 'SSO · channels', notion: 'Read & write', linear: 'Issues · cycles', asana: 'Tasks · follow-ups', clickup: 'Two-way sync', trello: 'Cards · comments', airtable: 'Records · views', gdrive: 'Find · share', gdocs: 'Draft · edit', dropbox: 'Files · links', onedrive: 'Personal · ent', github: 'PRs · reviews', gitlab: 'Pipelines · MRs', vercel: 'Deploys · envs', sentry: 'Triage · fix', datadog: 'Metrics · logs', hubspot: 'Leads · drafts', salesforce:'Accounts · opps', pipedrive: 'Deals · activity', intercom: 'Inbox · replies', gcal: 'Schedule · find time', gmail: 'Draft · triage', outlook: 'Email · calendar', figma: 'Files · comments', canva: 'One-pagers', snowflake: 'SQL · results', bigquery: 'NL queries', mailchimp: 'Drafts · sends', webflow: 'CMS · publish', }; // Simple Icons slugs for real brand glyphs (rendered white on the brand tile). const LOGO_SLUG = { telegram: 'telegram', slack: 'slack', discord: 'discord', whatsapp: 'whatsapp', teams: 'microsoftteams', notion: 'notion', linear: 'linear', asana: 'asana', clickup: 'clickup', trello: 'trello', airtable: 'airtable', gdrive: 'googledrive', gdocs: 'googledocs', dropbox: 'dropbox', onedrive: 'microsoftonedrive', github: 'github', gitlab: 'gitlab', vercel: 'vercel', sentry: 'sentry', datadog: 'datadog', hubspot: 'hubspot', salesforce: 'salesforce', pipedrive: 'pipedrive', intercom: 'intercom', gcal: 'googlecalendar', gmail: 'gmail', outlook: 'microsoftoutlook', figma: 'figma', canva: 'canva', snowflake: 'snowflake', bigquery: 'googlebigquery', mailchimp: 'mailchimp', webflow: 'webflow', }; const LOGO_ICONIFY = { slack: 'logos/slack-icon', teams: 'logos/microsoft-teams', onedrive: 'logos/microsoft-onedrive', outlook: 'vscode-icons/file-type-outlook', salesforce: 'logos/salesforce', pipedrive: 'logos/pipedrive', canva: 'devicon/canva', }; function connectHref(item) { if (item.status === 'soon') { return `https://calend.ly/emdx`; } return 'https://calend.ly/emdx'; } function connectLabel(item) { if (item.status === 'soon') return 'Notify me'; if (item.status === 'beta') return 'Try in beta'; return 'Connect'; } function IntStatusBadge({ status }) { const map = { live: { label: 'Live', cls: 'live' }, beta: { label: 'Beta', cls: 'beta' }, soon: { label: 'Soon', cls: 'soon' }, }; const it = map[status]; return {it.label}; } function IntLogo({ item, size = 44 }) { const [errored, setErrored] = React.useState(false); const iconify = LOGO_ICONIFY[item.id]; const slug = LOGO_SLUG[item.id]; if (iconify && !errored) { return ( ); } const fg = item.fg || '#fff'; const glyphColor = (item.fg ? '000000' : 'ffffff'); return ( ); } // ─────────────────────────────────────────────────────────────────────────── // 1. HERO // ─────────────────────────────────────────────────────────────────────────── function IntegrationsHero({ query, setQuery, total, liveCount, betaCount, soonCount }) { const stats = [ { k: total, v: 'connections' }, { k: liveCount, v: 'live now' }, { k: betaCount, v: 'in beta' }, { k: 'OAuth', v: 'only' }, ]; return (
The Atlas · vol. 01

Lives where
the work already is.

Octodus plugs into the tools your team uses every day. OAuth-only, scoped per-team, revocable in one click — {total} connections and counting, new ones shipping weekly.

{Icons.search({ width: 18, height: 18 })} setQuery(e.target.value)} aria-label="Search integrations" /> {query ? : /}
{stats.map((s, i) => (
{s.k}
{s.v}
))}
); } // ─────────────────────────────────────────────────────────────────────────── // 2. KINETIC LOGO MARQUEE — section separator // ─────────────────────────────────────────────────────────────────────────── function LogoMarquee() { const row = [...INTEGRATIONS, ...INTEGRATIONS]; return ( ); } // ─────────────────────────────────────────────────────────────────────────── // 3. FEATURED ATLAS — editorial bento (1 hero + 4 supporting) // ─────────────────────────────────────────────────────────────────────────── function FeaturedAtlas() { const items = FEATURED.map(id => INTEGRATIONS.find(i => i.id === id)).filter(Boolean); const [hero, ...supporting] = items; return (
Most-used

Where teams plug in first.

See all {INTEGRATIONS.length} →
— The native home
{hero.name}

Octodus was born inside Telegram. DMs, group threads, channels and voice notes — one bot, your whole team, every message.

{SCOPE_HINTS[hero.id]} Open in chat {Icons.arrow({ width: 13, height: 13 })}
{supporting.map((item, idx) => (
{item.name}
{SCOPE_HINTS[item.id]} {Icons.arrow({ width: 12, height: 12 })}
))}
); } // ─────────────────────────────────────────────────────────────────────────── // 4. CONNECTION FLOW — 3-step OAuth trust strip // ─────────────────────────────────────────────────────────────────────────── function ConnectionFlow() { const steps = [ { num: '01', title: 'Authorize', desc: 'Standard OAuth in a new tab. The provider asks you. Octodus never sees a password — only the token they hand back.', }, { num: '02', title: 'Scope', desc: 'Per-team, least-privilege. Octodus requests only what an integration actually needs — no surprise scopes, no “read everything”.', }, { num: '03', title: 'Revoke', desc: 'One click in the dashboard, or remove the bot from the workspace. Tokens die immediately. No support ticket required.', }, ]; return (
Connections, demystified

Three doors. One key.

Same OAuth flow you've done a hundred times. No tokens to paste, no JSON to copy, no manual API keys to babysit.

    {steps.map((s, i) => (
  1. {s.num} {i < steps.length - 1 && {Icons.arrow({ width: 14, height: 14 })}}

    {s.title}

    {s.desc}

    2. ))}
{Icons.check({ width: 12, height: 12 })} SOC 2 in progress · GDPR compliant · EU + US data residency on request
); } // ─────────────────────────────────────────────────────────────────────────── // 5. DIRECTORY — refined card grid + chip filter // ─────────────────────────────────────────────────────────────────────────── function IntegrationCard({ item, idx }) { return (
{item.name}

{item.desc}

{SCOPE_HINTS[item.id] || INT_CATEGORIES.find(c => c.id === item.cat)?.label} {connectLabel(item)} {Icons.arrow({ width: 12, height: 12 })}
); } function Directory({ query }) { const [cat, setCat] = useIntState('all'); const filtered = useIntMemo(() => { const q = query.trim().toLowerCase(); return INTEGRATIONS.filter((i) => { if (cat !== 'all' && i.cat !== cat) return false; if (q && !(i.name.toLowerCase().includes(q) || i.desc.toLowerCase().includes(q))) return false; return true; }); }, [query, cat]); const counts = useIntMemo(() => { const out = { all: INTEGRATIONS.length }; INT_CATEGORIES.forEach((c) => { if (c.id !== 'all') out[c.id] = INTEGRATIONS.filter((i) => i.cat === c.id).length; }); return out; }, []); return (
Directory · A–Z

Every integration, one place.

{filtered.length} {filtered.length === 1 ? 'showing' : 'showing'}
{INT_CATEGORIES.map((c) => ( ))}
{filtered.length === 0 ? (
{Icons.search({ width: 36, height: 36 })}

Nothing matches that.

Try a different category, or tell us what you need — we'll ping you in chat when it ships.

Request an integration {Icons.arrow({ width: 14, height: 14 })}
) : (
{filtered.map((item, idx) => )}
)}
); } // ─────────────────────────────────────────────────────────────────────────── // 6. REQUEST CTA — editorial closing op-ed // ─────────────────────────────────────────────────────────────────────────── function RequestCTA() { return (
Missing something?

Tell us what to ship next.

Our integration roadmap is open. Tell us what you need — we'll tell you when it lands and ping you in chat the day it does. Most-requested integrations move to the top of the queue.

{Icons.send({ width: 16, height: 16 })} Request an integration {Icons.telegram({ width: 16, height: 16 })} Follow the changelog
Avg. response < 24h · ships in ~2 weeks
); } // ─────────────────────────────────────────────────────────────────────────── // PAGE // ─────────────────────────────────────────────────────────────────────────── function IntegrationsPage() { const [query, setQuery] = useIntState(''); const liveCount = INTEGRATIONS.filter(i => i.status === 'live').length; const betaCount = INTEGRATIONS.filter(i => i.status === 'beta').length; const soonCount = INTEGRATIONS.filter(i => i.status === 'soon').length; return ( <> One bot.
Every tool.} sub="Connect Octodus once. It works across your whole stack from the same Telegram thread." ctaLabel="Connect octodus" /> ); } ReactDOM.createRoot(document.getElementById('root')).render();