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.

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

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

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)

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

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

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)

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)

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)

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)

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)

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)

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

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:

Twitch Integration Layout Guide