Add YouTube Quickstart guide series (5 pages)

astro.config.mjs

@@ -210,6 +210,18 @@ export default defineConfig({
                     { label: 'Importing from Other Platforms', slug: 'getting-started/importing' },
                     { label: 'Enable Live Streaming on YouTube', slug: 'getting-started/youtube-live' },
                     { label: 'Troubleshooting', slug: 'getting-started/troubleshooting' },
+                    {
+                      label: 'YouTube Quickstart',
+                      collapsed: true,
+                      items: [
+                        { label: 'Overview', slug: 'guides/youtube-quickstart' },
+                        { label: '1. Create Your Account', slug: 'guides/youtube-quickstart/create-your-account' },
+                        { label: '2. Dashboard Tour', slug: 'guides/youtube-quickstart/dashboard-tour' },
+                        { label: '3. Build Your Overlay', slug: 'guides/youtube-quickstart/build-your-overlay' },
+                        { label: '4. Connect OBS & Go Live', slug: 'guides/youtube-quickstart/connect-obs-and-go-live' },
+                        { label: '5. Set Up Your Chatbot', slug: 'guides/youtube-quickstart/set-up-your-chatbot' },
+                      ],
+                    },
                   ],
                 },
                 {

src/content/docs/guides/youtube-quickstart/build-your-overlay.mdx

@@ -0,0 +1,59 @@
+---
+title: "YouTube Quickstart: Build Your Overlay"
+sidebar:
+  label: "3. Build Your Overlay"
+description: "Create a StreamElements overlay for YouTube, choose a YouTube-ready theme, and set up your AlertBox for Super Chats."
+platforms: [youtube]
+keywords:
+  - StreamElements YouTube overlay
+  - StreamElements AlertBox YouTube
+  - YouTube Super Chat alert
+---
+
+import { Steps, CardGrid, LinkCard } from '@astrojs/starlight/components';
+
+Part 3 of the YouTube setup series. Already have an overlay you're happy with? Skip to [4. Connect OBS and Go Live](/guides/youtube-quickstart/connect-obs-and-go-live).
+
+## Start from a theme, or build from scratch
+
+The fastest path is the Themes Gallery:
+
+<Steps>
+
+1. Go to the [Themes Gallery](https://streamelements.com/dashboard/themes) and open the **Theme** tab.
+2. Choose the **YouTube Theme** — pick the static version if CPU performance is a concern on your streaming PC.
+3. Click **Create** and give it a name.
+
+</Steps>
+
+![The Themes Gallery, showing pre-built overlay themes to choose from](/img/youtube-quickstart/overlay-gallery.jpg)
+
+Prefer to design your own? Go to [Overlays](https://streamelements.com/dashboard/overlays), click **New overlay**, choose a resolution matching your stream (1920x1080 for most setups), and click **Start** — see [Getting Started with Overlays](/overlays/getting-started) for the full editor walkthrough.
+
+![The My Overlays list, showing saved overlays](/img/youtube-quickstart/my-overlays.jpg)
+
+## Set up your AlertBox for Super Chats
+
+The AlertBox is the widget that pops up when something happens — a new sub, a tip, a Super Chat. Open the overlay you just created, find the AlertBox, and open its settings.
+
+![The overlay editor with the AlertBox widget selected](/img/youtube-quickstart/overlay-editor.jpg)
+
+:::caution[YouTube only supports Super Chat alerts]
+Deselect every checkbox in the AlertBox settings except **SuperChat**. YouTube's other event types (subs, memberships) aren't supported in the AlertBox yet. Leaving other checkboxes on won't break anything, but they'll never actually trigger.
+:::
+
+Save your overlay once you're happy with it — you'll add its URL to OBS in the next step.
+
+## Next in this series
+
+<CardGrid>
+  <LinkCard title="4. Connect OBS and Go Live" href="/guides/youtube-quickstart/connect-obs-and-go-live" description="Install SE.Live, connect your YouTube account, and add this overlay to your scene." />
+</CardGrid>
+
+## Full reference
+
+<CardGrid>
+  <LinkCard title="Getting Started with Overlays" href="/overlays/getting-started" description="The full Overlay Editor walkthrough: AlertBox, Custom Widgets, and more." />
+  <LinkCard title="Add an Overlay to Your Broadcast Software" href="/overlays/broadcast-software" description="Adding an overlay URL as a browser source manually, if you're not using SE.Live." />
+  <LinkCard title="AlertBox Alert Variations" href="/overlays/alertbox-variations" description="Customize images, sounds, and messages per event." />
+</CardGrid>

src/content/docs/guides/youtube-quickstart/connect-obs-and-go-live.mdx

@@ -0,0 +1,97 @@
+---
+title: "YouTube Quickstart: Connect OBS and Go Live"
+sidebar:
+  label: "4. Connect OBS & Go Live"
+description: "Install SE.Live, connect your YouTube account, add your stream key and overlay, and start streaming."
+platforms: [youtube]
+keywords:
+  - SE.Live YouTube setup
+  - StreamElements YouTube stream key
+  - connect OBS to YouTube
+---
+
+import { Steps, CardGrid, LinkCard } from '@astrojs/starlight/components';
+
+Part 4 of the YouTube setup series — the step where everything comes together in OBS. Already streaming? Skip to [5. Set Up Your Chatbot](/guides/youtube-quickstart/set-up-your-chatbot).
+
+## Install SE.Live
+
+SE.Live is StreamElements' OBS plugin — it brings your dashboard, chat, and stream controls right into OBS, so you don't need a second monitor just to run your overlay and check chat.
+
+**Requirements:** OBS Studio 31.x or newer. SE.Live is available for Windows, with a macOS beta.
+
+![The Desktop Apps page in your dashboard, where SE.Live is downloaded from](/img/youtube-quickstart/desktop-apps.jpg)
+
+<Steps>
+
+1. Download the installer from the [SE.Live page](https://streamelements.com/selive) — choose the Mac beta if you're on macOS.
+2. Close OBS, then run the installer and choose your install folder.
+3. Reopen OBS **as Administrator** and look for the new **StreamElements** menu in the menu bar.
+
+</Steps>
+
+:::note[OBS says it didn't shut down properly?]
+If OBS shows a crash-recovery prompt after installing, choose **Run in Normal Mode** — this is routine after installing a plugin, not a sign anything went wrong.
+:::
+
+## Connect your accounts
+
+<Steps>
+
+1. Open **StreamElements → Login** in OBS and sign in with your StreamElements account.
+2. Open **Settings → Stream**, choose **YouTube / YouTube Gaming**, and follow the prompts to connect your YouTube account. This is the same Google sign-in flow you used when creating your StreamElements account.
+
+</Steps>
+
+## Add your camera and microphone
+
+In the **Sources** panel, click **+** and add an **Audio Input Capture** for your microphone, then a **Video Input Capture** for your camera.
+
+## Add your YouTube stream key
+
+<Steps>
+
+1. Open **Settings → Stream**, choose **YouTube / YouTube Gaming**.
+2. Click **Get stream key** (or find it under [youtube.com/live_dashboard](https://www.youtube.com/live_dashboard) → **Encoder setup**) and paste it in.
+
+</Steps>
+
+:::caution[Keep your stream key private]
+Never share it or show it on stream — anyone with it can stream to your channel.
+:::
+
+## Add your overlay
+
+<Steps>
+
+1. Copy the URL of the overlay you built in the [previous step](/guides/youtube-quickstart/build-your-overlay) — from **My Overlays**, open its menu and select **Copy URL**.
+2. In OBS Sources, click **+** → **Browser**, name it, and paste the URL.
+3. Set **Width** to `1920` and **Height** to `1080` (or your overlay's resolution), and check **Shutdown when source not visible**.
+
+</Steps>
+
+## Go live
+
+<Steps>
+
+1. Open **StreamElements → SE.Live Docks** to bring up your chat and activity feed right inside OBS.
+2. Double-check your title, category, and privacy setting are correct for this stream.
+3. Click **Start Streaming**.
+
+</Steps>
+
+That's it — you're live on YouTube. One thing left to do: get the chatbot actually responding in your chat, which is the last step in this series.
+
+## Next in this series
+
+<CardGrid>
+  <LinkCard title="5. Set Up Your Chatbot" href="/guides/youtube-quickstart/set-up-your-chatbot" description="Add the bot as a moderator and create your first command." />
+</CardGrid>
+
+## Full reference
+
+<CardGrid>
+  <LinkCard title="Install and connect SE.Live" href="/selive/getting-started" description="The full SE.Live install and connection reference, all platforms." />
+  <LinkCard title="Set Up SE.Live for YouTube" href="/selive/guides/youtube-setup" description="The YouTube-specific setup reference this page is based on." />
+  <LinkCard title="Set up multistreaming" href="/selive/guides/multistreaming" description="Streaming to YouTube and other platforms at the same time." />
+</CardGrid>

src/content/docs/guides/youtube-quickstart/create-your-account.mdx

@@ -0,0 +1,63 @@
+---
+title: "YouTube Quickstart: Create Your Account"
+sidebar:
+  label: "1. Create Your Account"
+description: "Sign up for StreamElements with your YouTube channel and complete the four-step initial setup wizard: chatbot, tipping, overlay, and SE.Live."
+platforms: [youtube]
+keywords:
+  - StreamElements YouTube sign up
+  - StreamElements YouTube setup
+  - StreamElements initial setup
+---
+
+import { Steps, CardGrid, LinkCard } from '@astrojs/starlight/components';
+
+This is the first page in a five-part series that walks through setting up StreamElements and going live on YouTube, start to finish. Already have an account? Skip to [2. Take the Dashboard Tour](/guides/youtube-quickstart/dashboard-tour).
+
+:::note[Before you begin]
+YouTube requires phone verification and a one-time 24-hour waiting period before any channel can go live. If you haven't enabled live streaming yet, start that process now so it's ready by the time you finish this series — see [Enable Live Streaming on YouTube](/getting-started/youtube-live).
+:::
+
+## Sign up with YouTube
+
+<Steps>
+
+1. Go to [streamelements.com](https://streamelements.com/) and click **Get Started** or **Login**.
+2. Choose **YouTube** and authorize StreamElements to access your channel.
+3. You'll land on your new dashboard.
+
+</Steps>
+
+Your Activity Feed only tracks events going forward — existing totals like subscriber count appear right away, but individual past events won't backfill.
+
+:::note[One feature works differently on YouTube]
+The [Loyalty system](/loyalty) — points, the Stream Store, giveaways, and viewer queues — isn't available for YouTube accounts. Everything else in this series works the same as on any other platform.
+:::
+
+## Complete the setup wizard
+
+The top bar of your dashboard walks you through four steps. Click **Continue** to start.
+
+<Steps>
+
+1. **Activate the chatbot.** Click **Activate** to add the bot to your channel. On YouTube specifically, the bot only joins once your stream is public and live — see [3. Set Up Your Chatbot](/guides/youtube-quickstart/set-up-your-chatbot) later in this series for the full moderator setup.
+2. **Set up tipping.** Enter your PayPal email (or see [Tipping](/revenue/tipping) for other options) and connect your tipping page.
+3. **Create your first overlay.** Choose **Create**, keep the resolution at 1080p, and click **Start**. You'll build this out properly in [4. Build Your Overlay](/guides/youtube-quickstart/build-your-overlay).
+4. **Install SE.Live.** This downloads the OBS plugin you'll use to actually go live — covered in full in [5. Connect OBS and Go Live](/guides/youtube-quickstart/connect-obs-and-go-live).
+
+</Steps>
+
+Once you click Download on the last step, initial setup is complete — but a few of those steps are worth doing properly rather than quickly, so the rest of this series walks through each one.
+
+## Next in this series
+
+<CardGrid>
+  <LinkCard title="2. Take the Dashboard Tour" href="/guides/youtube-quickstart/dashboard-tour" description="Find your way around the top bar, stats, and Activity Feed." />
+</CardGrid>
+
+## Full reference
+
+<CardGrid>
+  <LinkCard title="Create Your Account" href="/getting-started/account-setup" description="The complete account creation and setup wizard walkthrough, all platforms." />
+  <LinkCard title="Enable Live Streaming on YouTube" href="/getting-started/youtube-live" description="Phone verification and the 24-hour activation wait, explained." />
+</CardGrid>

src/content/docs/guides/youtube-quickstart/dashboard-tour.mdx

@@ -0,0 +1,58 @@
+---
+title: "YouTube Quickstart: Take the Dashboard Tour"
+sidebar:
+  label: "2. Dashboard Tour"
+description: "A quick tour of the StreamElements dashboard for YouTube streamers: the top bar, stats, and the Activity Feed."
+platforms: [youtube]
+keywords:
+  - StreamElements dashboard
+  - StreamElements Activity Feed
+---
+
+import { Steps, CardGrid, LinkCard } from '@astrojs/starlight/components';
+
+Part 2 of the YouTube setup series. Already comfortable with the dashboard? Skip to [3. Build Your Overlay](/guides/youtube-quickstart/build-your-overlay).
+
+## The main dashboard
+
+When you log in, you land on your dashboard — an overview of stream activity: new subs, super chats, tips, and average viewership, shown as stat boxes and a graph for whichever time period you pick from the top bar.
+
+On the right, you'll see whether the chatbot is currently in your channel, with quick controls to **Part** or **Mute** it, and a shortcut to edit your stream title and category without leaving the page.
+
+![The StreamElements dashboard home screen](/img/youtube-quickstart/dashboard-home.jpg)
+
+## The top bar
+
+Available everywhere in your dashboard. Your profile picture sits on the right — it gets a red ring while you're live. Click it to open Import, language and theme settings, and quick links to SE.Live and Ground Control.
+
+## The Activity Feed
+
+The [Activity Feed](https://streamelements.com/dashboard/activity) is where you monitor events, manage alerts, and adjust settings in real time — separate from the dashboard's summary stats.
+
+![The Activity Feed, showing recent events and quick controls](/img/youtube-quickstart/dashboard-activity-feed.jpg)
+
+<Steps>
+
+1. Click **Filter**.
+2. Choose which event types you want to see.
+3. Click **Filter** to apply.
+
+</Steps>
+
+From here you can also mute or skip individual alerts, monitor chatbot status, reset session settings, and adjust ad settings. If you install SE.Live later in this series, most of this becomes available right inside OBS too — no need to alt-tab out of your broadcast software mid-stream.
+
+:::caution[Streaming to more than one platform?]
+The dashboard can consolidate events from every connected channel into one feed. Don't show this combined feed on a Twitch-facing overlay — it violates Twitch's Terms of Service.
+:::
+
+## Next in this series
+
+<CardGrid>
+  <LinkCard title="3. Build Your Overlay" href="/guides/youtube-quickstart/build-your-overlay" description="Create your first overlay and add a YouTube-ready alert box." />
+</CardGrid>
+
+## Full reference
+
+<CardGrid>
+  <LinkCard title="Dashboard & Activity Feed" href="/getting-started/dashboard-overview" description="The complete dashboard reference, including multiplatform filtering." />
+</CardGrid>

src/content/docs/guides/youtube-quickstart/index.mdx

@@ -0,0 +1,20 @@
+---
+title: "YouTube Quickstart"
+description: "A five-part, start-to-finish guide to setting up StreamElements and going live on YouTube."
+platforms: [youtube]
+keywords:
+  - StreamElements YouTube setup guide
+  - how to stream on YouTube with StreamElements
+---
+
+import { CardGrid, LinkCard } from '@astrojs/starlight/components';
+
+Setting up StreamElements for YouTube touches five areas of the product — your account, the dashboard, overlays, OBS, and the chatbot. This series walks through all five in order, YouTube-specific details called out along the way. Each page also links to the full reference documentation if you want more depth on a given topic.
+
+<CardGrid>
+  <LinkCard title="1. Create Your Account" href="/guides/youtube-quickstart/create-your-account" description="Sign up with YouTube and complete the initial setup wizard." />
+  <LinkCard title="2. Dashboard Tour" href="/guides/youtube-quickstart/dashboard-tour" description="Find your way around the top bar, stats, and Activity Feed." />
+  <LinkCard title="3. Build Your Overlay" href="/guides/youtube-quickstart/build-your-overlay" description="Create an overlay and set up your AlertBox for Super Chats." />
+  <LinkCard title="4. Connect OBS & Go Live" href="/guides/youtube-quickstart/connect-obs-and-go-live" description="Install SE.Live, add your stream key and overlay, and start streaming." />
+  <LinkCard title="5. Set Up Your Chatbot" href="/guides/youtube-quickstart/set-up-your-chatbot" description="Add the bot as a moderator and create your first command." />
+</CardGrid>