Expand SE.Live guides with verified steps and focused screenshots

astro.config.mjs

@@ -242,6 +242,11 @@ export default defineConfig({
                 ] },
                 { label: 'Guides', items: [
                   { 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: 'Save replays with Backtrack', slug: 'selive/guides/backtrack' },
                   { label: 'All guides', slug: 'selive/guides' },
                 ] },
                 { label: 'Troubleshooting', slug: 'selive/troubleshooting' },

src/components/GuideScreenshot.astro

@@ -0,0 +1,39 @@
+---
+import { Image } from 'astro:assets';
+import type { ImageMetadata } from 'astro';
+
+interface Props {
+  src: ImageMetadata;
+  alt: string;
+  caption: string;
+  width?: number;
+}
+
+const { src, alt, caption, width = 640 } = Astro.props;
+---
+
+<figure style={`max-width: ${Math.min(width, src.width)}px`}>
+  <a href={src.src} target="_blank" rel="noreferrer" aria-label={`Open full-size screenshot: ${alt}`}>
+    <Image src={src} alt={alt} format="png" loading="lazy" decoding="async" />
+  </a>
+  <figcaption>{caption}</figcaption>
+</figure>
+
+<style>
+  figure {
+    margin: 1.5rem 0;
+  }
+  figure img {
+    display: block;
+    width: 100%;
+    height: auto;
+    border: 1px solid var(--sl-color-gray-5);
+    border-radius: 0.5rem;
+  }
+  figcaption {
+    margin-top: 0.6rem;
+    color: var(--sl-color-gray-2);
+    font-size: 0.875rem;
+    line-height: 1.5;
+  }
+</style>

src/content/docs/selive/getting-started.mdx

@@ -5,16 +5,23 @@ description: Download SE.Live, install it in OBS Studio, and connect your Stream
 
 ## Install
 
-Download the installer from the [SE.Live page](https://streamelements.com/selive). Check the current requirements there before installing. Close OBS, run the installer, then reopen OBS.
+SE.Live is available for Windows and in beta for macOS. On Windows, use OBS Studio 31.x or newer. For Twitch dual format, follow the [dual format setup](/selive/guides/twitch-dual-format) requirements.
+
+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.
+3. Reopen OBS and look for the **StreamElements** menu.
 
 ## Connect
 
-Open **StreamElements → Login** in OBS and sign in. To connect your streaming service, open **Settings → Stream** and follow the account connection steps.
+1. Open **StreamElements → Login** in OBS and sign in to your StreamElements account.
+2. Open **Settings → Stream**, choose your streaming service, and follow the account connection steps.
 
-Open chat and activity through **StreamElements → SE.Live Docks**.
+Open chat and activity through **StreamElements → SE.Live Docks**. If the docks are missing, follow the [troubleshooting steps](/selive/troubleshooting#missing-docks).
 
 For the full setup walkthrough, see the [SE.Live support guide](https://support.streamelements.com/hc/en-us/articles/18771457842066).
 
-## Next step
+## Next steps
 
-[Add overlays and alerts](/selive/guides/overlays-and-alerts) to your scene.
+- [Add overlays and alerts](/selive/guides/overlays-and-alerts) to your scene.
+- [Set up multistreaming](/selive/guides/multistreaming) to send your stream to more than one platform.
+- [Create a vertical canvas](/selive/guides/canvas) for a separate vertical layout.

src/content/docs/selive/guides/backtrack.mdx

@@ -0,0 +1,34 @@
+---
+title: Save replays with Backtrack
+description: Enable a replay buffer for an SE.Live canvas and save recent moments with a hotkey.
+---
+
+import GuideScreenshot from '../../../../components/GuideScreenshot.astro';
+import backtrack from '../img/backtrack-options.png';
+
+Backtrack keeps a temporary recording of your stream. Press a hotkey to save a moment after it happens.
+
+Use the latest SE.Live version and [create a custom canvas](/selive/guides/canvas) before you begin.
+
+## Enable Backtrack
+
+1. Open your canvas settings with the gear icon.
+2. Scroll to **Backtrack options** and turn on **Enable backtrack (replay buffer) while streaming**.
+3. Click **Save changes**.
+
+<GuideScreenshot src={backtrack} alt="Backtrack options with the Enable backtrack (replay buffer) while streaming switch." caption="Enable Backtrack for each canvas you want to save replays from." />
+
+## Save a replay
+
+1. Start streaming from the canvas.
+2. Open **Settings → Hotkeys** in OBS.
+3. Under **Canvas Backtrack (Replay Buffer): [CANVAS NAME]**, assign a hotkey to **Save Replay**.
+4. Save your settings, then press the hotkey to save a replay. SE.Live remembers it for this canvas.
+
+Canvas Backtrack saves replays only while the canvas is streaming. To save replays offline, use OBS's replay buffer.
+
+## Limit resource use
+
+Keep buffers at 180 seconds or less. Enabled buffers use encoding resources even while the canvas is idle, so turn off Backtrack on canvases you do not need.
+
+[More about Backtrack](https://support.streamelements.com/hc/en-us/articles/26268419155858-Using-Backtrack-on-SE-Live-Canvas-Replay-Buffer-Guide).

src/content/docs/selive/guides/canvas.mdx

@@ -0,0 +1,40 @@
+---
+title: Create a vertical canvas
+description: Create an SE.Live canvas for a vertical stream and arrange its scenes and sources.
+---
+
+import GuideScreenshot from '../../../../components/GuideScreenshot.astro';
+import settings from '../img/canvas-settings.png';
+
+A canvas holds a stream layout. Create a separate canvas to arrange your camera, gameplay, and alerts for vertical viewing.
+
+Before you begin, [install and connect SE.Live](/selive/getting-started).
+
+## Create the canvas
+
+1. In the **Multistreaming** panel, open an output's three-dot menu.
+2. Select **Canvas → Create New Canvas**.
+3. Name the canvas and choose **1080 × 1920** for a vertical layout.
+4. Confirm to create the canvas.
+
+The canvas opens in its own dock, with a preview above its scenes and sources. If you close it, reopen it through **StreamElements → SE.Live Docks**.
+
+## Check the resolution
+
+Open the canvas settings with the gear icon. Under **General**, check that **Resolution** is **1080×1920 (1080p Vertical)**. Save any changes.
+
+<GuideScreenshot src={settings} alt="Canvas General settings with Resolution set to 1080×1920 (1080p Vertical)." caption="A vertical canvas is taller than it is wide: 1080 pixels wide by 1920 pixels high." />
+
+## Arrange the layout
+
+[Add scenes and sources](/selive/guides/scenes-and-sources) to the canvas. Resize and reposition them in the preview so your camera, gameplay, and alerts fit the portrait frame.
+
+[Link each canvas scene](/selive/guides/scenes-and-sources#link-scenes) to its matching OBS scene to keep scene changes in sync.
+
+## Choose where to stream
+
+For [multistreaming](/selive/guides/multistreaming), select the canvas from the output's **Canvas** menu. Check the output's canvas name before going live.
+
+For [Twitch dual format](/selive/guides/twitch-dual-format), select it as **Additional Canvas** in OBS's stream settings.
+
+[More about canvases](https://support.streamelements.com/hc/en-us/articles/23190715979538-Understanding-Canvas-How-to-Decide-What-to-Stream).

src/content/docs/selive/guides/index.mdx

@@ -1,18 +1,28 @@
 ---
 title: SE.Live guides
-description: Guides for overlays, scenes, and streaming with SE.Live.
+description: Guides for SE.Live overlays, multistreaming, canvases, linked scenes, Backtrack, and Twitch dual format.
 ---
 
 import { CardGrid, LinkCard } from '@astrojs/starlight/components';
 
-## Overlays
+## Build your scenes
 
 <CardGrid>
   <LinkCard title="Add overlays and alerts" href="/selive/guides/overlays-and-alerts" description="Add an AlertBox to an overlay and bring it into OBS." />
+  <LinkCard title="Create a vertical canvas" href="/selive/guides/canvas" description="Choose a resolution and arrange a separate stream layout." />
+  <LinkCard title="Manage scenes and sources" href="/selive/guides/scenes-and-sources" description="Reuse sources and link scenes across your layouts." />
 </CardGrid>
 
-## More from the Help Center
+## Stream and save replays
 
-The [SE.Live Help Center](https://support.streamelements.com/hc/en-us/sections/10474402361490-SE-Live) has detailed guides for scenes and sources, Canvas, and streaming formats.
+<CardGrid>
+  <LinkCard title="Set up multistreaming" href="/selive/guides/multistreaming" description="Configure outputs and confirm each platform is live." />
+  <LinkCard title="Stream in dual format on Twitch" href="/selive/guides/twitch-dual-format" description="Send horizontal and vertical layouts to Twitch together." />
+  <LinkCard title="Save replays with Backtrack" href="/selive/guides/backtrack" description="Enable a replay buffer for a custom canvas and set a save hotkey." />
+</CardGrid>
+
+## More help
+
+For common problems, use [SE.Live troubleshooting](/selive/troubleshooting). The [SE.Live Help Center](https://support.streamelements.com/hc/en-us/sections/10474402361490-SE-Live) has more setup and troubleshooting guides.
 
-For setup, features, and multistreaming, open the [complete SE.Live guide](https://support.streamelements.com/hc/en-us/articles/18771457842066).
+[Ground Control](https://support.streamelements.com/hc/en-us/articles/22154503415314-Ground-Control) is a separate app for managing chat, activity feeds, and stream controls.

src/content/docs/selive/guides/multistreaming.mdx

@@ -0,0 +1,38 @@
+---
+title: Set up multistreaming
+description: Connect streaming outputs, choose audio tracks, and go live on multiple platforms.
+---
+
+import GuideScreenshot from '../../../../components/GuideScreenshot.astro';
+import outputs from '../img/multistream-outputs.png';
+
+Each output sends your stream to a platform. SE.Live sends these streams from your computer, so your upload connection must handle their combined bitrate. Three outputs at 6,000 Kbps need 18,000 Kbps, plus room for overhead.
+
+## Connect your outputs
+
+1. Open **StreamElements → SE.Live Docks → StreamElements Multi-Streaming**.
+2. Open **Settings** from the panel's gear button or an output's three-dot menu.
+3. Under **Outputs**, connect the accounts you want to stream to. Use **Add output** to add another destination.
+4. Expand **Output settings** and choose the OBS audio track to send to that output. Save your changes.
+
+<GuideScreenshot src={outputs} alt="A Twitch output with a Connect button and Output settings expanded to show the Audio tracks dropdown." caption="Connect the account, then choose its audio track under Output settings." />
+
+## Prepare each broadcast
+
+1. Enable the outputs you want in the Multistreaming panel.
+2. Check each channel name and assigned canvas. Use a [custom canvas](/selive/guides/canvas) for a separate layout.
+3. Under **Broadcast Settings**, set each stream's title, category, and platform options, such as YouTube privacy.
+
+TikTok requires LIVE access before you can stream to it.
+
+## Go live
+
+1. Click **Start Streaming**.
+2. Review the details for each enabled platform, then click **Start Streaming** again.
+3. Check for **Live** beside every output you enabled.
+
+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).
+
+[More about multistreaming](https://support.streamelements.com/hc/en-us/articles/18771457842066-SE-Live-The-Complete-Guide-Setup-Features-Multistreaming-Troubleshooting).

src/content/docs/selive/guides/overlays-and-alerts.mdx

@@ -3,19 +3,38 @@ title: Add overlays and alerts
 description: Create an overlay and display it in your OBS scene with SE.Live.
 ---
 
+import GuideScreenshot from '../../../../components/GuideScreenshot.astro';
+import alertbox from '../img/alertbox-menu.png';
+
 ## Create your overlay
 
 1. Open [My Overlays](https://streamelements.com/dashboard/overlays) and choose **New overlay**.
 2. Choose a resolution that matches your scene.
 3. In the editor, select **+ → Alerts → AlertBox** to add alerts. Configure the alert types you need, then save.
 
-The [overlay setup guide](/overlays/getting-started) includes screenshots of these steps.
+<GuideScreenshot src={alertbox} alt="The overlay widget menu with Alerts expanded and AlertBox highlighted." caption="Choose Alerts → AlertBox to add stream alerts to your overlay." />
 
 ## Add it to OBS
 
-Copy the overlay URL. In OBS, add a **Browser Source** to your scene and paste the URL into its properties. Match the source dimensions to your overlay. Place it above sources that would cover it.
+1. In **My Overlays**, open the overlay's three-dot menu and select **Copy URL**. You can also use the link icon in the overlay editor.
+2. In OBS, select your scene, then choose **Sources → + → Browser**.
+3. Create and name the source, then paste the overlay URL into its properties.
+4. Set **Width** and **Height** to match the overlay. A 1920 × 1080 overlay needs those same source dimensions; use your overlay's dimensions for a vertical layout.
+5. Save, then place the browser source above sources that would cover it.
+
+Keep the overlay URL private.
+
+## Customize alerts
+
+In the overlay editor, select the AlertBox and open the gear beside an event type to change its image, sound, text, layout, and duration. Save your changes.
+
+Check enabled variations too: changing a default alert does not change every variation. Customize or disable variations you do not want. See [Setting Up Twitch Alerts](https://support.streamelements.com/hc/en-us/articles/16789217829778-Setting-Up-Twitch-Alerts-with-StreamElements-Overlays) for examples.
+
+## Use alerts across scenes
+
+You can keep the AlertBox in its own overlay and copy its browser source into each scene. Hide or remove duplicate AlertBoxes in your other overlays to avoid playing the same alert twice.
 
-Keep the overlay URL private. See the [SE.Live support guide](https://support.streamelements.com/hc/en-us/articles/18771457842066) for more on overlay setup.
+If an alert is missing, check [overlay troubleshooting](/selive/troubleshooting#overlays-or-alerts-do-not-appear). For volume and monitoring, follow [alert audio troubleshooting](/selive/troubleshooting#alert-audio).
 
 ## Customize further
 

src/content/docs/selive/guides/scenes-and-sources.mdx

@@ -0,0 +1,43 @@
+---
+title: Manage scenes and sources
+description: Add sources to an SE.Live canvas and link its scenes to your OBS scenes.
+---
+
+import GuideScreenshot from '../../../../components/GuideScreenshot.astro';
+import sceneMenu from '../img/scene-menu.png';
+import sourcePicker from '../img/reuse-source.png';
+
+A scene groups sources such as your camera, gameplay, images, and overlays. Start with a [custom canvas](/selive/guides/canvas).
+
+## Add a scene
+
+1. Click **+** at the bottom left of the canvas dock.
+2. Name the scene, then click **Add Scene**.
+
+## Add sources
+
+1. Open the scene's three-dot menu.
+2. Choose **Add Source**, then select a source type.
+
+<GuideScreenshot src={sceneMenu} alt="A canvas scene's menu with Add Source and Link scene." caption="The three-dot menu contains the source and scene-linking controls." />
+
+3. Choose **Add existing** to reuse a source, or **Create new** to set up another one.
+4. Set **Make source visible** to choose whether it appears immediately, then click **Add Source**.
+
+<GuideScreenshot src={sourcePicker} width={335} alt="Add Video capture dialog with Add existing selected, a camera source selected, and Make source visible checked." caption="Reuse an existing camera source to avoid creating another capture of the same device." />
+
+Reusing a source uses fewer resources than creating another instance. For browser overlays, follow [Add overlays and alerts](/selive/guides/overlays-and-alerts).
+
+## Check canvas settings
+
+Open the canvas settings with the gear icon. Choose the canvas you want to edit, then check its name, resolution, and assigned outputs. Save any changes.
+
+## Link scenes
+
+Link a canvas scene to its matching OBS scene. For example, link a vertical **Just Chatting** scene to your horizontal **Just Chatting** scene.
+
+1. Open the canvas scene's three-dot menu.
+2. Select **Link scene**, then choose the OBS scene.
+3. Switch to the canvas scene and check that the linked OBS scene changes too.
+
+[More about scenes and sources](https://support.streamelements.com/hc/en-us/articles/25445654050450-Creating-and-Managing-Scenes-and-Sources-in-SE-Live).

src/content/docs/selive/guides/twitch-dual-format.mdx

@@ -0,0 +1,39 @@
+---
+title: Stream in dual format on Twitch
+description: Send horizontal and vertical versions of your Twitch stream with SE.Live and Enhanced Broadcasting.
+---
+
+import GuideScreenshot from '../../../../components/GuideScreenshot.astro';
+import twitchSettings from '../img/twitch-enhanced-broadcasting.png';
+
+Dual format sends horizontal and vertical versions of your stream to Twitch together. Desktop and TV viewers see your horizontal layout. Mobile viewers can watch vertically or rotate their phone for the horizontal view.
+
+## Before you begin
+
+- Use OBS Studio 32.0.0 or newer and install SE.Live Public Beta. Close OBS before running the [SE.Live installer](https://streamelements.com/selive).
+- Connect Twitch in **Settings → Stream** in OBS.
+- Check [Twitch's hardware and upload requirements](https://help.twitch.tv/s/article/dual-format-vertical-video). Dual format is available to all Twitch streamers.
+- If you have Aitum Vertical installed, uninstall it before using SE.Live dual format. Running both plugins can cause OBS to crash.
+
+## Prepare your vertical layout
+
+1. [Create a vertical canvas](/selive/guides/canvas) at **1080 × 1920**.
+2. [Add scenes and sources](/selive/guides/scenes-and-sources), then arrange your camera, gameplay, and alerts to fit the portrait frame.
+3. [Link your scenes](/selive/guides/scenes-and-sources#link-scenes) and check both layouts in the preview.
+
+## Enable dual format
+
+1. Open **Settings → Stream** in OBS and select **Twitch**.
+2. Under **Multitrack Video**, check **Enable Enhanced Broadcasting**.
+3. Open **Additional Canvas** and select your SE.Live vertical canvas.
+4. Click **Apply**, then **OK**.
+
+<GuideScreenshot src={twitchSettings} alt="Multitrack Video settings with Enhanced Broadcasting enabled and SE.Live: c1 selected as the additional canvas." caption="Choose the vertical canvas you created from the Additional Canvas dropdown." />
+
+## Go live and check the result
+
+Click **Start Streaming** in OBS. Open your stream on a phone and check it in portrait and landscape. Switch scenes and confirm that the camera, gameplay, and alerts stay in frame.
+
+To return to horizontal-only streaming, set **Additional Canvas** to **None**.
+
+[Get help with dual format setup](https://support.streamelements.com/hc/en-us/requests/new).