diff --git a/astro.config.mjs b/astro.config.mjs index 8d059f1..08bace4 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -232,6 +232,7 @@ export default defineConfig({ ], }, { + id: 'selive', label: 'SE.Live', link: '/selive', icon: 'window', @@ -241,12 +242,15 @@ export default defineConfig({ { label: 'Install and connect', slug: 'selive/getting-started' }, ] }, { label: 'Guides', items: [ + { label: 'YouTube quickstart', slug: 'selive/guides/youtube-quickstart', badge: { text: '5 parts', variant: 'note' } }, { label: 'Add overlays and alerts', slug: 'selive/guides/overlays-and-alerts' }, { label: 'Create a vertical canvas', slug: 'selive/guides/canvas' }, { label: 'Manage scenes and sources', slug: 'selive/guides/scenes-and-sources' }, { label: 'Set up multistreaming', slug: 'selive/guides/multistreaming' }, { label: 'Twitch dual format', slug: 'selive/guides/twitch-dual-format' }, + { label: 'YouTube dual stream', slug: 'selive/guides/youtube-dual-stream', badge: { text: 'Beta', variant: 'caution' } }, { label: 'Save replays with Backtrack', slug: 'selive/guides/backtrack' }, + { label: 'YouTube setup', slug: 'selive/guides/youtube-setup' }, { label: 'All guides', slug: 'selive/guides' }, ] }, { label: 'Troubleshooting', slug: 'selive/troubleshooting' }, @@ -342,6 +346,7 @@ export default defineConfig({ ], { exclude: ['/', '/404'], + topics: { selive: ['/selive/guides/youtube-quickstart/**'] }, }, ), ], diff --git a/public/img/youtube-quickstart/activity-feed-dock.png b/public/img/youtube-quickstart/activity-feed-dock.png new file mode 100644 index 0000000..c4d3924 Binary files /dev/null and b/public/img/youtube-quickstart/activity-feed-dock.png differ 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..c6aea23 Binary files /dev/null and b/public/img/youtube-quickstart/add-command-modal.jpg differ diff --git a/public/img/youtube-quickstart/add-timer-modal.jpg b/public/img/youtube-quickstart/add-timer-modal.jpg new file mode 100644 index 0000000..71c241c Binary files /dev/null and b/public/img/youtube-quickstart/add-timer-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..234e253 Binary files /dev/null and b/public/img/youtube-quickstart/banned-words.jpg differ diff --git a/public/img/youtube-quickstart/canvas-dock.png b/public/img/youtube-quickstart/canvas-dock.png new file mode 100644 index 0000000..5044a66 Binary files /dev/null and b/public/img/youtube-quickstart/canvas-dock.png 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..922c3bf Binary files /dev/null and b/public/img/youtube-quickstart/chat-commands.jpg differ diff --git a/public/img/youtube-quickstart/chatbot-overview.jpg b/public/img/youtube-quickstart/chatbot-overview.jpg new file mode 100644 index 0000000..32c29c4 Binary files /dev/null and b/public/img/youtube-quickstart/chatbot-overview.jpg differ diff --git a/public/img/youtube-quickstart/connect-channel.webp b/public/img/youtube-quickstart/connect-channel.webp new file mode 100644 index 0000000..4e9284a Binary files /dev/null and b/public/img/youtube-quickstart/connect-channel.webp differ diff --git a/public/img/youtube-quickstart/create-group-modal.jpg b/public/img/youtube-quickstart/create-group-modal.jpg new file mode 100644 index 0000000..e785eab Binary files /dev/null and b/public/img/youtube-quickstart/create-group-modal.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..048cea3 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..4705374 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..0dc2625 Binary files /dev/null and b/public/img/youtube-quickstart/desktop-apps.jpg differ diff --git a/public/img/youtube-quickstart/multistreaming-dock.png b/public/img/youtube-quickstart/multistreaming-dock.png new file mode 100644 index 0000000..e52bac9 Binary files /dev/null and b/public/img/youtube-quickstart/multistreaming-dock.png 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..a04330e Binary files /dev/null and b/public/img/youtube-quickstart/my-overlays.jpg differ diff --git a/public/img/youtube-quickstart/obs-docks-layout.webp b/public/img/youtube-quickstart/obs-docks-layout.webp new file mode 100644 index 0000000..c34eeae Binary files /dev/null and b/public/img/youtube-quickstart/obs-docks-layout.webp 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..14c1a3e 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..4187f92 Binary files /dev/null and b/public/img/youtube-quickstart/overlay-gallery.jpg differ diff --git a/public/img/youtube-quickstart/setup-wizard-start.png b/public/img/youtube-quickstart/setup-wizard-start.png new file mode 100644 index 0000000..671a36e Binary files /dev/null and b/public/img/youtube-quickstart/setup-wizard-start.png 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..20904fa 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..8a821a3 Binary files /dev/null and b/public/img/youtube-quickstart/timers.jpg differ diff --git a/public/img/youtube-quickstart/wizard-camera-mic.png b/public/img/youtube-quickstart/wizard-camera-mic.png new file mode 100644 index 0000000..1e8c375 Binary files /dev/null and b/public/img/youtube-quickstart/wizard-camera-mic.png differ diff --git a/public/img/youtube-quickstart/wizard-display-capture.png b/public/img/youtube-quickstart/wizard-display-capture.png new file mode 100644 index 0000000..7342e42 Binary files /dev/null and b/public/img/youtube-quickstart/wizard-display-capture.png differ diff --git a/public/img/youtube-quickstart/wizard-finish.png b/public/img/youtube-quickstart/wizard-finish.png new file mode 100644 index 0000000..2331d84 Binary files /dev/null and b/public/img/youtube-quickstart/wizard-finish.png differ diff --git a/public/img/youtube-quickstart/youtube-chat-dock.png b/public/img/youtube-quickstart/youtube-chat-dock.png new file mode 100644 index 0000000..e940fbc Binary files /dev/null and b/public/img/youtube-quickstart/youtube-chat-dock.png differ diff --git a/src/content/docs/selive/guides/index.mdx b/src/content/docs/selive/guides/index.mdx index a6b28d2..c38b740 100644 --- a/src/content/docs/selive/guides/index.mdx +++ b/src/content/docs/selive/guides/index.mdx @@ -1,10 +1,17 @@ --- title: SE.Live guides -description: Guides for SE.Live overlays, multistreaming, canvases, linked scenes, Backtrack, and Twitch dual format. +description: Guides for SE.Live overlays, multistreaming, canvases, linked scenes, Backtrack, and dual format streaming on Twitch and YouTube. --- import { CardGrid, LinkCard } from '@astrojs/starlight/components'; +## Platform setup + + + + + + ## Build your scenes @@ -18,6 +25,7 @@ import { CardGrid, LinkCard } from '@astrojs/starlight/components'; + diff --git a/src/content/docs/selive/guides/multistreaming.mdx b/src/content/docs/selive/guides/multistreaming.mdx index faf28e9..5868982 100644 --- a/src/content/docs/selive/guides/multistreaming.mdx +++ b/src/content/docs/selive/guides/multistreaming.mdx @@ -33,6 +33,6 @@ TikTok requires LIVE access before you can stream to it. To stop one output while the others keep streaming, turn off its toggle in the Multistreaming panel. -For horizontal and vertical streams on Twitch, use [Twitch dual format](/selive/guides/twitch-dual-format). +For horizontal and vertical streams on Twitch, use [Twitch dual format](/selive/guides/twitch-dual-format). On YouTube, use [YouTube dual stream](/selive/guides/youtube-dual-stream). [More about multistreaming](https://support.streamelements.com/hc/en-us/articles/18771457842066-SE-Live-The-Complete-Guide-Setup-Features-Multistreaming-Troubleshooting). diff --git a/src/content/docs/selive/guides/youtube-dual-stream.mdx b/src/content/docs/selive/guides/youtube-dual-stream.mdx new file mode 100644 index 0000000..f116636 --- /dev/null +++ b/src/content/docs/selive/guides/youtube-dual-stream.mdx @@ -0,0 +1,99 @@ +--- +title: YouTube dual stream (Beta) +description: "Send horizontal and vertical versions of your YouTube stream together with SE.Live and YouTube's dual stream feature." +platforms: [youtube] +keywords: + - YouTube dual stream + - YouTube vertical streaming + - SE.Live vertical YouTube + - YouTube Shorts live stream +--- + +import GuideScreenshot from '../../../../components/GuideScreenshot.astro'; +import profileMenu from '../img/youtube-profile-menu.png'; +import contentLive from '../img/youtube-studio-content-live.png'; +import dualStreamToggle from '../img/youtube-dual-stream-toggle.png'; +import verticalEncoderKey from '../img/youtube-vertical-encoder-key.png'; +import multistreamDock from '../img/selive-multistream-dock.png'; + +With YouTube's dual stream, one broadcast can carry both a horizontal and a vertical version of your stream. YouTube shows each viewer the version that matches the format they're watching in, so you reach desktop and mobile viewers without running two separate streams. + +In SE.Live, you send each format from its own output and connect both to the same scheduled stream in YouTube Studio. + +:::caution[Beta feature] +Dual stream isn't fully integrated into SE.Live yet, so some steps below are manual. We're working with YouTube to streamline the experience for both streamers and viewers. +::: + +## Before you begin + +- [Install SE.Live](/selive/getting-started) and connect your YouTube channel. +- Enable live streaming on your YouTube channel. +- [Create a vertical canvas](/selive/guides/canvas) for your vertical layout. YouTube channels get a horizontal and a vertical output in the Multistream dock. See [Set up multistreaming](/selive/guides/multistreaming). + +## Set up the stream in YouTube Studio + +### 1. Create a scheduled stream + +Open **YouTube Studio** from your profile menu. + + + +In the left menu, select **Content**, open the **Live** tab, and click **Get started** to schedule a stream. + + + +### 2. Open the stream settings + +Open your scheduled stream and select the **Stream settings** tab. Make sure **Dual stream** is turned on. It lets you connect a vertical stream from your encoder, or have YouTube generate a vertical cropped version for the Shorts feed. + + + +### 3. Set the vertical stream to use an encoder + +In the vertical stream panel, change the source to **Encoder** and select your vertical stream key. The horizontal stream keeps using the default stream key. + + + +## Go live from SE.Live + +### 4. Enable the main output + +In the **Multistream** dock in SE.Live, turn on your main YouTube output, the horizontal one with the desktop icon. + + + +### 5. Start the stream in SE.Live + +Start your stream in SE.Live. When prompted, choose the scheduled stream you created in step 1. + +### 6. Enable the second output + +In the Multistream dock, turn on the vertical output, the one with the phone icon. + +### 7. Choose the same scheduled stream + +When SE.Live prompts you to start the vertical output, choose the same scheduled stream you picked in step 5. Both outputs must use the same scheduled stream. + +### 8. Go live in YouTube Studio + +Once both outputs are connected, click **Go Live** in YouTube Studio. Each preview in YouTube Studio shows **No data** until its output connects. + +## End the stream + +### 9. End the stream in YouTube Studio + +End your broadcast in **YouTube Studio** first. + +### 10. End the stream in SE.Live + +Then end the stream in **SE.Live**. + +## Get help + +[Get help with dual stream setup](https://support.streamelements.com/hc/en-us/requests/new). + +## Related + +- [Create a vertical canvas](/selive/guides/canvas) +- [Set up multistreaming](/selive/guides/multistreaming) +- [Stream in dual format on Twitch](/selive/guides/twitch-dual-format) diff --git a/src/content/docs/selive/guides/youtube-quickstart/build-your-overlay.mdx b/src/content/docs/selive/guides/youtube-quickstart/build-your-overlay.mdx new file mode 100644 index 0000000..7a2f9ad --- /dev/null +++ b/src/content/docs/selive/guides/youtube-quickstart/build-your-overlay.mdx @@ -0,0 +1,67 @@ +--- +title: "YouTube Quickstart: Build Your Overlay" +sidebar: + label: "3. Build Your Overlay" +description: "Create a YouTube overlay from a theme or a blank canvas, then add Super Chat alerts." +platforms: [youtube] +prev: + link: /selive/guides/youtube-quickstart/dashboard-tour + label: "2. Dashboard Tour" +next: + link: /selive/guides/youtube-quickstart/connect-obs-and-go-live + label: "4. Connect OBS and Go Live" +keywords: + - StreamElements YouTube overlay + - StreamElements AlertBox YouTube + - YouTube Super Chat alert +--- + +import { Steps, CardGrid, LinkCard } from '@astrojs/starlight/components'; + +Part 3 of 5 · [All steps](/selive/guides/youtube-quickstart) + +An overlay adds graphics and alerts to your stream. If yours is ready, continue to [4. Connect OBS and Go Live](/selive/guides/youtube-quickstart/connect-obs-and-go-live). + +## Create an overlay + +To use a theme: + + + +1. Go to the [Themes Gallery](https://streamelements.com/dashboard/themes) and open the **Theme** tab. +2. Choose the **YouTube Theme**. Use the static version to reduce CPU usage. +3. Click **Create** and give it a name. + + + +![Overlay themes in the Themes Gallery](/img/youtube-quickstart/overlay-gallery.jpg) + +To start with a blank overlay, go to [Overlays](https://streamelements.com/dashboard/overlays) and click **New overlay**. Choose a resolution that matches your stream, such as 1920x1080, then click **Start**. If you saved an overlay during account setup, you can open that one instead. + +![Empty My Overlays page with the New overlay button](/img/youtube-quickstart/my-overlays.jpg) + +## Set up your AlertBox for Super Chats + +The AlertBox displays alerts on your stream. Open your overlay and select its AlertBox. If it doesn't have one yet, click **+** in the editor and choose **Alerts → AlertBox**. + +![Overlay editor with the widget picker open](/img/youtube-quickstart/overlay-editor.jpg) + +Open the AlertBox settings and enable **SuperChat**. + +:::note[Subscriber and membership alerts] +New subscribers and memberships don't trigger AlertBox alerts on YouTube. Leave those alert types unchecked. +::: + +Save the overlay. You'll add its URL to OBS next. + +## Next + + + + + +## Related + + + + diff --git a/src/content/docs/selive/guides/youtube-quickstart/connect-obs-and-go-live.mdx b/src/content/docs/selive/guides/youtube-quickstart/connect-obs-and-go-live.mdx new file mode 100644 index 0000000..4bbb8d3 --- /dev/null +++ b/src/content/docs/selive/guides/youtube-quickstart/connect-obs-and-go-live.mdx @@ -0,0 +1,152 @@ +--- +title: "YouTube Quickstart: Connect OBS and Go Live" +sidebar: + label: "4. Connect OBS & Go Live" +description: "Install SE.Live, connect YouTube to OBS, add your camera, microphone, and overlay, and start streaming." +platforms: [youtube] +prev: + link: /selive/guides/youtube-quickstart/build-your-overlay + label: "3. Build Your Overlay" +next: + link: /selive/guides/youtube-quickstart/set-up-your-chatbot + label: "5. Set Up Your Chatbot" +keywords: + - SE.Live YouTube setup + - StreamElements YouTube stream key + - connect OBS to YouTube +--- + +import { Steps, CardGrid, LinkCard } from '@astrojs/starlight/components'; + +Part 4 of 5 · [All steps](/selive/guides/youtube-quickstart) + +Connect OBS to YouTube and add your overlay as a browser source. If you're already streaming with your overlay, continue to [5. Set Up Your Chatbot](/selive/guides/youtube-quickstart/set-up-your-chatbot). + +## Install SE.Live + +SE.Live is a StreamElements plugin that adds chat, the Activity Feed, and stream controls to OBS. + +**Requirements:** OBS Studio 31.x or newer. SE.Live is available for Windows, with a macOS beta. + +![Desktop Apps page with the SE.Live download](/img/youtube-quickstart/desktop-apps.jpg) + + + +1. Download the installer for your operating system from the [SE.Live page](https://streamelements.com/selive). Choose the Mac beta for macOS. +2. Close OBS, then run the installer and choose your install folder. +3. Reopen OBS. On Windows, run it **as Administrator**. Look for the **StreamElements** menu in the menu bar. + + + +## Connect your channel to SE.Live + +The first time SE.Live opens in OBS, it asks you to connect a channel. + +![SE.Live channel sign-in options in OBS](/img/youtube-quickstart/connect-channel.webp) + + + +1. Click **YOUTUBE**, sign in with Google, and select your channel. +2. On the **I'd like to start with...** screen, choose **New setup**. To stream to several platforms, choose **Multi-streaming Setup** and follow the [multistreaming guide](/selive/guides/multistreaming). + + + +![SE.Live welcome screen with New setup and Multi-streaming Setup options](/img/youtube-quickstart/setup-wizard-start.png) + +## Run the setup wizard + +The **New setup** wizard adds your microphone, camera, and display capture to OBS. + + + +1. **Camera & microphone.** Select your devices, or choose **No camera**. Click **Next**. + + ![Microphone and camera selection in the setup wizard](/img/youtube-quickstart/wizard-camera-mic.png) + +2. **Display capture.** Select the display you want to stream and click **Next**. You can switch to game capture later. + + ![Display selection in the setup wizard](/img/youtube-quickstart/wizard-display-capture.png) + +3. Click **Finish setup**. + + + +![Finish setup button on the last wizard screen](/img/youtube-quickstart/wizard-finish.png) + +## Connect OBS to YouTube + +In OBS, open **Settings → Stream**, choose **YouTube - RTMPS**, and click **Connect Account**. Follow the Google sign-in prompts and select the channel you want to stream to. If OBS already shows the correct channel, keep that connection. + +### Use a stream key instead + +If you connected your YouTube account in OBS, skip this step. To connect with a stream key instead: + + + +1. In [YouTube Studio](https://studio.youtube.com/), select **Create → Go Live** and open the **Stream** tab. Create a stream if you don't have one yet, then copy its stream key. +2. In OBS, open **Settings → Stream**, choose **YouTube - RTMPS**, and select **Use Stream Key**. Paste the key and save your settings. + + + +:::caution[Keep your stream key private] +Anyone with your stream key can stream to your channel. Don't share it or show it on stream. +::: + +## Add your overlay + + + +1. Open **My Overlays** in StreamElements. Find the [overlay you created earlier](/selive/guides/youtube-quickstart/build-your-overlay), open its menu, and select **Copy URL**. +2. In OBS **Sources**, click **+ → Browser**, name the source, and paste the URL. +3. Set **Width** and **Height** to match your overlay (`1920` and `1080` if you used the default resolution). Check **Shutdown when source not visible** and click **OK**. + + + +## Open chat and stream controls + +Open **StreamElements → SE.Live Docks** and choose the panels you want to show. + +**Canvas** shows a preview and scene list for a [canvas](/selive/guides/canvas), including vertical layouts. + +![Canvas dock with a vertical preview and scene list](/img/youtube-quickstart/canvas-dock.png) + +**YouTube Chat** shows chat messages while you're live. It also links to **Live Video Settings** and the **Live Dashboard**. + +![YouTube Chat dock before the stream starts](/img/youtube-quickstart/youtube-chat-dock.png) + +**Multi-Streaming** lists your connected destinations. Turn each destination on or off before you go live. + +![Multi-Streaming dock with two YouTube destinations enabled](/img/youtube-quickstart/multistreaming-dock.png) + +**Activity Feed** shows the same events and alert controls as the [dashboard feed](/selive/guides/youtube-quickstart/dashboard-tour#the-activity-feed). + +![Activity Feed dock with alert controls and no recent events](/img/youtube-quickstart/activity-feed-dock.png) + +Drag the panels to arrange them around your OBS preview. + +![OBS preview surrounded by Activity Feed, Canvas, Multi-Streaming, and YouTube Chat docks](/img/youtube-quickstart/obs-docks-layout.webp) + +## Go live + + + +1. If you connected your YouTube account, use **Manage Broadcast** to create or select a broadcast. If you used a stream key, open that stream in YouTube Studio. Check the title, category, and privacy setting before starting. +2. Click **Start Streaming** in OBS. Depending on your broadcast settings, you may also need to click **Go Live** in YouTube Studio. Check YouTube to confirm the stream is live. + + + +See the [OBS YouTube guide](https://obsproject.com/forum/resources/how-to-stream-to-youtube-with-obs-studio.232/) for account connection options and [YouTube's encoder guide](https://support.google.com/youtube/answer/2907883) for stream key setup. + +## Next + + + + + +## Related + + + + + + diff --git a/src/content/docs/selive/guides/youtube-quickstart/create-your-account.mdx b/src/content/docs/selive/guides/youtube-quickstart/create-your-account.mdx new file mode 100644 index 0000000..80ccb27 --- /dev/null +++ b/src/content/docs/selive/guides/youtube-quickstart/create-your-account.mdx @@ -0,0 +1,61 @@ +--- +title: "YouTube Quickstart: Create Your Account" +sidebar: + label: "1. Create Your Account" +description: "Create a StreamElements account with your YouTube channel and set up the chatbot, tipping, an overlay, and SE.Live." +platforms: [youtube] +prev: + link: /selive/guides/youtube-quickstart + label: YouTube quickstart overview +next: + link: /selive/guides/youtube-quickstart/dashboard-tour + label: "2. Dashboard Tour" +keywords: + - StreamElements YouTube sign up + - StreamElements YouTube setup + - StreamElements initial setup +--- + +import { Steps, CardGrid, LinkCard } from '@astrojs/starlight/components'; + +Part 1 of 5 · [All steps](/selive/guides/youtube-quickstart) + +Use your YouTube account to sign up for StreamElements. If you've already signed up, continue to [2. Dashboard Tour](/selive/guides/youtube-quickstart/dashboard-tour). + +:::note[Before you begin] +You need to enable live streaming on YouTube before your first stream. This includes phone verification, and [activation can take up to 24 hours](https://support.google.com/youtube/answer/2907883). Start that now; you can set up StreamElements while you wait. +::: + +## 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. + + + +Your dashboard opens after you sign in. It shows existing totals, such as your subscriber count, but the Activity Feed won't include events from before you connected your account. + +:::note[YouTube feature limits] +The Loyalty system isn't available on YouTube. This includes points, the Stream Store, giveaways, and viewer queues. +::: + +## Complete the setup wizard + +Click **Continue** in the setup bar at the top of your dashboard. + + + +1. **Activate the chatbot.** Click **Activate**. You'll also need to add the bot as a moderator in [5. Set Up Your Chatbot](/selive/guides/youtube-quickstart/set-up-your-chatbot). The bot joins when your stream is public and live. +2. **Set up tipping.** Enter your PayPal email and connect your tipping page. +3. **Create your first overlay.** Choose **Create**, keep the resolution at 1080p, and click **Start**. Save the overlay. You'll add alerts in [3. Build Your Overlay](/selive/guides/youtube-quickstart/build-your-overlay). +4. **Download SE.Live.** Click **Download** to get the OBS plugin. The installation steps are in [4. Connect OBS and Go Live](/selive/guides/youtube-quickstart/connect-obs-and-go-live). + + + +## Next + + + + diff --git a/src/content/docs/selive/guides/youtube-quickstart/dashboard-tour.mdx b/src/content/docs/selive/guides/youtube-quickstart/dashboard-tour.mdx new file mode 100644 index 0000000..c642a2f --- /dev/null +++ b/src/content/docs/selive/guides/youtube-quickstart/dashboard-tour.mdx @@ -0,0 +1,58 @@ +--- +title: "YouTube Quickstart: Take the Dashboard Tour" +sidebar: + label: "2. Dashboard Tour" +description: "Check your YouTube stream stats, manage alerts in the Activity Feed, and find your StreamElements account settings." +platforms: [youtube] +prev: + link: /selive/guides/youtube-quickstart/create-your-account + label: "1. Create Your Account" +next: + link: /selive/guides/youtube-quickstart/build-your-overlay + label: "3. Build Your Overlay" +keywords: + - StreamElements dashboard + - StreamElements Activity Feed +--- + +import { Steps, CardGrid, LinkCard } from '@astrojs/starlight/components'; + +Part 2 of 5 · [All steps](/selive/guides/youtube-quickstart) + +The dashboard shows your stream stats and recent activity. If you already know your way around, continue to [3. Build Your Overlay](/selive/guides/youtube-quickstart/build-your-overlay). + +## The main dashboard + +The home page shows subscribers, Super Chats, tips, and average viewership. Choose a time period from the top bar to change the stats and graph. + +On the right, check whether the chatbot has joined your channel. **Part** removes it from chat; **Mute** stops it from posting. You can also edit your stream title and category here. + +![The StreamElements dashboard home screen](/img/youtube-quickstart/dashboard-home.jpg) + +## The top bar + +Your profile picture appears at the top right of each dashboard page, with a red ring while you're live. Click it to change your language or theme, import settings, or open SE.Live and Ground Control. + +## The Activity Feed + +The [Activity Feed](https://streamelements.com/dashboard/activity) lists individual events as they happen. You can mute or skip alerts, check chatbot status, and reset session settings here. + +![Activity Feed with recent events and alert controls](/img/youtube-quickstart/dashboard-activity-feed.jpg) + +To filter the feed: + + + +1. Click **Filter**. +2. Choose which event types you want to see. +3. Click **Filter** to apply. + + + +You can also open the Activity Feed in OBS through [SE.Live](/selive). + +## Next + + + + diff --git a/src/content/docs/selive/guides/youtube-quickstart/index.mdx b/src/content/docs/selive/guides/youtube-quickstart/index.mdx new file mode 100644 index 0000000..2c94026 --- /dev/null +++ b/src/content/docs/selive/guides/youtube-quickstart/index.mdx @@ -0,0 +1,26 @@ +--- +title: "YouTube Quickstart" +description: "Set up StreamElements for YouTube: create an account, add an overlay to OBS, and connect the chatbot." +platforms: [youtube] +prev: + link: /selive/guides + label: All SE.Live guides +next: + link: /selive/guides/youtube-quickstart/create-your-account + label: "1. Create Your Account" +keywords: + - StreamElements YouTube setup guide + - how to stream on YouTube with StreamElements +--- + +import { CardGrid, LinkCard } from '@astrojs/starlight/components'; + +Connect your YouTube channel to StreamElements, add an overlay to OBS, and set up the chatbot. Follow the pages in order, or skip the steps you've already finished. + + + + + + + + diff --git a/src/content/docs/selive/guides/youtube-quickstart/set-up-your-chatbot.mdx b/src/content/docs/selive/guides/youtube-quickstart/set-up-your-chatbot.mdx new file mode 100644 index 0000000..77346f3 --- /dev/null +++ b/src/content/docs/selive/guides/youtube-quickstart/set-up-your-chatbot.mdx @@ -0,0 +1,106 @@ +--- +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] +prev: + link: /selive/guides/youtube-quickstart/connect-obs-and-go-live + label: "4. Connect OBS and Go Live" +next: + link: /selive/guides + label: All SE.Live guides +keywords: + - StreamElements chatbot YouTube + - YouTube live chat moderator + - StreamElements custom commands +--- + +import { Steps, CardGrid, LinkCard } from '@astrojs/starlight/components'; + +Part 5 of 5 · [All steps](/selive/guides/youtube-quickstart) + +Add StreamElements as a moderator, then create a command, schedule a timer, and choose your spam filters. + +![Chatbot overview with commands, timers, counters, and spam filters](/img/youtube-quickstart/chatbot-overview.jpg) + +## Add the bot as a moderator + +:::note[Before you start] +The bot only joins **public, live** streams. It can't join a private, unlisted, or offline stream. +::: + + + +1. Open [YouTube Studio](https://studio.youtube.com/) and go to **Settings → Community**. +2. Add StreamElements as a moderator using either channel URL: + - `https://youtube.com/c/streamelements` + - `https://www.youtube.com/channel/UCjerlCIbLPQwSnYlClkjDXg` +3. When you're live, select **Live chat**. **Top chat** can hide the bot's messages. + + + +If the bot doesn't join, check that your stream is public, the StreamElements dashboard shows you as live, and the moderator URL matches one of the URLs above. + +:::note[YouTube feature limits] +You can't change the bot's display name on YouTube. The Loyalty system and features that depend on it, including Giveaways, the Stream Store, Viewer Queue, and Media Requests, aren't available on YouTube. +::: + +## Create your first command + +This example creates a `!hello` command that replies with the viewer's name. + +![Chat commands page showing Default commands](/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. Choose **Start from scratch** and enter `hello` in **Command name**. Viewers will type `!hello` to use it. +3. In **Reply**, enter: + + ```streamelements + Hello $(sender)! + ``` + +4. Click **Activate command**, then type `!hello` in your live chat to check the reply. + + + +The [`$(sender)`](/chatbot/variables/sender) variable inserts the name of the person who used the command. Use it for names on YouTube; `$(user)` doesn't work there. + +![Add a chat command dialog with Start from scratch and command templates](/img/youtube-quickstart/add-command-modal.jpg) + +## Set up your first timer + +Timers post messages at set intervals while you're live. Use them for social links or schedule reminders. + + + +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**. + + + +![Empty Timers page with the Add new timer button](/img/youtube-quickstart/timers.jpg) + +![Add a timer dialog with Socials, Discord, and Hydration break templates](/img/youtube-quickstart/add-timer-modal.jpg) + +## Turn on spam filters + +Open **Chatbot → Spam filters** and choose **Minimum**, **Medium**, or **Maximum** protection. Expand a filter to change its settings. Use [Banned Words](/chatbot/filters/bannedwords) to block specific words or phrases. + +![Spam filters and protection level settings](/img/youtube-quickstart/spam-filters.jpg) + +![Banned words page with phrase groups](/img/youtube-quickstart/banned-words.jpg) + +![New banned-phrase group with timeout and exclusion settings](/img/youtube-quickstart/create-group-modal.jpg) + +## Related + + + + + + + diff --git a/src/content/docs/selive/guides/youtube-setup.mdx b/src/content/docs/selive/guides/youtube-setup.mdx new file mode 100644 index 0000000..747c831 --- /dev/null +++ b/src/content/docs/selive/guides/youtube-setup.mdx @@ -0,0 +1,35 @@ +--- +title: Set Up SE.Live for YouTube +sidebar: + label: YouTube Setup +description: "Connect SE.Live to YouTube: add your camera and mic, set your stream key, add an overlay, and add the StreamElements chatbot as a moderator." +platforms: [youtube] +keywords: + - SE.Live YouTube setup + - StreamElements YouTube stream key + - YouTube overlay OBS +--- + +import { Steps } from '@astrojs/starlight/components'; + +[Install SE.Live](/selive/getting-started) first, then follow these YouTube-specific steps to finish your setup. + + + +1. **Connect your YouTube account** to SE.Live to integrate it with StreamElements. + +2. **Add your audio and video sources:** click **+** in Sources, add an **Audio Input Capture** for your microphone, then add a **Video Input Capture** for your camera. + +3. **Add your YouTube stream key:** open **Settings → Stream**, choose **YouTube / YouTube Gaming**, and paste your stream key — find it via **Get stream key**, or under [youtube.com/live_dashboard](https://www.youtube.com/live_dashboard) → **Encoder setup**. Never share your stream key. + +4. **Add a YouTube overlay:** in the [Themes Gallery](https://streamelements.com/dashboard/themes), open the **Theme** tab and choose the **YouTube Theme** (the static option gives the best CPU performance). Create and name it, then open it in **My Overlays**. Select the AlertBox, open its settings, and deselect every checkbox except **SuperChat** — YouTube's other event types aren't supported yet. Copy the overlay's URL, create a new browser source in SE.Live, paste it in, set the resolution to 1920x1080, and check **Shutdown when source not visible**. + +5. **Add the StreamElements chatbot as a moderator:** copy the StreamElements Chatbot URL from onboarding, then paste and approve it under your YouTube dashboard's **Settings → Community**. + + + +You're ready to go live. + +## Related + +- [Add overlays and alerts](/selive/guides/overlays-and-alerts) diff --git a/src/content/docs/selive/img/captures.json b/src/content/docs/selive/img/captures.json index 68221e8..ff1bd5c 100644 --- a/src/content/docs/selive/img/captures.json +++ b/src/content/docs/selive/img/captures.json @@ -66,6 +66,26 @@ 1111, 718 ] + }, + "youtube-profile-menu.png": { + "source": "Screenshots supplied by StreamElements support, 2026-10-14; used as supplied, no crop", + "state": "YouTube profile menu with YouTube Studio highlighted" + }, + "youtube-studio-content-live.png": { + "source": "Screenshots supplied by StreamElements support, 2026-10-14; used as supplied, no crop", + "state": "YouTube Studio Content page, Live tab, Get started button" + }, + "youtube-dual-stream-toggle.png": { + "source": "Screenshots supplied by StreamElements support, 2026-10-14; used as supplied, no crop", + "state": "Stream settings tab with Dual stream turned on" + }, + "youtube-vertical-encoder-key.png": { + "source": "Screenshots supplied by StreamElements support, 2026-10-14; used as supplied, no crop", + "state": "Live control room with default stream key (horizontal) and Encoder plus vertical stream key (vertical)" + }, + "selive-multistream-dock.png": { + "source": "Screenshots supplied by StreamElements support, 2026-10-14; used as supplied, no crop", + "state": "SE.Live Multistream dock with horizontal output on and vertical output off" } }, "maintenance": "Use focused crops of real product screenshots. Retain control labels and values; do not paint over or recreate UI. Exclude cursors, OS window frames, unrelated panels, credentials, and private overlay URLs. Store real PNG files and serve without lossy recompression or upscaling.", @@ -92,7 +112,8 @@ "Scene-link instructions describe the direction explicitly supported by the article: selecting a canvas scene changes its linked OBS scene.", "Removed source-comparison prose from end-user pages; kept relevant help links.", "Twitch dual format explicitly requires OBS 32.0.0 or newer, as listed by Twitch.", - "macOS beta support confirmed by Jacob in this task on 2026-09-13, consistent with the product page. The Windows-only statement in the support article is stale. Installation documents both platforms; OBS 31+ is stated for Windows only." + "macOS beta support confirmed by Jacob in this task on 2026-09-13, consistent with the product page. The Windows-only statement in the support article is stale. Installation documents both platforms; OBS 31+ is stated for Windows only.", + "YouTube dual stream guide (2026-10-14) written from StreamElements support's own beta steps; the screenshots show a staff test channel. Beta status is stated in the page; not independently re-tested." ], "localCaptureEnvironment": { "platform": "macOS", diff --git a/src/content/docs/selive/img/selive-multistream-dock.png b/src/content/docs/selive/img/selive-multistream-dock.png new file mode 100644 index 0000000..e464d56 Binary files /dev/null and b/src/content/docs/selive/img/selive-multistream-dock.png differ diff --git a/src/content/docs/selive/img/youtube-dual-stream-toggle.png b/src/content/docs/selive/img/youtube-dual-stream-toggle.png new file mode 100644 index 0000000..4fa112a Binary files /dev/null and b/src/content/docs/selive/img/youtube-dual-stream-toggle.png differ diff --git a/src/content/docs/selive/img/youtube-profile-menu.png b/src/content/docs/selive/img/youtube-profile-menu.png new file mode 100644 index 0000000..38cc42b Binary files /dev/null and b/src/content/docs/selive/img/youtube-profile-menu.png differ diff --git a/src/content/docs/selive/img/youtube-studio-content-live.png b/src/content/docs/selive/img/youtube-studio-content-live.png new file mode 100644 index 0000000..59cd522 Binary files /dev/null and b/src/content/docs/selive/img/youtube-studio-content-live.png differ diff --git a/src/content/docs/selive/img/youtube-vertical-encoder-key.png b/src/content/docs/selive/img/youtube-vertical-encoder-key.png new file mode 100644 index 0000000..7152648 Binary files /dev/null and b/src/content/docs/selive/img/youtube-vertical-encoder-key.png differ diff --git a/src/content/docs/selive/index.mdx b/src/content/docs/selive/index.mdx index 2e0402c..0042798 100644 --- a/src/content/docs/selive/index.mdx +++ b/src/content/docs/selive/index.mdx @@ -9,9 +9,10 @@ SE.Live brings StreamElements chat, activity, and streaming tools into OBS Studi + - +