diff --git a/astro.config.mjs b/astro.config.mjs index 053cacf..03eba75 100644 --- a/astro.config.mjs +++ b/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' }, + ], + }, ], }, { diff --git a/public/img/youtube-quickstart/add-command-modal.jpg b/public/img/youtube-quickstart/add-command-modal.jpg new file mode 100644 index 0000000..d86a833 Binary files /dev/null and b/public/img/youtube-quickstart/add-command-modal.jpg differ diff --git a/public/img/youtube-quickstart/banned-words.jpg b/public/img/youtube-quickstart/banned-words.jpg new file mode 100644 index 0000000..f50b4ea Binary files /dev/null and b/public/img/youtube-quickstart/banned-words.jpg differ diff --git a/public/img/youtube-quickstart/chat-commands.jpg b/public/img/youtube-quickstart/chat-commands.jpg new file mode 100644 index 0000000..a016dee Binary files /dev/null and b/public/img/youtube-quickstart/chat-commands.jpg differ diff --git a/public/img/youtube-quickstart/command-form.jpg b/public/img/youtube-quickstart/command-form.jpg new file mode 100644 index 0000000..8f5a945 Binary files /dev/null and b/public/img/youtube-quickstart/command-form.jpg differ diff --git a/public/img/youtube-quickstart/dashboard-activity-feed.jpg b/public/img/youtube-quickstart/dashboard-activity-feed.jpg new file mode 100644 index 0000000..6a57bbe Binary files /dev/null and b/public/img/youtube-quickstart/dashboard-activity-feed.jpg differ diff --git a/public/img/youtube-quickstart/dashboard-home.jpg b/public/img/youtube-quickstart/dashboard-home.jpg new file mode 100644 index 0000000..97cdde9 Binary files /dev/null and b/public/img/youtube-quickstart/dashboard-home.jpg differ diff --git a/public/img/youtube-quickstart/desktop-apps.jpg b/public/img/youtube-quickstart/desktop-apps.jpg new file mode 100644 index 0000000..177fc14 Binary files /dev/null and b/public/img/youtube-quickstart/desktop-apps.jpg differ diff --git a/public/img/youtube-quickstart/my-overlays.jpg b/public/img/youtube-quickstart/my-overlays.jpg new file mode 100644 index 0000000..6ccf835 Binary files /dev/null and b/public/img/youtube-quickstart/my-overlays.jpg differ diff --git a/public/img/youtube-quickstart/overlay-editor.jpg b/public/img/youtube-quickstart/overlay-editor.jpg new file mode 100644 index 0000000..6652e0b Binary files /dev/null and b/public/img/youtube-quickstart/overlay-editor.jpg differ diff --git a/public/img/youtube-quickstart/overlay-gallery.jpg b/public/img/youtube-quickstart/overlay-gallery.jpg new file mode 100644 index 0000000..ef154eb Binary files /dev/null and b/public/img/youtube-quickstart/overlay-gallery.jpg differ diff --git a/public/img/youtube-quickstart/spam-filters.jpg b/public/img/youtube-quickstart/spam-filters.jpg new file mode 100644 index 0000000..44584df Binary files /dev/null and b/public/img/youtube-quickstart/spam-filters.jpg differ diff --git a/public/img/youtube-quickstart/timers.jpg b/public/img/youtube-quickstart/timers.jpg new file mode 100644 index 0000000..50f7abc Binary files /dev/null and b/public/img/youtube-quickstart/timers.jpg differ diff --git a/src/content/docs/guides/youtube-quickstart/build-your-overlay.mdx b/src/content/docs/guides/youtube-quickstart/build-your-overlay.mdx new file mode 100644 index 0000000..e56902c --- /dev/null +++ b/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: + + + +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. + + + +![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 + + + + + +## Full reference + + + + + + diff --git a/src/content/docs/guides/youtube-quickstart/connect-obs-and-go-live.mdx b/src/content/docs/guides/youtube-quickstart/connect-obs-and-go-live.mdx new file mode 100644 index 0000000..8fe8545 --- /dev/null +++ b/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) + + + +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. + + + +:::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 + + + +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. + + + +## 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 + + + +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. + + + +:::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 + + + +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**. + + + +## Go live + + + +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**. + + + +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 + + + + + +## Full reference + + + + + + diff --git a/src/content/docs/guides/youtube-quickstart/create-your-account.mdx b/src/content/docs/guides/youtube-quickstart/create-your-account.mdx new file mode 100644 index 0000000..21212b0 --- /dev/null +++ b/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 + + + +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. + + + +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. + + + +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). + + + +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 + + + + + +## Full reference + + + + + diff --git a/src/content/docs/guides/youtube-quickstart/dashboard-tour.mdx b/src/content/docs/guides/youtube-quickstart/dashboard-tour.mdx new file mode 100644 index 0000000..7dd99d5 --- /dev/null +++ b/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) + + + +1. Click **Filter**. +2. Choose which event types you want to see. +3. Click **Filter** to apply. + + + +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 + + + + + +## Full reference + + + + diff --git a/src/content/docs/guides/youtube-quickstart/index.mdx b/src/content/docs/guides/youtube-quickstart/index.mdx new file mode 100644 index 0000000..b90ba76 --- /dev/null +++ b/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. + + + + + + + + diff --git a/src/content/docs/guides/youtube-quickstart/set-up-your-chatbot.mdx b/src/content/docs/guides/youtube-quickstart/set-up-your-chatbot.mdx new file mode 100644 index 0000000..83a9be7 --- /dev/null +++ b/src/content/docs/guides/youtube-quickstart/set-up-your-chatbot.mdx @@ -0,0 +1,94 @@ +--- +title: "YouTube Quickstart: Set Up Your Chatbot" +sidebar: + label: "5. Set Up Your Chatbot" +description: "Add the StreamElements chatbot as a moderator on YouTube, then create your first command and timer." +platforms: [youtube] +keywords: + - StreamElements chatbot YouTube + - YouTube live chat moderator + - StreamElements custom commands +--- + +import { Steps, CardGrid, LinkCard } from '@astrojs/starlight/components'; + +Part 5, the last page in the YouTube setup series. By now you should have an account, an overlay, and a live stream — this step gets the chatbot actually responding in your chat. + +## Add the bot as a moderator + +:::note[Before you start] +Your stream must be **public** and **live** — the bot can't join a private, unlisted, or offline stream. +::: + + + +1. Open [YouTube Studio](https://studio.youtube.com/) and go to **Settings → Community**. +2. Under moderators, add either of these as a moderator: + - `https://youtube.com/c/streamelements` + - `https://www.youtube.com/channel/UCjerlCIbLPQwSnYlClkjDXg` +3. While live, view **Live chat** rather than **Top chat** — Top chat can hide the bot's messages. + + + +**Bot didn't join?** Confirm your stream is public, that you're shown as live in the StreamElements dashboard, and that you added the correct channel above as a moderator. + +:::note[A couple of things work differently on YouTube] +You can't change the bot's display name on YouTube. And since [Loyalty](/loyalty) isn't available for YouTube accounts, anything built on it — Giveaways, the Stream Store, Viewer Queue, Media Requests — won't work either. Commands, timers, and spam filters are unaffected. +::: + +## Create your first command + +![The Chat commands tab in the bot command dashboard](/img/youtube-quickstart/chat-commands.jpg) + + + +1. From the [bot command dashboard](https://streamelements.com/dashboard/bot/commands), open the **Custom commands** tab and click **Add new command**. +2. Name it — for example `!lastseen`. +3. Add a reply, using [variables](/chatbot/variables) like `$(user)`: + + ```streamelements + $(user) was last seen $(user.lastseen) ago + ``` + +4. Click **Activate command**. + + + +![The Add new command modal](/img/youtube-quickstart/add-command-modal.jpg) + +![The command form, with name, reply, and activation options](/img/youtube-quickstart/command-form.jpg) + +## Set up your first timer + +Timers post automated messages — social links, schedule reminders — at set intervals while you're live. + + + +1. From the [bot timers dashboard](https://streamelements.com/dashboard/bot/timers), click **Add new timer**. +2. Name it, add a message, and set the **Online interval** in minutes. +3. Click **Activate Timer**. + + + +![The Timers page before any timers have been created](/img/youtube-quickstart/timers.jpg) + +## Turn on spam filters + +Worth doing before your first real audience shows up. In the dashboard, go to **Chatbot → Spam filters** and pick a protection level — **Minimum**, **Medium**, or **Maximum** — as a starting point, then expand any individual filter (like [Banned Words](/chatbot/filters/bannedwords)) to fine-tune it. + +![The Spam filters page, with individual protections and a custom protection level](/img/youtube-quickstart/spam-filters.jpg) + +![The Banned words page, where you create phrase groups to filter chat](/img/youtube-quickstart/banned-words.jpg) + +## You're set up + +That's the full journey: account, dashboard, overlay, OBS, and chatbot. From here, the full docs cover everything in more depth — modules like giveaways and raffles, custom widgets, alert variations, and troubleshooting. + +## Full reference + + + + + + +