Midwest Component Library v0.24.0

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
<div class="bg-theme-9 text-white">
  <div class="max-w-5xl mx-auto px-6 py-6 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
    <div class="flex items-center gap-2">
      <div class="midwest-icon text-white text-2xl">
        <div class="midwest-icon-inner">
          <svg xmlns="http://www.w3.org/2000/svg" class="Midwest-Icon__Svg" viewbox="0 0 512 512" focusable="false" role="img" aria-label="Help circle"><title>Help circle</title>
            <path d="M256 64C150 64 64 150 64 256s86 192 192 192 192-86 192-192S362 64 256 64zm-6 304a20 20 0 1120-20 20 20 0 01-20 20zm33.44-102C267.23 276.88 265 286.85 265 296a14 14 0 01-28 0c0-21.91 10.08-39.33 30.82-53.26C287.1 229.8 298 221.6 298 203.57c0-12.26-7-21.57-21.49-28.46-3.41-1.62-11-3.2-20.34-3.09-11.72.15-20.82 2.95-27.83 8.59C215.12 191.25 214 202.83 214 203a14 14 0 11-28-1.35c.11-2.43 1.8-24.32 24.77-42.8 11.91-9.58 27.06-14.56 45-14.78 12.7-.15 24.63 2 32.72 5.82C312.7 161.34 326 180.43 326 203.57c0 33.83-22.61 49.02-42.56 62.43z"></path></svg>
        </div>
      </div>
      <span class="font-bold text-white text-lg">Orbit Help Center</span>
    </div>
    <div class="flex-1 max-w-sm">
      <div class="midwest-input midwest-form-group type-search" data-controller="midwest-input">
        <div class="midwest-form-group__top">
          <label class="midwest-label " for="search-f168">
          </label>
        </div>
        <input type="search" name="search" id="search-f168" placeholder="Search the docs…" data-midwest-input-target="input" />
      </div>
    </div>
    <a class="midwest-button variant-default size-small theme-primary bg-white text-theme-9 hover:bg-theme-1 font-medium flex-shrink-0" name="button" href="/">
      <span class="midwest-button-content">Contact support</span>
      <div class="midwest-loading-icon" role="img" aria-label="Loading" aria-hidden="true" style="display: none">
        <div class="midwest-loading-icon-inner">
          <!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
          <svg viewbox="0 0 120 30" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="Midwest-LoadingIcon__Svg" focusable="false" aria-hidden="true">
            <circle cx="15" cy="15" r="15">
              <animate attributename="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcmode="linear" repeatcount="indefinite"></animate>
              <animate attributename="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcmode="linear" repeatcount="indefinite"></animate>
            </circle>
            <circle cx="60" cy="15" r="9" fill-opacity="0.3">
              <animate attributename="r" from="9" to="9" begin="0s" dur="0.8s" values="9;15;9" calcmode="linear" repeatcount="indefinite"></animate>
              <animate attributename="fill-opacity" from="0.5" to="0.5" begin="0s" dur="0.8s" values=".5;1;.5" calcmode="linear" repeatcount="indefinite"></animate>
            </circle>
            <circle cx="105" cy="15" r="15">
              <animate attributename="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcmode="linear" repeatcount="indefinite"></animate>
              <animate attributename="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcmode="linear" repeatcount="indefinite"></animate>
            </circle>
          </svg>
        </div>
      </div>
    </a>
  </div>
</div>
<div class="midwest-layout size-lg padding-default type-supporting-content" style="--layout-grid-gap: 4rem; --layout-sidebar-width: 350px">
  <div class="wrapper">
    <article class="min-w-0">
      <nav class="midwest-breadcrumbs style-inline" aria-label="Breadcrumb">
        <ol class="breadcrumbs-list">
          <li class="breadcrumb-item">
            <a class="midwest-breadcrumb variant-default" href="#">
              <span class="midwest-label ">
                Help Center
              </span>
            </a>
          </li>
          <li class="breadcrumb-separator" aria-hidden="true">
            <span class="sep-char" aria-hidden="true">/</span>
          </li>
          <li class="breadcrumb-item">
            <a class="midwest-breadcrumb variant-default" href="#">
              <span class="midwest-label ">
                Getting Started
              </span>
            </a>
          </li>
          <li class="breadcrumb-separator" aria-hidden="true">
            <span class="sep-char" aria-hidden="true">/</span>
          </li>
          <li class="breadcrumb-item">
            <span class="midwest-breadcrumb variant-default current" aria-current="page">
              <span class="midwest-label ">
                Connect your tools
              </span>
            </span>
          </li>
        </ol>
      </nav>
      <header class="mt-4 mb-6">
        <div class="flex items-center gap-2 mb-2">
          <span class="midwest-badge size-default theme-primary">
            <span class="value">Getting Started</span>
          </span>
          <span variant="outline" class="midwest-badge size-default theme-primary">
            <span class="value">5 min read</span>
          </span>
        </div>
        <h1 class="text-2xl font-bold text-theme-12">Connect your tools to Orbit</h1>
        <p class="text-theme-7 mt-1 text-sm">Last updated May 10, 2026</p>
      </header>
      <div class="midwest-callout theme-cyan">
        <div class="callout-wrap">
          <div data-controller="midwest-prose" class="midwest-prose prose">
            <p>You'll need an Orbit account on the Pro plan or above. Integrations are not available on the free tier.</p>
          </div>
        </div>
      </div>
      <div data-controller="midwest-prose" class="midwest-prose prose">
        <h2>Overview</h2>
        <p>Orbit's integration system lets you connect third-party tools so that data flows automatically between your workspace and the services your team already uses. Once connected, integrations run in the background — no manual exports or copy-paste required.</p>
        <h2>Step 1: Open integrations</h2>
        <p>Navigate to <strong>Settings → Integrations</strong>. You'll see a catalogue of all available connectors organised by category.</p>
        <h2>Step 2: Choose a connector</h2>
        <p>Click on the connector you want to set up. Each connector page shows:</p>
        <ul>
          <li>What data is synced and in which direction</li>
          <li>Any required permissions or scopes</li>
          <li>Estimated sync frequency</li>
        </ul>
        <h2>Step 3: Authorise access</h2>
        <p>Click <strong>Connect</strong> and you'll be redirected to the third-party service to authorise Orbit's access. Once you approve, you'll be returned to Orbit with the connector active.</p>
        <blockquote>
          <p>Orbit only requests the minimum permissions needed for each integration. You can review and revoke access at any time from the Integrations page.</p>
        </blockquote>
        <h2>Step 4: Configure sync settings</h2>
        <p>After connecting, you can fine-tune which projects, users, or data types are included in the sync. Most connectors also let you set a sync schedule — from real-time webhooks to daily batches.</p>
        <h2>Troubleshooting</h2>
        <p>If a connector shows an error badge, it typically means the authorisation token has expired or the third-party service changed its permissions model. Click <strong>Reconnect</strong> to re-authorise.</p>
      </div>
      <article data-controller="midwest-card" class="midwest-card padding-sm">
        <div class="wrap">
          <section>
            <div class="flex items-center justify-between flex-wrap gap-3">
              <p class="text-sm font-medium text-theme-9">Was this article helpful?</p>
              <div class="flex gap-2">
                <a class="midwest-button variant-outline size-small theme-primary" name="button" href="/">
                  <span class="midwest-button-content">👍  Yes</span>
                  <div class="midwest-loading-icon" role="img" aria-label="Loading" aria-hidden="true" style="display: none">
                    <div class="midwest-loading-icon-inner">
                      <!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
                      <svg viewbox="0 0 120 30" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="Midwest-LoadingIcon__Svg" focusable="false" aria-hidden="true">
                        <circle cx="15" cy="15" r="15">
                          <animate attributename="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcmode="linear" repeatcount="indefinite"></animate>
                          <animate attributename="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcmode="linear" repeatcount="indefinite"></animate>
                        </circle>
                        <circle cx="60" cy="15" r="9" fill-opacity="0.3">
                          <animate attributename="r" from="9" to="9" begin="0s" dur="0.8s" values="9;15;9" calcmode="linear" repeatcount="indefinite"></animate>
                          <animate attributename="fill-opacity" from="0.5" to="0.5" begin="0s" dur="0.8s" values=".5;1;.5" calcmode="linear" repeatcount="indefinite"></animate>
                        </circle>
                        <circle cx="105" cy="15" r="15">
                          <animate attributename="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcmode="linear" repeatcount="indefinite"></animate>
                          <animate attributename="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcmode="linear" repeatcount="indefinite"></animate>
                        </circle>
                      </svg>
                    </div>
                  </div>
                </a>
                <a class="midwest-button variant-ghost size-small theme-primary" name="button" href="/">
                  <span class="midwest-button-content">👎  No</span>
                  <div class="midwest-loading-icon" role="img" aria-label="Loading" aria-hidden="true" style="display: none">
                    <div class="midwest-loading-icon-inner">
                      <!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
                      <svg viewbox="0 0 120 30" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="Midwest-LoadingIcon__Svg" focusable="false" aria-hidden="true">
                        <circle cx="15" cy="15" r="15">
                          <animate attributename="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcmode="linear" repeatcount="indefinite"></animate>
                          <animate attributename="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcmode="linear" repeatcount="indefinite"></animate>
                        </circle>
                        <circle cx="60" cy="15" r="9" fill-opacity="0.3">
                          <animate attributename="r" from="9" to="9" begin="0s" dur="0.8s" values="9;15;9" calcmode="linear" repeatcount="indefinite"></animate>
                          <animate attributename="fill-opacity" from="0.5" to="0.5" begin="0s" dur="0.8s" values=".5;1;.5" calcmode="linear" repeatcount="indefinite"></animate>
                        </circle>
                        <circle cx="105" cy="15" r="15">
                          <animate attributename="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcmode="linear" repeatcount="indefinite"></animate>
                          <animate attributename="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcmode="linear" repeatcount="indefinite"></animate>
                        </circle>
                      </svg>
                    </div>
                  </div>
                </a>
              </div>
            </div>
          </section>
        </div>
      </article>
      <div class="mt-6">
        <h3 class="text-sm font-semibold text-theme-11 mb-3">Related articles</h3>
        <div class="space-y-2">
          <a href="#" class="flex items-center gap-2 text-sm text-theme-8 hover:text-theme-11 group">
            <div class="midwest-icon text-theme-5 flex-shrink-0 group-hover:text-theme-7">
              <div class="midwest-icon-inner">
                <svg xmlns="http://www.w3.org/2000/svg" class="Midwest-Icon__Svg" viewbox="0 0 512 512" focusable="false" role="img" aria-label="Document"><title>Document</title>
                  <path d="M428 224H288a48 48 0 01-48-48V36a4 4 0 00-4-4h-92a64 64 0 00-64 64v320a64 64 0 0064 64h224a64 64 0 0064-64V228a4 4 0 00-4-4z"></path><path d="M419.22 188.59L275.41 44.78a2 2 0 00-3.41 1.41V176a16 16 0 0016 16h129.81a2 2 0 001.41-3.41z"></path></svg>
              </div>
            </div>
            Managing integration permissions
          </a>
          <a href="#" class="flex items-center gap-2 text-sm text-theme-8 hover:text-theme-11 group">
            <div class="midwest-icon text-theme-5 flex-shrink-0 group-hover:text-theme-7">
              <div class="midwest-icon-inner">
                <svg xmlns="http://www.w3.org/2000/svg" class="Midwest-Icon__Svg" viewbox="0 0 512 512" focusable="false" role="img" aria-label="Document"><title>Document</title>
                  <path d="M428 224H288a48 48 0 01-48-48V36a4 4 0 00-4-4h-92a64 64 0 00-64 64v320a64 64 0 0064 64h224a64 64 0 0064-64V228a4 4 0 00-4-4z"></path><path d="M419.22 188.59L275.41 44.78a2 2 0 00-3.41 1.41V176a16 16 0 0016 16h129.81a2 2 0 001.41-3.41z"></path></svg>
              </div>
            </div>
            Sync frequency and webhooks explained
          </a>
          <a href="#" class="flex items-center gap-2 text-sm text-theme-8 hover:text-theme-11 group">
            <div class="midwest-icon text-theme-5 flex-shrink-0 group-hover:text-theme-7">
              <div class="midwest-icon-inner">
                <svg xmlns="http://www.w3.org/2000/svg" class="Midwest-Icon__Svg" viewbox="0 0 512 512" focusable="false" role="img" aria-label="Document"><title>Document</title>
                  <path d="M428 224H288a48 48 0 01-48-48V36a4 4 0 00-4-4h-92a64 64 0 00-64 64v320a64 64 0 0064 64h224a64 64 0 0064-64V228a4 4 0 00-4-4z"></path><path d="M419.22 188.59L275.41 44.78a2 2 0 00-3.41 1.41V176a16 16 0 0016 16h129.81a2 2 0 001.41-3.41z"></path></svg>
              </div>
            </div>
            Disconnecting and reconnecting an integration
          </a>
          <a href="#" class="flex items-center gap-2 text-sm text-theme-8 hover:text-theme-11 group">
            <div class="midwest-icon text-theme-5 flex-shrink-0 group-hover:text-theme-7">
              <div class="midwest-icon-inner">
                <svg xmlns="http://www.w3.org/2000/svg" class="Midwest-Icon__Svg" viewbox="0 0 512 512" focusable="false" role="img" aria-label="Document"><title>Document</title>
                  <path d="M428 224H288a48 48 0 01-48-48V36a4 4 0 00-4-4h-92a64 64 0 00-64 64v320a64 64 0 0064 64h224a64 64 0 0064-64V228a4 4 0 00-4-4z"></path><path d="M419.22 188.59L275.41 44.78a2 2 0 00-3.41 1.41V176a16 16 0 0016 16h129.81a2 2 0 001.41-3.41z"></path></svg>
              </div>
            </div>
            Troubleshoot a failed sync
          </a>
        </div>
      </div>
    </article>
    <aside class="space-y-5">
      <article data-controller="midwest-card" class="midwest-card padding-sm">
        <div class="wrap">
          <section>
            <p class="text-xs font-semibold text-theme-7 uppercase tracking-wide mb-3">In this article</p>
            <nav class="space-y-1 text-sm">
              <a href="#" class="block py-1 pl-2 border-l-2 border-theme-9 text-theme-11 font-medium">
                Overview
              </a>
              <a href="#" class="block py-1 pl-2 border-l-2 border-transparent text-theme-7 hover:text-theme-11 hover:border-theme-5">
                Step 1: Open integrations
              </a>
              <a href="#" class="block py-1 pl-2 border-l-2 border-transparent text-theme-7 hover:text-theme-11 hover:border-theme-5">
                Step 2: Choose a connector
              </a>
              <a href="#" class="block py-1 pl-2 border-l-2 border-transparent text-theme-7 hover:text-theme-11 hover:border-theme-5">
                Step 3: Authorise access
              </a>
              <a href="#" class="block py-1 pl-2 border-l-2 border-transparent text-theme-7 hover:text-theme-11 hover:border-theme-5">
                Step 4: Configure sync
              </a>
              <a href="#" class="block py-1 pl-2 border-l-2 border-transparent text-theme-7 hover:text-theme-11 hover:border-theme-5">
                Troubleshooting
              </a>
            </nav>
          </section>
        </div>
      </article>
      <article data-controller="midwest-card" class="midwest-card padding-sm">
        <div class="wrap">
          <section>
            <p class="text-xs font-semibold text-theme-7 uppercase tracking-wide mb-3">Getting Started</p>
            <nav class="space-y-1">
              <a href="#" class="flex items-center gap-2 text-sm py-1 text-theme-7 hover:text-theme-11">
                <span class="w-3"></span>
                Your first workspace
              </a>
              <a href="#" class="flex items-center gap-2 text-sm py-1 text-theme-7 hover:text-theme-11">
                <span class="w-3"></span>
                Invite team members
              </a>
              <a href="#" class="flex items-center gap-2 text-sm py-1 text-theme-11 font-semibold">
                <div class="midwest-icon text-theme-7 text-xs flex-shrink-0">
                  <div class="midwest-icon-inner">
                    <svg xmlns="http://www.w3.org/2000/svg" class="Midwest-Icon__Svg" viewbox="0 0 512 512" focusable="false" role="img" aria-label="Chevron forward"><title>Chevron forward</title>
                      <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48" d="M184 112l144 144-144 144"></path></svg>
                  </div>
                </div>
                Connect your tools
              </a>
              <a href="#" class="flex items-center gap-2 text-sm py-1 text-theme-7 hover:text-theme-11">
                <span class="w-3"></span>
                Customize notifications
              </a>
              <a href="#" class="flex items-center gap-2 text-sm py-1 text-theme-7 hover:text-theme-11">
                <span class="w-3"></span>
                Set up billing
              </a>
            </nav>
          </section>
        </div>
      </article>
      <div class="midwest-callout theme-primary">
        <div class="callout-wrap">
          <div data-controller="midwest-prose" class="midwest-prose prose">
            <p class="text-sm">Our support team responds within 4 business hours on the Pro plan.</p>
          </div>
          <div class="callout-actions">
            <a class="midwest-button variant-default size-small fill theme-primary" name="button" href="/">
              <span class="midwest-button-content">
                <div class="midwest-icon " aria-hidden="true">
                  <div class="midwest-icon-inner">
                    <svg xmlns="http://www.w3.org/2000/svg" class="Midwest-Icon__Svg" viewbox="0 0 512 512" focusable="false" aria-hidden="true"><path d="M76.83 480a25.69 25.69 0 01-25.57-25.74 29.13 29.13 0 011.2-7.63L70.88 380c.77-2.46-.1-4.94-1.23-6.9l-.22-.4c-.08-.13-.46-.66-.73-1.05s-.58-.81-.86-1.22l-.19-.27A215.66 215.66 0 0132 251.37c-.18-57.59 22.35-112 63.46-153.28C138 55.47 194.9 32 255.82 32A227.4 227.4 0 01398 81.84c39.45 31.75 66.87 76 77.21 124.68a213.5 213.5 0 014.78 45c0 58.93-22.64 114.28-63.76 155.87-41.48 42-97.18 65.06-156.83 65.06-21 0-47.87-5.36-60.77-9-15.52-4.34-30.23-10-31.85-10.6a15.12 15.12 0 00-5.37-1 14.75 14.75 0 00-5.8 1.15l-.85.33-67.48 24.38A29.44 29.44 0 0176.83 480zm-2-31.8zM87.48 380z"></path></svg>
                  </div>
                </div>
                Chat with us</span>
              <div class="midwest-loading-icon" role="img" aria-label="Loading" aria-hidden="true" style="display: none">
                <div class="midwest-loading-icon-inner">
                  <!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
                  <svg viewbox="0 0 120 30" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="Midwest-LoadingIcon__Svg" focusable="false" aria-hidden="true">
                    <circle cx="15" cy="15" r="15">
                      <animate attributename="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcmode="linear" repeatcount="indefinite"></animate>
                      <animate attributename="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcmode="linear" repeatcount="indefinite"></animate>
                    </circle>
                    <circle cx="60" cy="15" r="9" fill-opacity="0.3">
                      <animate attributename="r" from="9" to="9" begin="0s" dur="0.8s" values="9;15;9" calcmode="linear" repeatcount="indefinite"></animate>
                      <animate attributename="fill-opacity" from="0.5" to="0.5" begin="0s" dur="0.8s" values=".5;1;.5" calcmode="linear" repeatcount="indefinite"></animate>
                    </circle>
                    <circle cx="105" cy="15" r="15">
                      <animate attributename="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcmode="linear" repeatcount="indefinite"></animate>
                      <animate attributename="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcmode="linear" repeatcount="indefinite"></animate>
                    </circle>
                  </svg>
                </div>
              </div>
            </a>
            <a class="midwest-button variant-outline size-small fill theme-primary" name="button" href="/">
              <span class="midwest-button-content">
                <div class="midwest-icon " aria-hidden="true">
                  <div class="midwest-icon-inner">
                    <svg xmlns="http://www.w3.org/2000/svg" class="Midwest-Icon__Svg" viewbox="0 0 512 512" focusable="false" aria-hidden="true"><path d="M424 80H88a56.06 56.06 0 00-56 56v240a56.06 56.06 0 0056 56h336a56.06 56.06 0 0056-56V136a56.06 56.06 0 00-56-56zm-14.18 92.63l-144 112a16 16 0 01-19.64 0l-144-112a16 16 0 1119.64-25.26L256 251.73l134.18-104.36a16 16 0 0119.64 25.26z"></path></svg>
                  </div>
                </div>
                Email support</span>
              <div class="midwest-loading-icon" role="img" aria-label="Loading" aria-hidden="true" style="display: none">
                <div class="midwest-loading-icon-inner">
                  <!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
                  <svg viewbox="0 0 120 30" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="Midwest-LoadingIcon__Svg" focusable="false" aria-hidden="true">
                    <circle cx="15" cy="15" r="15">
                      <animate attributename="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcmode="linear" repeatcount="indefinite"></animate>
                      <animate attributename="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcmode="linear" repeatcount="indefinite"></animate>
                    </circle>
                    <circle cx="60" cy="15" r="9" fill-opacity="0.3">
                      <animate attributename="r" from="9" to="9" begin="0s" dur="0.8s" values="9;15;9" calcmode="linear" repeatcount="indefinite"></animate>
                      <animate attributename="fill-opacity" from="0.5" to="0.5" begin="0s" dur="0.8s" values=".5;1;.5" calcmode="linear" repeatcount="indefinite"></animate>
                    </circle>
                    <circle cx="105" cy="15" r="15">
                      <animate attributename="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcmode="linear" repeatcount="indefinite"></animate>
                      <animate attributename="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcmode="linear" repeatcount="indefinite"></animate>
                    </circle>
                  </svg>
                </div>
              </div>
            </a>
          </div>
        </div>
      </div>
  </aside>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<div class="bg-theme-9 text-white">
  <div class="max-w-5xl mx-auto px-6 py-6 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
    <div class="flex items-center gap-2">
      <%= midwest_icon :'help-circle', class: "text-white text-2xl" %>
      <span class="font-bold text-white text-lg">Orbit Help Center</span>
    </div>
    <div class="flex-1 max-w-sm">
      <%= midwest_form_input(name: 'search', type: :search, placeholder: 'Search the docs…') %>
    </div>
    <%= midwest_button("Contact support", size: :small, class: "bg-white text-theme-9 hover:bg-theme-1 font-medium flex-shrink-0") %>
  </div>
</div>
<%= midwest_layout(type: :'supporting-content', size: :lg, gap: 4) do %>
  <%# ---- Main article content ---- %>
  <article class="min-w-0">
    <%= midwest_breadcrumbs(
      { title: "Help Center", path: "#" },
      { title: "Getting Started", path: "#" },
      { title: "Connect your tools", path: "#" }
    ) %>
    <header class="mt-4 mb-6">
      <div class="flex items-center gap-2 mb-2">
        <%= midwest_badge("Getting Started") %>
        <%= midwest_badge("5 min read", variant: :outline) %>
      </div>
      <h1 class="text-2xl font-bold text-theme-12">Connect your tools to Orbit</h1>
      <p class="text-theme-7 mt-1 text-sm">Last updated May 10, 2026</p>
    </header>
    <%# Callout: pre-requisite %>
    <%= midwest_callout(state: :info, title: "Before you begin") do %>
      <%= midwest_prose do %>
        <p>You'll need an Orbit account on the Pro plan or above. Integrations are not available on the free tier.</p>
      <% end %>
    <% end %>
    <%= midwest_prose do %>
      <h2>Overview</h2>
      <p>Orbit's integration system lets you connect third-party tools so that data flows automatically between your workspace and the services your team already uses. Once connected, integrations run in the background — no manual exports or copy-paste required.</p>
      <h2>Step 1: Open integrations</h2>
      <p>Navigate to <strong>Settings → Integrations</strong>. You'll see a catalogue of all available connectors organised by category.</p>
      <h2>Step 2: Choose a connector</h2>
      <p>Click on the connector you want to set up. Each connector page shows:</p>
      <ul>
        <li>What data is synced and in which direction</li>
        <li>Any required permissions or scopes</li>
        <li>Estimated sync frequency</li>
      </ul>
      <h2>Step 3: Authorise access</h2>
      <p>Click <strong>Connect</strong> and you'll be redirected to the third-party service to authorise Orbit's access. Once you approve, you'll be returned to Orbit with the connector active.</p>
      <blockquote>
        <p>Orbit only requests the minimum permissions needed for each integration. You can review and revoke access at any time from the Integrations page.</p>
      </blockquote>
      <h2>Step 4: Configure sync settings</h2>
      <p>After connecting, you can fine-tune which projects, users, or data types are included in the sync. Most connectors also let you set a sync schedule — from real-time webhooks to daily batches.</p>
      <h2>Troubleshooting</h2>
      <p>If a connector shows an error badge, it typically means the authorisation token has expired or the third-party service changed its permissions model. Click <strong>Reconnect</strong> to re-authorise.</p>
    <% end %>
    <%# Was this helpful %>
    <%= midwest_card(padding: :sm) do %>
      <div class="flex items-center justify-between flex-wrap gap-3">
        <p class="text-sm font-medium text-theme-9">Was this article helpful?</p>
        <div class="flex gap-2">
          <%= midwest_button("👍  Yes", size: :small, variant: :outline) %>
          <%= midwest_button("👎  No", size: :small, variant: :ghost) %>
        </div>
      </div>
    <% end %>
    <%# Related articles %>
    <div class="mt-6">
      <h3 class="text-sm font-semibold text-theme-11 mb-3">Related articles</h3>
      <div class="space-y-2">
        <% [
          "Managing integration permissions",
          "Sync frequency and webhooks explained",
          "Disconnecting and reconnecting an integration",
          "Troubleshoot a failed sync",
        ].each do |title| %>
          <a href="#" class="flex items-center gap-2 text-sm text-theme-8 hover:text-theme-11 group">
            <%= midwest_icon :document, class: "text-theme-5 flex-shrink-0 group-hover:text-theme-7" %>
            <%= title %>
          </a>
        <% end %>
      </div>
    </div>
  </article>
  <%# ---- Sidebar ---- %>
  <aside class="space-y-5">
    <%# In this article / TOC %>
    <%= midwest_card(padding: :sm) do %>
      <p class="text-xs font-semibold text-theme-7 uppercase tracking-wide mb-3">In this article</p>
      <nav class="space-y-1 text-sm">
        <% [
          ["Overview", true],
          ["Step 1: Open integrations", false],
          ["Step 2: Choose a connector", false],
          ["Step 3: Authorise access", false],
          ["Step 4: Configure sync", false],
          ["Troubleshooting", false],
        ].each do |heading, active| %>
          <a href="#" class="block py-1 pl-2 border-l-2 <%= active ? 'border-theme-9 text-theme-11 font-medium' : 'border-transparent text-theme-7 hover:text-theme-11 hover:border-theme-5' %>">
            <%= heading %>
          </a>
        <% end %>
      </nav>
    <% end %>
    <%# Category nav %>
    <%= midwest_card(padding: :sm) do %>
      <p class="text-xs font-semibold text-theme-7 uppercase tracking-wide mb-3">Getting Started</p>
      <nav class="space-y-1">
        <% [
          ["Your first workspace", false],
          ["Invite team members", false],
          ["Connect your tools", true],
          ["Customize notifications", false],
          ["Set up billing", false],
        ].each do |item, active| %>
          <a href="#" class="flex items-center gap-2 text-sm py-1 <%= active ? 'text-theme-11 font-semibold' : 'text-theme-7 hover:text-theme-11' %>">
            <% if active %>
              <%= midwest_icon :'chevron-forward', class: "text-theme-7 text-xs flex-shrink-0" %>
            <% else %>
              <span class="w-3"></span>
            <% end %>
            <%= item %>
          </a>
        <% end %>
      </nav>
    <% end %>
    <%# Contact support %>
    <%= midwest_callout(state: :default, title: "Still need help?") do |c| %>
      <%= midwest_prose do %>
        <p class="text-sm">Our support team responds within 4 business hours on the Pro plan.</p>
      <% end %>
      <% c.with_actions do %>
        <%= midwest_button("Chat with us", fill: true, size: :small, icon: :'chatbubble') %>
        <%= midwest_button("Email support", fill: true, size: :small, variant: :outline, icon: :mail) %>
      <% end %>
    <% end %>
  </aside>
<% end %>

Help Center Article

Documentation layout with breadcrumbs, long-form prose, and a sticky supporting-content sidebar for in-article navigation.

No params configured.

No assets to display.
Add a .js or .css file alongside the component to see it here.

Accessibility

Figma embed for Layouts/help_center_article

Annotate a preview to embed its Figma design here:

@figma "https://figma.com/..."