Twitch Integration Layout Guide
StreamWeasels Twitch Integration comes with many different layouts. These layouts have their own settings on top of the main plugin settings. You can find out more about each of the StreamWeasels Twitch layouts below:
Twitch Wall (FREE / ESSENTIALS)
Section titled “Twitch Wall (FREE / ESSENTIALS)”
Twitch Wall example
Twitch Wall - Classic Twitch layout for displaying many streams at once.
Twitch Wall Shortcode Attributes
Section titled “Twitch Wall Shortcode Attributes”Each layout has it’s own settings page, which includes a few settings which are unique to that particular layout. You can customise the settings on the settings page or you can customise the settings directly on your shortcodes, with the attributes below:
For example:
[sw-twitch layout="wall" wall-column-count="4"]| Field | Attribute | Values | Description |
|---|---|---|---|
| Column Count | wall-column-count="" | Number | Set number of columns to divide up streams in wall. |
| Column Spacing | wall-column-spacing="" | Number | Set pixel spacing between columns. |
Twitch Rail (FREE / ESSENTIALS)
Section titled “Twitch Rail (FREE / ESSENTIALS)”
Twitch Rail example
Twitch Rail - Horizontal scrolling layout, display many streams in a small space.
Twitch Rail Shortcode Attributes
Section titled “Twitch Rail Shortcode Attributes”Each layout has it’s own settings page, which includes a few settings which are unique to that particular layout. You can customise the settings on the settings page or you can customise the settings directly on your shortcodes, with the attributes below:
For example:
[sw-twitch layout="rail" rail-controls-bg-colour="#000"]| Field | Attribute | Values | Description |
|---|---|---|---|
| Controls Background Colour | rail-controls-bg-colour="" | Colour Hex Code | Set background colour of arrow controls. |
| Controls Arrow Colour | rail-controls-arrow-colour="" | Colour Hex Code | Set colour of controls arrow. |
| Rail Border Colour | rail-border-colour="" | Colour Hex Code | Set colour of border around Rail. |
Twitch Player (FREE / ESSENTIALS)
Section titled “Twitch Player (FREE / ESSENTIALS)”
Twitch Player - Compact, cinema-style layout, great for embedded stream experience.
Twitch Player Shortcode Attributes
Section titled “Twitch Player Shortcode Attributes”Each layout has it’s own settings page, which includes a few settings which are unique to that particular layout. You can customise the settings on the settings page or you can customise the settings directly on your shortcodes, with the attributes below:
For example:
[sw-twitch layout="player" player-welcome-bg-colour="#000"]| Field | Attribute | Values | Description |
|---|---|---|---|
| Welcome Background Colour | player-welcome-bg-colour="" | Colour Hex Code | Set a background colour for welcome screen. |
| Welcome Logo | player-welcome-logo="" | Image URL | Set a logo image to display on welcome screen. |
| Welcome Background Image | player-welcome-image="" | Image URL | Set a background Image on welcome screen. |
| Welcome Text 1 | player-welcome-text="" | Input Text | Set text to display on welcome screen. |
| Welcome Text 2 | player-welcome-text-2="" | Input Text | Set a second line of text to display on welcome screen. |
| Welcome Text Colour | player-welcome-text-colour="" | Colour Hex Code | Set colour of previously set welcome text. |
| Stream List Position | player-stream-list-position="" | left | Set stream list position to the left of the player. |
| right | Set stream list position to the right of the player. | ||
| none | No stream list displayed next to the player. |
Twitch Status (FREE / ESSENTIALS)
Section titled “Twitch Status (FREE / ESSENTIALS)”
Twitch Status - Simply display Twitch live status on every page on your website.
Twitch Status Shortcode Attributes
Section titled “Twitch Status Shortcode Attributes”Each layout has it’s own settings page, which includes a few settings which are unique to that particular layout. You can customise the settings on the settings page or you can customise the settings directly on your shortcodes, with the attributes below:
For example:
[sw-twitch layout="status" status-placement="static"]| Field | Attribute | Values | Description |
|---|---|---|---|
| Show on Every Page | none | 1 | Global setting to enable Twitch Status on every page. |
| Hide Offline | status-hide-offline | 1 | Hide Twitch Status when all users are offline. |
| 0 | Show Twitch Status when all users are offline. | ||
| Placement | status-placement | Absolute | Display Twitch Status fixed to the window in the corner. |
| Static | Display Twitch Status exactly where you placed it on the page. | ||
| Vertical Placement | Top | Display Twitch Status at the top. | |
| Bottom | Display Twitch Status at the bottom. | ||
| Horizontal Placement | Left | Display Twitch Status at the left. | |
| Right | Display Twitch Status at the right. | ||
| Vertical Distance | status-vertical-distance | Number | Choose the distance (in pixels) from the edge. |
| Horizontal Distance | status-horizontal-distance | Number | Choose the distance (in pixels) from the edge. |
| Custom Logo | status-custom-logo | Image URL | Upload a custom logo to replace the Twitch logo. |
| Logo Background Colour | status-logo-background-colour | Colour Hex Code | Change the background colour of the logo. |
| Accent Colour | status-accent-colour | Colour Hex Code | Change the accent colour of Twitch Status. |
| Controls Background Colour | status-carousel-background-colour | Colour Hex Code | Change the background colour of the left / right arrows. |
| Controls Arrow Colour | status-carousel-arrow-colour | Colour Hex Code | Change the colour of the left / right arrows. |
| Disable Carousel | status-disable-carousel | 1 | Enable the carousel when multiple channels are displayed. |
| 0 | Disable the carousel when multiple channels are displayed. | ||
| Enable Classic | status-enable-classic | 1 | Enable classic mode to simply display an online / offline message. |
| 0 | Disable classic mode. | ||
| Classic Online Text | status-classic-online-text | Text Input | When classic mode is active, choose custom online text. |
| Classic Offline Text | status-cllassic-offline-text | Text Input | When classic mode is active, choose custom offline text. |
Twitch Vods (FREE / ESSENTIALS)
Section titled “Twitch Vods (FREE / ESSENTIALS)”
Twitch Vods example
Twitch Vods - The easiest way to display Twitch VODS on your website.
Twitch Vods Shortcode Attributes
Section titled “Twitch Vods Shortcode Attributes”Each layout has it’s own settings page, which includes a few settings which are unique to that particular layout. You can customise the settings on the settings page or you can customise the settings directly on your shortcodes, with the attributes below:
For example:
[sw-twitch layout="vods" vods-channel="lirik"]| Field | Attribute | Values | Description |
|---|---|---|---|
| Vods Channel | vods-channel="" | lirik | The channel which you want to pull vods for. |
| Clip Type | vods-clip-type="" | clips | The type of vods you want to display. |
| highlights | The type of vods you want to display. | ||
| past-broadcasts | The type of vods you want to display. | ||
| Clip Period | vods-clip-period="" | all | The period for which you want to display Clips. |
| day | The period for which you want to display Clips. | ||
| week | The period for which you want to display Clips. | ||
| month | The period for which you want to display Clips. |
Twitch Feature (PRO)
Section titled “Twitch Feature (PRO)”
Twitch Feature example
Twitch Feature - Slick, professional-style layout inspired by the Twitch homepage.
Twitch Feature Shortcode Attributes
Section titled “Twitch Feature Shortcode Attributes”Each layout has it’s own settings page, which includes a few settings which are unique to that particular layout. You can customise the settings on the settings page or you can customise the settings directly on your shortcodes, with the attributes below:
For example:
[sw-twitch layout="feature" feature-embed-position="inside"]| Field | Attribute | Values | Description |
|---|---|---|---|
| Embed Position | feature-embed-position="" | Above | Embed stream content above the feature carousel. |
| Below | Embed stream content below the feature carousel. | ||
| Inside | Embed stream content inside the feature carousel. | ||
| Controls Background Colour | feature-controls-bg-colour="" | Colour Hex Code | Background colour of the controls arrow. |
| Controls Arrow Colour | feature-controls-arrow-colour="" | Colour Hex Code | Colour of controls arrow. |
| Skew | feature-skew="" | 1 | Add a skew or slant effect to the feature carousel. |
| 0 | Do not add a skew effect. |
feature-skew=“”
Twitch Showcase (PRO)
Section titled “Twitch Showcase (PRO)”
Twitch Showcase example
Twitch Showcase - eSports-inspired Twitch Integration with custom images.
Twitch Showcase Shortcode Attributes
Section titled “Twitch Showcase Shortcode Attributes”Each layout has it’s own settings page, which includes a few settings which are unique to that particular layout. You can customise the settings on the settings page or you can customise the settings directly on your shortcodes, with the attributes below:
For example:
[sw-twitch layout="showcase" showcase-vertical-placement="top"]| Field | Attribute | Values | Description |
|---|---|---|---|
| Vertical Placement | showcase-vertical-placement="" | center | Vertical placement of the streamer image. |
| top | Vertical placement of the streamer image. | ||
| bottom | Vertical placement of the streamer image. | ||
| Horizontal Placement | showcase-horizontal-placement="" | center | Horizontal placement of the streamer image. |
| left | Horizontal placement of the streamer image. | ||
| right | Horizontal placement of the streamer image. | ||
| Controls Background Colour | showcase-controls-bg-colour="" | Colour Hex Code | Set background colour of arrow controls. |
| Controls Arrow Colour | showcase-controls-arrow-colour="" | Colour Hex Code | Set colour of controls arrow. |
Twitch Nav (PRO)
Section titled “Twitch Nav (PRO)”
Twitch Nav example
Twitch Nav - Display your Twitch Status right in your navigation items.
Twitch Nav Shortcode Attributes
Section titled “Twitch Nav Shortcode Attributes”Each layout has it’s own settings page, which includes a few settings which are unique to that particular layout. You can customise the settings on the settings page or you can customise the settings directly on your shortcodes, with the attributes below:
| Field | Attribute | Values | Description |
|---|---|---|---|
| No fields for Twitch Nav! |