Twitch Integration Shortcode Guide
- [sw-twitch-embed] - Embed a single Twitch stream
- [sw-twitch] - Embed many Twitch streams, games or teams
- More Advanced Shortcodes
Learn how to use the two types of Twitch Integration shortcode.
Section titled “Learn how to use the two types of Twitch Integration shortcode.”The StreamWeasels Twitch Integration plugins offer two types of shortcodes to embed Twitch streams on your website. Let’s explore how to use them.
[sw-twitch-embed] Shortcode
Section titled “[sw-twitch-embed] Shortcode”Does not require a Twitch authentication token configured in the settings
The [sw-twitch-embed] shortcode allows you to embed a single Twitch stream with custom options. You can use this shortcode when you want to display a specific Twitch channel on your website.
To use the [sw-twitch-embed] shortcode, you can specify various parameters within the shortcode. Here’s an example of how you can use it:
[sw-twitch-embed channel="lirik" autoplay="true" muted="true" embed-chat="false" theme="dark" width="100%"]Replace "lirik" with the desired Twitch channel name, and adjust the other parameters according to your needs. Feel free to customize the parameters to match your preferences and requirements.
[sw-twitch] Shortcode
Section titled “[sw-twitch] Shortcode”Requires a Twitch authentication token configured in the settings
The [sw-twitch] shortcode provides an advanced Twitch integration that allows you to embed multiple streams in various layouts. This shortcode gives you the flexibility to create dynamic and interactive Twitch displays on your site. It utilizes the settings you have configured on the main Twitch Integration settings page.
To use this shortcode, simply add [sw-twitch] to your content where you want the Twitch integration to appear. The plugin will automatically insert the Twitch integration according to your chosen settings. For example:
[sw-twitch layout="wall"][sw-twitch] Shortcode (Advanced)
Section titled “[sw-twitch] Shortcode (Advanced)”Requires a Twitch authentication token configured in the settings
Using the settings on the main settings page works great if you are simply going to use one Twitch Integration on your site. Configure your settings, add your simple shortcode [sw-twitch] , and you’re done.
But what if you want to have multiple Twitch Integrations on your site? Perhaps you want to have two or three on a single page, or you want to have different settings for each integration on different pages. That’s where the shortcode attributes and values come in.
If you want to use multiple different integrations with custom settings throughout your site, you will have to set these custom variables in the shortcode. For example:
[sw-twitch layout="wall" channels="lirik,shroud,sodapoppin"]This shortcode will embed a Twitch Wall Integration with three declared streamers.
The Free plugin from WordPress has a limited number of settings available, while Twitch Integration PRO offers over 30 settings. Each and every setting can be added to your shortcodes for fine, granular control. You can find a list of those attributes and settings for each plugin below.
Feel free to explore the various attributes and settings to create unique and customized Twitch Integrations according to your needs.
Full List of Shortcode Attributes and Values
Section titled “Full List of Shortcode Attributes and Values”Main Settings
Section titled “Main Settings”| Field | Attribute | Values | Description |
|---|---|---|---|
| Game | game="" | Input game name as appears on twitch | Pulls all streams playing selected game |
| Language | language="" | Type ISO 639-1 2 letter language code | Pulls all streams labelled as this language |
| Channels | channels="" | Input list of channel names separated by comma (no space required | Pulls only channels defined in field. |
| Team | team="" | Input name of twitch team exactly as it appears in twitch url. | Pulls all streams from defined twitch team. |
| Title Filter | title-filter="" | Input a Term to filter streams (E.g "NoPixel") | Displays only streams containing filter in title. |
| Limit | limit="" | Number up to 100 | Limits number of streams to this number. |
Layout settings
Section titled “Layout settings”| Field | Attribute | Values | Description |
|---|---|---|---|
| Layout | layout="" | none | Displays basic embedded content |
| wall | Displays embedded content using Wall Add On | ||
| rail | Displays embedded content using Rail Add On | ||
| player | Displays embedded content using Player Add On | ||
| status | Displays embedded content using Status Add On | ||
| feature | Displays embedded content using Feature Add On | ||
| vods | Displays embedded content using Vods Add On | ||
| nav | Displays embedded content using Nav Add On | ||
| showcase | Displays embedded content using Showcase Add On |
Embed Settings (PAID only)
Section titled “Embed Settings (PAID only)”| Field | Attribute | Values | Description |
|---|---|---|---|
| Embed | embed="" | page | Embed the Twitch content directly on the page |
| popup | Embed the Twitch content in a popup | ||
| twitch | Direct users directly to Twitch | ||
| Embed Colour Scheme | embed-theme="" | dark | Use Dark Theme for embedded twitch content |
| light | Use Light Theme for embedded twitch content | ||
| Display Chat | embed-chat="" | 1 | Display chat on Player |
| 0 | Hide Chat on Player | ||
| Display Title | embed-title="" | 1 | Display Title of twitch content as set by streamer |
| 0 | Hide Title of stream | ||
| Title Position | title-position="" | top | Display title on top of embedded content |
| bottom | Display title at bottom of embedded content | ||
| Start Muted | embed-muted="" | 1 | Start embedded content muted |
| 0 | Start embedded content with sound |
Offline Settings (PAID only)
Section titled “Offline Settings (PAID only)”| Field | Attribute | Values | Description |
|---|---|---|---|
| Show Offline Streams | show-offline="" | 1 | Show offline streams in list |
| 0 | Only show online streams in list | ||
| Offline Message | show-offline-text="" | Custom Text | Display Custom message when ALL streams are offline |
| Offline Image | show-offline-image="" | Image URL | Display Image when ALL streams are offline |
Autoplay Settings (PAID only)
Section titled “Autoplay Settings (PAID only)”| Field | Attribute | Values | Description |
|---|---|---|---|
| Autoplay Stream | autoplay="" | 1 | Autoplay stream on loading |
| 0 | Do not load video on page loading | ||
| Autoplay Select | autoplay-select="" | most | Autoplay the most viewed stream from list |
| least | Autoplay the least viewed stream from list | ||
| random | Autoplay a random stream from list | ||
| Featured Streamer | featured-stream="" | Channel name of featured stream | If this channel is online autoplay it. |
Appearance Settings (PAID only)
Section titled “Appearance Settings (PAID only)”| Field | Attribute | Values | Description |
|---|---|---|---|
| Title | title="" | Custom Text | Add your own title to embedded content |
| Subtitle | subtitle="" | Custom Text | Add your own subtitle to embedded content |
| Offline Image | offline-image="" | Image URL | Show custom profile image when channel offline |
| Custom Logo | logo-image="" | Image URL | Use custom image rather than channel profile image |
| Profile Image | 1 | Use profile image set by channels (only works when channels are offline at moment) | |
| | 0 | Do not show profile images at all | |
| Logo Background Colour | logo-bg-colour="" | Colour Hex Code | Add Background colour to logo |
| Logo Border Colour | logo-border-colour="" | Colour Hex Code | Add border colour to logo |
| Max Width | max-width | Custom number of pixels | set maximum width of content |
Tile Settings (PAID only)
Section titled “Tile Settings (PAID only)”| Field | Attribute | Values | Description |
|---|---|---|---|
| Tile Layout | tile-layout="" | detailed | Tile showing channel preview, channel name, logo and background colour |
| compact | Tile without background colour or profile logo | ||
| Tile Sorting | tile-sorting="" | most | Order tiles from most viewed first then descending |
| least | Order tiles from least viewed first then ascending | ||
| | alpha | Order tiles alphabetically by channel name | |
| random | Order tiles randomly | ||
| Live Info | tile- live-info="" | viewer | Show number of viewers on top left of tile |
| online | Show green online dot next to viewer count or red offline dot for offline | ||
| live | Show "Live" Text on red background on live channels | ||
| none | No display at top left of tile. | ||
| Background Colour | tile-background-colour="" | Colour Hex Code | Background colour for tiles. |
| Title Colour | tile-title-colour="" | Colour Hex Code | Set colour of channel title on tile |
| Subtitle Colour | subtitle-colour="" | Colour Hex Code | Set colour of channel subtitle on tile |
| Rounded Corners | tile-rounded-corners="" | Number | Set pixel value for rounded corners, recommended between 5 - 40 |
Hover Settings (PAID only)
Section titled “Hover Settings (PAID only)”| Field | Attribute | Values | Description |
|---|---|---|---|
| Hover Effect | hover-effect="" | None | No Hover effect |
| Twitch | Twitch style drop shadow effect on hover | ||
| Play | Play button effect on hover | ||
| Hover Colour | hover-colour="" | Colour Hex Code | Colour used with Twitch Hover effect for drop shadow |
Twitch Integration Layouts
Section titled “Twitch Integration Layouts”StreamWeasels Twitch Integration comes with many different layouts. These layouts have their own settings on top of the Main Settings above. You can find out more about each of the StreamWeasels layouts with the link below: